More DOM manipulations and CSS transitions but more complex.
Initialize instances of the DOM elements to be manipulated to variables 'hourHand', 'minHand', ''secHand' Initialize current Date and time to variable 'now' Get hours, minutes and seconds from 'now' Allocate degrees for rotation for each hour, minute and second Manipulate the DOM elements 'hourHand', 'minHand', 'secHand' based on the rotation degrees of each element Add transitions to the DOM elements to get realistic clock hand movements Run the steps every second
console.log("Why is it not working?!");
to try and discover where the code was failing.
And immediately it clicked in my mind. I had committed a rookie mistake.
script<> tag was in the
<head> of the HTML document so it was being executed before the full page had been loaded hence i couldn’t get the DOM elements because they didn’t exist then.
Placing it at the end of the
<body> tag quickly solved my problem and i was happy again well after a face palm. Fortunately no-one was watching.
Feel free to contact me on twitter if you’d like to collaborate or just to chat. You can find the code here.