Code Monkey home page Code Monkey logo

analouge_watch's Introduction

Analog + Digital Watch

A stylish analog + digital watch with a beautiful user interface created using pure HTML, CSS, and vanilla JavaScript is a small beginner friendly project and good for beginning of frontend development .

Features

  • Analog clock with smooth ticking second hand.
  • Digital clock displaying current time in a 12-hour format.
  • Elegant and responsive design.

Preview

Watch Preview

Things you can learn.

CSS

- CSS code demonstrates a combination of flexbox, pseudo-elements, animations, and other styling techniques to create a visually appealing and dynamic analog + digital watch interface.

Javascript

- Analog Clock: The analog clock JavaScript program focuses on creating a visually appealing representation of time. It utilizes DOM manipulation to select clock hands and employs the setInterval function to dynamically update the rotation of the hour, minute, and second hands every second. The code showcases the calculation of rotation degrees based on the current time , allowing for the creation of a classic analog clock interface.

-Digital Clock: In the digital clock JavaScript program, the emphasis shifts to displaying time in a digital format. By querying DOM elements, the code accesses the hour, minute, second, and AM/PM indicators. The show function formats the current time into a 12-hour clock, and a ternary operator determines whether it's AM or PM. Real-time updates are achieved through the setTimeout function, ensuring the digital clock stays synchronized with the system time. Additionally, string manipulation techniques are employed to format time elements with leading zeros when necessary.

-General Concepts: Both parts of the code exhibit common programming concepts such as DOM manipulation for interactive web elements, the use of the Date object for time-related functionalities, and the implementation of conditional statements to adjust the clock display based on the current time. The integration of interval and timeout functions highlights the dynamic and real-time nature of these clock displays, providing insights into how JavaScript can be applied to create engaging and functional user interfaces.

How to Use

  1. Clone the repository:
  1. Open the project :
  • Open the index.html file in your preferred web browser.

[Enjoy the stylish analog + digital watch!]

Customize

Feel free to customize the styles or add additional features to make the watch suit your preferences. The code is written using pure HTML, CSS, and vanilla JavaScript, making it easy to modify.

Contributing

If you'd like to contribute to this project, please follow the contribution guidelines.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Additionally, create separate files for CONTRIBUTING.md and LICENSE with their respective content. Here's an example for CONTRIBUTING.md:

Contributing Guidelines

Thank you for considering contributing to the Analog + Digital Watch project!

Pull Requests

  1. Fork the repository.
  2. Create a new branch for your feature: git checkout -b feature-name.
  3. Commit your changes: git commit -m 'Add new feature'.
  4. Push to the branch: git push origin feature-name.
  5. Open a pull request with a detailed description of your changes.

Issues

If you find any issues or have suggestions, please open an issue. We welcome all contributions and appreciate your help in making this project better!

For any help

(ping me on). -LinkedIn - [https://www.linkedin.com/in/abdul-r-siddique-a23257210/] -Gmail - [[email protected]]

analouge_watch's People

Contributors

featitx avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.