{"id":22345659,"url":"https://github.com/gerhynes/js-and-css-clock","last_synced_at":"2025-03-26T10:22:28.707Z","repository":{"id":106045552,"uuid":"105626620","full_name":"gerhynes/js-and-css-clock","owner":"gerhynes","description":"An analog clock built with JavaScript and CSS for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2017-11-18T22:01:23.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-31T11:49:40.426Z","etag":null,"topics":["javascript","javascript30"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/js-and-css-clock/","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/gerhynes.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":"2017-10-03T07:48:22.000Z","updated_at":"2018-01-23T21:56:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"d30a095f-616d-4726-b0b1-9f7ad42e32df","html_url":"https://github.com/gerhynes/js-and-css-clock","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjs-and-css-clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjs-and-css-clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjs-and-css-clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjs-and-css-clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/js-and-css-clock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245632754,"owners_count":20647273,"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":["javascript","javascript30"],"created_at":"2024-12-04T09:18:21.446Z","updated_at":"2025-03-26T10:22:28.702Z","avatar_url":"https://github.com/gerhynes.png","language":"CSS","readme":"# [JavaScript and CSS Clock](https://gk-hynes.github.io/js-and-css-clock/)\n\nAn analog clockface built with JavaScript for Wes Bos' [JavaScript 30](https://javascript30.com/) course.\n\n[![Screenshot of JavaScript clock](https://screenshots.firefoxusercontent.com/images/60e26703-4af6-4f40-9716-5c10b11e4712.png)](https://gk-hynes.github.io/js-and-css-clock/)\n\n## Notes\n\n### CSS\n\nSet the hands to start at 12 o clock using ```transform: rotate(90deg);```.\n\nBy default elements rotate at their centre. Set the hands to rotate from their right end using ```transform-origin: 100%;```. \n\nGive the hands a realistic 'tick' using a cubic-bezier transition-timing function: ```transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);```.\n\n### JavaScript\n\nUse a setInterval function to run the ```setDate()``` function every second. \n\nUse ```new Date();``` and ```now.getSeconds();``` etc. to gte the current time. \n\nConvert seconds, minutes and hours to degrees by dividing them by 60 or 12 and then multiplying the result by 360. Add 90 to offset the original move to 12 o clock. \n\nThe hands glitch when the second handreaches 12 as the second hand goes backwards to try to start again. Avoid this by using an if statement to set ```hand.style.transition = \"none\"``` if the seconds hand is at 90 degrees. \n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fjs-and-css-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fjs-and-css-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fjs-and-css-clock/lists"}