This snippet of code may not be complete, but it effectively addresses the issue at hand.
<body onload="init()">
<nav>
<h1 style="font-family:Helvetica;">
<ul class="nav">
<li ><a href="#">Menu 1</a>
<ul>
<li id="navbar-menu"><a href="#">Sub-menu Item 1</a></li>
<li id="navbar-menu"><a href="#">Sub-menu Item 2</a></li>
<li id="navbar-menu"><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
</ul>
</h1>
</nav>
<body>
There are a total of 4 menus in this code.
.nav li ul a:hover {
background: rgb(96, 235, 245);
color:white;
}
body {
color:white;
}
When I hover over the sub-menu items, the background color changes. However, I want this color change to be based on the time of the user. I have attempted to implement this using JavaScript and have encountered issues. Below is the JavaScript code I am using:
function init() {
function setBackgroundForTimeOfDay() {
const body = document.querySelector('body');
const hours = new Date().getHours();
if (hours < 6 || hours >= 18)
body.style.background = 'linear-gradient(to right, rgb(39, 38, 38), rgb(245, 96, 96),rgb(39, 38, 38))';
else
body.style.background = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 235, 245),rgb(39, 38, 38))';
}
setBackgroundForTimeOfDay();
setInterval(setBackgroundForTimeOfDay, 60000);
}
function init1() {
function setBackgroundForTimeOfDay() {
const li = document.getElementById('navbar-menu');
const hours = new Date().getHours();
if (hours < 6 || hours >= 18)
li.style.background = 'rgb(245, 96, 96)';
else
li.style.background = 'rgb(96, 235, 245)';
}
setBackgroundForTimeOfDay();
setInterval(setBackgroundForTimeOfDay, 60000);
}
init1();
I am encountering issues with the JavaScript implementation. Can someone please provide insight on what the problem might be?