panpsychism/morning_exercise_resources/clocks_jquery/clock.md

Morning Exercise 12-05

Learning Objectives

• Practice using jQuery to manipulate the DOM
• Practice using JavaScript Timers
• Practice using internal JavaScript Objects

Make a working virtual clock

Today you are going to build a clock!

Start by planning! Draw a clock, break down the problem.

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