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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

so if there is any help needed. Reach out. I will be online everyday

CodePudding user response：

var today = new Date();
var time = today.getHours();
var greet;


if (time > 0 && time <= 12) {
    greet = 'Online';
    greetColor = "green";  
} else if (time > 12 && time <= 23) {
    greet = 'Offline';
    greetColor = "red";
} 



var show = document.getElementById('message');
show.textContent = greet;
show.style.color = greetColor;

CodePudding user response：

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>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Take a look at the first example here :) JavaScript HTML DOM - Changing CSS