README.md

Javascript Clock

This is a quick javascript project to demonstrate a analog clock using HTML Elements and CSS

Showcase

Working

This project makes use of Unsplash API to fetch random images and assign it to the background.

The date and time is locally fetched from the users PC to display to the screen.

let dateString = new Date()

The analog clock hands are moving by changing the CSS transform property of span elements.

secDisplay.style.transform = formatTransform((360 / 60) * sec - 90)
minDisplay.style.transform = formatTransform((360 / 60) * min - 90)
hourDisplay.style.transform = formatTransform((360 / 12) * hour - 90)

Here the formatTransform function is defined as:

function formatTransform(num) {
    return `rotateZ(${num}deg) translateX(-25px)`
}