DEV Community 👩‍💻👨‍💻

Cover image for JavaScript Clock
raphael_bcn
raphael_bcn

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

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

setInterval(clock, 1000); 
        }

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
clementgaudiniere profile image
Clément Gaudinière

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

''' js
// Your code
'''

Collapse
 
raphyphoo77 profile image
raphael_bcn

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.