DEV Community 👩‍💻👨‍💻

Cover image for JavaScript Clock

Posted on • Updated on

JavaScript Clock

This is my first project with code pen with css html and javascript language. I realise this project thank to a tuto on youtube but i took ownership of the code.
for move the minute second and hour needle we calculate the hour minute or second in degree angle thank to :
const hour = hours*30;
the needle move thank to :
document.querySelector('.heure').style.transform =rotate(${hour}deg);
the position of needle move every second :
setInterval(clock, 1000);

for the rest it's very easy

function clock(){
  //heure s min
  const date = new Date(); 
  const hours = ((date.getHours()+11)%12+1); 
  const minutes = date.getMinutes(); 
  const secondes = date.getSeconds(); 
  const hour = hours*30; 
  const minute = minutes*6;
  const seconde = secondes*6;
  document.querySelector('.heure').style.transform = `rotate(${hour}deg)`;
  document.querySelector('.seconde').style.transform = `rotate(${seconde}deg)`;

setInterval(clock, 1000); 

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

clementgaudiniere profile image
Clément Gaudinière

Great clock. If you want you can include your codepen with this syntax in your article: {% codepen %}. Also in your code block you can specify that you use JavaScript like this:

''' js
// Your code

raphyphoo77 profile image

thank you i'm starting on this network

Create an Account! The only reason people scroll to the bottom...  
is because they want to read more.

Create an account to bookmark, comment, and react to articles that interest you.