CODEWITHSUNDEEP
javascript
Richard Hammond
Richard Hammond

Reputation: 1

Change CSS with User Current Time JavaScript

I want to add change css using current time. this is the Ilustration the code i want.

var today = new Date();
var hourNow = today.getHours();
var style; //add css//

    if (hourNow > 0) { //hour 00:00 - 12:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff";
      document.getElementsByTagName('BODY')[0].style.color= "#505050"; }

    else if (hourNow > 12) { //hour 120:00 - 18:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro";
      document.getElementsByTagName('BODY')[0].style.color= "black"; }

    else if (hourNow > 18) { //hour 18:00 - 00:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b";
      document.getElementsByTagName('BODY')[0].style.color= "#fff"; }

    else {
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "white";
      document.getElementsByTagName('BODY')[0].style.color= "black";}

is that possible? i am new with JavaScript..

Upvotes: 0

Views: 121

Answers (3)

Damien
Damien

Reputation: 3362

Your code will always succeed the first condition, unless it is exactly 0, and in that case it will take the 'default'. I fixed it, use that :

var today = new Date();
var hourNow = today.getHours();
var style; //add css//

if (hourNow >= 18) { //hour 18:00 - 00:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b";
  document.getElementsByTagName('BODY')[0].style.color= "#fff"; }

else if (hourNow >= 12) { //hour 120:00 - 18:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro";
  document.getElementsByTagName('BODY')[0].style.color= "black"; }

else if (hourNow >= 0) { //hour 00:00 - 12:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff";
  document.getElementsByTagName('BODY')[0].style.color= "#505050"; }

else {
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "white";
  document.getElementsByTagName('BODY')[0].style.color= "black";}

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074268

I would do less repeating of myself and use else (listing things in the opposite order), but fundamentally that should have been okay. If I had to do direct style manipulation, I'd do something like this:

var today = new Date();
var hourNow = today.getHours();
var style;

if (hourNow > 18) {
  background = "#1b1b1b";
  color = "#fff";
} else if (hourNow > 12) {
  background = "gainsboro";
  color = "black";
} else if (hourNow > 0) {
  background = "#fff";
  color = "#505050";
}
document.body.style.backgroundColor = background;
document.body.style.color = color;
This is the document body.

...or better use, put the style information in the CSS and add/remove classes.

var today = new Date();
var hourNow = today.getHours();
var style;
var cls;

if (hourNow > 18) {
  cls = "evening";
} else if (hourNow > 12) {
  cls = "afternoon";
} else if (hourNow > 0) {
  cls = "morning";
}
document.body.classList.remove("morning", "afternoon", "evening");
document.body.classList.add(cls);
.morning {
  background-color: #fff;
  color: #505050;
}
.afternoon {
  background-color: gainsboro;
  color: black;
}
.evening {
  background-color: #1b1b1b;
  color: #fff;
}
This is the document body.

Upvotes: 2

Richard Hamilton
Richard Hamilton

Reputation: 26434

In this case, I would use a switch statement. Also, instead of setting the style, it might be more efficient to change the class name. Test this out

var today = new Date();
var hourNow = today.getHours();

switch(true) {
    case (hourNow > 0 && hourNow <= 12):
        document.body.className = "morning";
        break;
    case (hourNow > 12 && hourNow <= 18):
        document.body.className = "afternoon";
        break;
    default:
        document.body.className = "evening";
        break;
}
    
.morning {
  background-color: #fff;
  color: #505050;
}

.afternoon {
  background-color: gainsboro;
  color: black;
}

.evening {
  background-color: #1b1b1b;
  color: #fff;
}

Upvotes: 0

Related Questions