Hi! This is a little clock I managed to piece together with javascript (hell language). It tells the time with pixel images of the sun and moon--I'll leave all the resources you need to create it on this page! I'd appreciate if you credited me somewhere on your site if you use the images, though I got the original code from one of Dani Krossing's tutorials and edited it with the help of W3Schools, so the code doesn't need to be credited to me.

Javascript

*In the part of the code that says "images/smclock/x-x.png", you'll have to replace the "images" and "smclock" with whatever folder(s) you put the images in. Also, the xx.png in the else statement doesn't have an image.

Copy/paste version, but you might want to write it out anyway since copy/pasting is messy

let getBox = document.getElementById("clockBox"); let img = document.createElement("img"); let date = new Date(); let currentHour = date.getHours(); if (currentHour >= 1 && currentHour <= 3) { img.src = "images/smclock/1-3.png"; } else if (currentHour >= 4 && currentHour <= 6) { img.src = "images/smclock/4-6.png"; } else if (currentHour >= 7 && currentHour <= 9) { img.src = "images/smclock/7-9.png"; } else if (currentHour >= 10 && currentHour <= 12) { img.src = "images/smclock/10-12.png"; } else if (currentHour >= 13 && currentHour <= 15) { img.src = "images/smclock/13-15.png"; } else if (currentHour >= 16 && currentHour <= 18) { img.src = "images/smclock/16-18.png"; } else if (currentHour >= 19 && currentHour <= 21) { img.src = "images/smclock/19-21.png"; } else if (currentHour >= 22 && currentHour <= 24) { img.src = "images/smclock/22-24.png"; } else { img.src = "images/smclock/xx.png" } document.getElementById('clockBox').appendChild(img);

HTML

You'll need to create a div box with the id "clockBox" wherever you want the clock to appear. You can also add a class onto it for styling (it naturally appears pretty big, so you'll probably have to). If you want to style the images specifically, you'll need to specify the div box's class name then img (ex: .clock img {styling here}). There's no other HTML or CSS required!

Images

You can replace these with whatever you like, just make sure that the names are the same or that you change the names in the js. They're named after the respective hours that they'll appear at (which use 24-hour clock times, since that's how js works with dates)!