Changing a websites background color based on client side (viewers) time is easily done with a small amount of vanilla Javascript.
Changing a website background color or other styles has its uses such as displaying a night mode theme or setting a mode to the users/viewers time.
The only HTML needed is the text to display the time and name for the time (morning, day, evening or night).
Next get the viewers date/time and then format it to only have the hour in 24 hour format
var now = new Date(); var hours = now.getHours();
Build the time string (11:41 AM etc)
var ft = now.toLocaleString("en-US", {
hour: "numeric",
minute: "numeric",
hour12: true
}); Then run if statements to find what style and describer word to use for the given time
if (5 <= hours && hours < 8) {//Morning
document.write('');//Gradient styled background with white text
var type = "Morning";//Time describer word
} Lastly setting the inner HTML of the id ‘time’
document.getElementById("time").innerHTML = `The time is ${ft} it is ${type}`;//The time is 5:18 PM it is Evening
Full code is:
A drained and empty Kennington reservoir images from a drone in early July 2024. The…
Merrimu Reservoir from drone. Click images to view larger.
Some early September spring shots from a bushwalk, It is still too early for wildflowers.
I recently needed to clone over a smaller NVMe to a 2TB SK Hynix Platinum…
If you ever needed a simple solution in Laravel to delete an entire directory and…
How to enforce only one user to register or be registered in a Laravel web…