panpsychism/morning_exercise_resources/clocks_jquery/clock.md

WDI-PANTHALASSA

---

Title: Clock jQuery
Type: Morning Exercise
Duration: 1hr
Course: WDIr-Panthalassa
Competencies: jQuery, CSS Transforms

---

Clock with jQuery and CSS Transforms

Learning Objectives

• Practice using jQuery to manipulate the DOM
• setInterval and math
• CSS Transforms
• JavaScript Timers

Step 1

Define 3 variables and grab the associated element from the DOM using jQuery:

• minuteHand
• secondHand
• hourHand

Step 2

• Using setInterval and jQuery make the second hand do a full rotation in 60 seconds.
• You will have to utilize the css attribute transform - rotate.

Step 3

• Make the minute hand do a full rotation in 1 hour

Step 4

• Make the hour hand do a full rotation in 12 hours

BONUS

• Sync up your clock with the current time.
• Take a look at the JavaScript Date object