https://github.com/devil-1964/the_clock

"Analog Clock🕑 using HTML, CSS, Javascript"
https://github.com/devil-1964/the_clock

basic css html javascript

Last synced: over 1 year ago
JSON representation

"Analog Clock🕑 using HTML, CSS, Javascript"

• Host: GitHub
• URL: https://github.com/devil-1964/the_clock
• Owner: devil-1964
• Created: 2023-10-08T10:29:37.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-25T15:25:43.000Z (about 2 years ago)
• Last Synced: 2025-01-21T22:36:32.396Z (over 1 year ago)
• Topics: basic, css, html, javascript
• Language: CSS
• Homepage: https://devil-1964.github.io/The_Clock/
• Size: 123 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# The Clock using HTML, CSS and Javascript

## Preview

![Clock](image/imageClockOriginal.png)

## How to make one :

- ### Download a Clock Image.

- ### Create Clock Hands with CSS.

- ### Get Current Time with JavaScript.

  ```

  d = new Date();

  htime = d.getHours();

  time = d.getMinutes();

  stime = d.getSeconds;

  ```

- ### Calculate Hand Angles.

  ```

  hrot = 30 * htime + mtime / 2;

  mrot = 6 * mtime;

  srot = 6 * stime;

  ```

- ### Rotate Clock Hands with JavaScript DOM.

  ```

  hour.style.transform= `rotate(${hrot}deg)`

  minute.style.transform= `rotate(${mrot}deg)`

  second.style.transform = `rotate(${srot}deg)`;

  ```

- ### Update the Clock Every Second.

  ```

  setInterval(() => {

  //The content

  }, 1000);

  ```