You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
913 B
42 lines
913 B
|
|
|
|
# WDI-PANTHALASSA
|
|
|
|
---
|
|
Title: Clock jQuery<br>
|
|
Type: Morning Exercise<br>
|
|
Duration: 1hr<br>
|
|
Course: WDIr-Panthalassa<br>
|
|
Competencies: jQuery, CSS Transforms<br>
|
|
|
|
---
|
|
|
|
## 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
|