sharpartzgh / Animated-Clock

Class Assignment - 8

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Task 1: Animated Clock

  • Open the task-1-animated-clock folder in VS Code and open the index.html file in your browser.

  • You should see a clock with a second hand, minute hand, and hour hand.

  • Your task is to make the clock animated so that the hands move in real time.

  • You can also try to incorporate the ticking sound effect from the media folder.

  • For this task, you will need to edit the just the script.js file.

  • Hint: Look up the Date object in JavaScript.

  • Hint: Look up the Audio object in JavaScript.

  • Hint: Look up the setInterval method in JavaScript.

  • Hint: Look up the setTimeout method in JavaScript.

  • Hint: Look up the transform property in CSS.

  • Hint: Look up the transform SVG attribute in SVG.

  • Here is a GIF of the expected result:

Animated Clock

About

Class Assignment - 8