Question
New to Javascript and working on a Workday Scheduler project
I am new to coding and working on a javascript project. I am trying to setup a change in “class” attribute (change of background color) in a textarea. The change should happen according to time of day which I am accessing via moment.js. This is a 9am to 5pm scheduler in which each hour block should change background color depending if it is past-time, present-time or in the future. I try to do it with a switch statement but I think my syntax is not what it should be. This is the code I am using:
var correctTime = moment().hour();
var time17 = 17
var time18 = 18;
switch(time17) {
case correctTime > time17:
switchClass("box5").addClass("past");
break;
case correctTime >= time17 && correctTime < time18:
switchClass("box5").addClass("present");
break;
case correctTime < time17:
switchClass("box5").addClass("future");
break;
default:
}
This are the classes in the css file:
.past {
background-color: #d3d3d3;
color: white;
font-size: 30px;
text-shadow: black 2px 2px;
}
.present {
background-color: #ff6961;
color: white;
font-size: 30px;
text-shadow: black 2px 2px;
}
.future {
background-color: #77dd77;
color: white;
font-size: 30px;
text-shadow: black 2px 2px;
}
This is the portion of the HTML:
<div class="row" id="5pm">
<div class="col-md-2"><h3 id="5pmTime" class="timeOfDay">5:00pm</h3></div>
<div class="col-md-8" id="textbox-5"><Textarea class="text-box" id="box5" value=". </Textarea></div>
<div class="col-md-2"><button class="saveBtn" class="save-box" id="save5pm"><img src="assets/savebutton.png" height="45px"></button></div>
</div>