I am trying to change the background color based on if the current hour is past, present, or in the future.
Use case: I am building a day planner using moment.js. Every hour has its own field, ie: 8am, 9am, 10am. If the current time is 10:15am, I want 9am to be gray, 10am to be red, and 11am - 6pm to be green.
I am able to grab the current hour by using console.log(currentTime)
I am just trying to figure out how to build the function that changes the class background color. Any help would be greatly appreciated.
//current date and time
$("#currentDay").text(moment().format('ddd, MMM Do'));
//currentTime to determine if the hour matchs for color
var currentTime = moment().format('h a');
console.log(currentTime)
//todo project
// Use window.localStoirage to retreve and store your data object as string
const LS = JSON.parse(localStorage.scheduler || '{}'); // now an Object
// double click makes calender content editable
$(".textData").dblclick(function() {
$(this).addClass('d-none')
$(this).siblings("input").removeClass("d-none");
});
$(".btn").dblclick(function() {
console.log(this);
console.log($(this).attr("id"))
var id = $(this).attr("id")
var time = id.slice(0, 3)
console.log(time)
var timeInputId = time + "Input";
});
// save makes edit end
// set active time
// make background color of / past hours gray / current hour red / future hours green
var hourPast = hourPast < currentTime;
var hourNow = currentTime;
var hourFuture = hourFuture < currentTime;
if (currentTime == hour) {
class = red
} else if (c)
}body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
}
textarea {
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid black;
}
.description {
white-space: pre-wrap;
}
.time-block {
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;
;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border-left: 1px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #06AED5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all .3s ease-in-out;
}
.red {
background-color: red;
}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/><link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/><link
href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
rel="stylesheet"
/><link rel="stylesheet" href="style.css" /><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><title>Work Day Scheduler</title></head><body><header class="jumbotron"><h1 class="display-3">Work Day Scheduler</h1><p class="lead">A simple calendar app for scheduling your work day</p><p id="currentDay" class="lead"></p></header><div class="container"><!-- Timeblocks go here --><div class="row"><div class='col-2 hour'> 9am</div><div class="col-8 description red border-bottom scheduler"><span class="textData 9amSpan">text here </span><input id="9amInput" class="d-none border-0 form-control textarea bg-transparent am9Input" type="text" placeholder="Default input"></div><div class="col-2 saveBtn"><button type="submit" id="9amButton" class="btn btn-primary mb-2 am9Button">Save</button></div></div><div class="row"><div class='col-2 hour'> 10am</div><div class="col-8 description red border-bottom scheduler"><span class="textData 10amSpan">text here </span><input id="10amInput" class="d-none border-0 form-control textarea bg-transparent am10Input" type="text" placeholder="Default input"></div><div class="col-2 saveBtn"><button type="submit" id="10amButton" class="btn btn-primary mb-2 am10Button">Save</button></div></div><div class="row"><div class='col-2 hour'> 11am</div><div class="col-8 description red border-bottom scheduler"><span class="textData 11amSpan">text here </span><input id="11amInput" class="d-none border-0 form-control textarea bg-transparent am11Input" type="text" placeholder="Default input"></div><div class="col-2 saveBtn"><button type="submit" id="11amButton" class="btn btn-primary mb-2 am11Button">Save</button></div></div><div class="row"><div class='col-2 hour'> 12pm</div><div class="col-8 description red border-bottom scheduler"><span class="textData 12pmSpan">text here </span><input id="12pmInput" class="d-none border-0 form-control textarea bg-transparent pm12Input" type="text" placeholder="Default input"></div><div class="col-2 saveBtn"><button type="submit" id="12amButton" class="btn btn-primary mb-2 pm12Button">Save</button></div></div><div class="row"><div class='col-2 hour'> 1pm</div><div class="col-8 description red border-bottom scheduler"><span class="textData 1pmSpan">text here </span><input id="1pmInput" class="d-none border-0 form-control textarea bg-transparent pm1Input" type="text" placeholder="Default input"></div><div class="col-2 saveBtn"><button type="submit" id="1pmButton" class="btn btn-primary mb-2 pm1Button">Save</button></div></div></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script><script src="script.js"></script></body></html>