I want to implement an availability status on the site based on a given hour. I have prepared the code, but I do not know how to include the color specification.
I want to display "Online" in green, while "Offline" in red? How to do it?
var today = new Date();
var time = today.getHours();
var greet;
if (time > 0 && time <= 12) {
greet = 'Online';
} else if (time > 12 && time <= 23) {
greet = 'Offline';
}
var show = document.getElementById('message');
show.textContent = greet;<p id="message"></p>Simplest - add greet as a class too
const show = document.getElementById('message');
var today = new Date();
var time = today.getHours();
var greet;
if (time > 0 && time <= 12) {
greet = 'Online';
} else if (time > 12 && time <= 23) {
greet = 'Offline';
}
show.classList.add(greet)
show.textContent = greet;.Offline { color: red; }
.Online { color: green; }<p id="message"></p>You can even add the text in the class
const show = document.getElementById('message');
const time = new Date().getHours();
var greet;
if (time > 0 && time <= 12) {
greet = 'Online';
} else if (time > 12 && time <= 23) {
greet = 'Offline';
}
show.classList.add(greet).Offline {
color: red;
}
.Offline::after {
content: "Offline"
}
.Online {
color: green;
}
.Online::after {
content: "Online"
}<p id="message"></p>const show = document.getElementById('message');
var today = new Date();
var time = today.getHours();
var greet;
if (time > 0 && time <= 12) {
greet = 'Online';
} else if (time > 12 && time <= 23) {
greet = 'Offline';
}
show.classList.add(greet)
show.textContent = greet;.Offline { color: red; }
.Online { color: green; }<p id="message"></p>so if there is any help needed. Reach out. I will be online everyday
You can select the <p> tag on the first line of script
var today = new Date();
var time = today.getHours();
var greet;
var show = document.getElementById('message');
if (time > 0 && time <= 12) {
greet = 'Online';
show.style.color = "green"
} else if (time > 12 && time <= 23) {
greet = 'Offline';
show.style.color = "red";
}
show.textContent = greet;<p id="message"></p>