{"id":18830630,"url":"https://github.com/featitx/analouge_watch","last_synced_at":"2025-07-11T03:03:16.502Z","repository":{"id":205082853,"uuid":"557455712","full_name":"featitx/analouge_watch","owner":"featitx","description":"Analouge digital with a beautiful user interface created using pure HTML, CSS, and vanilla JavaScript","archived":false,"fork":false,"pushed_at":"2024-01-07T09:48:59.000Z","size":236,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T16:14:48.741Z","etag":null,"topics":["clock","digital-clock","htlm5","vanilla-css","vanilla-javascript","watch"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/featitx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-25T18:11:40.000Z","updated_at":"2024-03-08T18:21:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"6da59ab4-9093-4463-9edf-8118f9fc2825","html_url":"https://github.com/featitx/analouge_watch","commit_stats":null,"previous_names":["featitx/analouge_watch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/featitx/analouge_watch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/featitx%2Fanalouge_watch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/featitx%2Fanalouge_watch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/featitx%2Fanalouge_watch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/featitx%2Fanalouge_watch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/featitx","download_url":"https://codeload.github.com/featitx/analouge_watch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/featitx%2Fanalouge_watch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264719230,"owners_count":23653540,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clock","digital-clock","htlm5","vanilla-css","vanilla-javascript","watch"],"created_at":"2024-11-08T01:49:40.153Z","updated_at":"2025-07-11T03:03:16.487Z","avatar_url":"https://github.com/featitx.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Analog + Digital Watch\n\nA 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 .\n\n## Features\n\n- Analog clock with smooth ticking second hand.\n- Digital clock displaying current time in a 12-hour format.\n- Elegant and responsive design.\n\n## Preview\n\n![Watch Preview](./assets/watch-preview.png)\n\n## Things you can learn.\n\u003ch3\u003eCSS\u003c/h3\u003e\n- 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.\n\n\u003ch3\u003eJavascript\u003c/h3\u003e\n- Analog Clock:\nThe analog clock JavaScript program focuses on creating a visually appealing representation of time. It utilizes \u003cb\u003eDOM manipulation\u003c/b\u003e to select clock hands and employs the \u003cb\u003esetInterval function\u003c/b\u003e to dynamically update the rotation of the hour, minute, and second hands every second. The code showcases the \u003cb\u003ecalculation of rotation degrees based on the current time \u003c/b\u003e, allowing for the creation of a classic analog clock interface.\n\n-Digital Clock:\nIn the digital clock JavaScript program, the emphasis shifts to displaying time in a digital format. By \u003cb\u003equerying DOM elements\u003c/b\u003e, 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 \u003cb\u003eternary operator\u003c/b\u003e 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, \u003cb\u003estring manipulation techniques\u003c/b\u003e are employed to format time elements with leading zeros when necessary.\n\n-General Concepts:\nBoth 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.\n\n\n## How to Use\n\n1. Clone the repository:\n\n - git clone https://github.com/featitx/analouge_watch\n\n2. Open the project :\n\n - Open the index.html file in your preferred web browser.\n\n[Enjoy the stylish analog + digital watch!]\n\n## Customize\nFeel 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.\n\n## Contributing\nIf you'd like to contribute to this project, please follow the contribution guidelines.\n\n## License\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n\nAdditionally, create separate files for `CONTRIBUTING.md` and `LICENSE` with their respective content. Here's an example for `CONTRIBUTING.md`:\n\n# Contributing Guidelines\n\nThank you for considering contributing to the Analog + Digital Watch project!\n\n## Pull Requests\n\n1. Fork the repository.\n2. Create a new branch for your feature: `git checkout -b feature-name`.\n3. Commit your changes: `git commit -m 'Add new feature'`.\n4. Push to the branch: `git push origin feature-name`.\n5. Open a pull request with a detailed description of your changes.\n\n## Issues\n\nIf you find any issues or have suggestions, please open an issue.\nWe welcome all contributions and appreciate your help in making this project better!\n\n## For any help\n\n(ping me on).\n-LinkedIn - [https://www.linkedin.com/in/abdul-r-siddique-a23257210/]\n-Gmail - [siddabdul7@gmail.com]\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeatitx%2Fanalouge_watch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeatitx%2Fanalouge_watch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeatitx%2Fanalouge_watch/lists"}