My attempt to create a weather app with a glowing effect has hit a roadblock. I want the app to glow "yellow" between 6 and 16 hours, and "purple" outside of those hours. I have assigned classes for AM and PM elements in HTML, and styled them accordingly in CSS. But, my JavaScript function isn't working as expected. It only recognizes one class (the last one added – PM) and not the other (AM). Below is a snippet of my HTML and JS code. (P.S. Bootstrap is being used)
HTML
<body>
<div id="weather-app-wrapper">
<div class="container-lg mt-5 mb-2 am pm" id="weather-app">
<div class="row">
<div class="col-12 mt-3">
<form id="city-search-form">
<input
type="text"
placeholder="Enter city name"
id="search-field"
/>
<input type="submit" value="search" class="btn btn-primary" />
</form>
</div>
</div>
JAVASCRIPT
let now = new Date();
let currentDate = document.getElementById("date-element");
let date = now.getDate();
let hours = now.getHours().toString().padStart(2, "0 ");
let minutes = now.getMinutes().toString().padStart(2, "0");
let days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
let day = days[now.getDay()];
let months = [
"January",
"Febuary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
let month = months[now.getMonth()];
currentDate.innerHTML = `${day}, ${month} ${date}, ${hours}:${minutes}`;
function glow() {
let app = document.getElementById("weather-app");
if (hours > 6 && hours < 16) {
app.classList.add("am");
} else {
if (hours < 6 && hours >= 16) {
app.classList.add("pm");
}
}
}
glow()
I've experimented with different versions of the code above, but being a beginner in coding, I might be missing something crucial that could solve this issue. Any basic and simple guidance would be greatly appreciated, as I'm still learning.
If I haven't provided enough information about my problem or included too much unnecessary detail, I apologize in advance!
Thank you for your help!