Run code only during specified period of time

Question

The idea behind these code is to make a watchman that will look for the following two scenarious:

1. If the the colorChanged was manually enabled before the schedule should began and the time of schedule is over turn off the colorChange.

2. Turn on the colorChange when the time of schedule is ready.

I did made the code to check for states and change classes, but can't figure out how to make timing function, can you please suggest what can be done in order to achieve that?

 $('.auto-control').click(function(){ $(this).toggleClass('auto-enabled'); $('.target').toggleClass('colorChanged'); }); $('.manual-control').click(function(){ $(this).toggleClass('manual-enabled'); $('.target').toggleClass('colorChanged'); console.log(1) }); setInterval(function() { // 24h format // Scenario 1, currentTime isn't within the schedule and the filter should be turned Off // var currentTime = 14; // Scenario 2, currentTime is within the schedule and the filter should be turned On var currentTime = 16 var startTime = 14; var endTime = 4; // Scenario 1. colorChanged is On if ($('.target').hasClass('colorChanged')) { // Control enabled = True if ($('.auto-control').hasClass('auto-enabled')) { // Current Time is not within the Schedule if (!startTime <= currentTime || !currentTime < endTime) { console.log('time to turn off') $('.target').toggleClass('colorChanged'); $('.manual-control').removeClass('manual-enabled'); } } // Scenario 2. colorChanged is Off } else { // Control enabled = True if ($('.auto-control').hasClass('auto-enabled')) { // Current time is within the Schedule if (startTime <= currentTime || currentTime < endTime) { console.log('time to turn on') $('.target').toggleClass('colorChanged'); } } } }, 1000) 

 .target { width: 50px; height: 50px; background-color: red; } .colorChanged { background-color: green; } button { color: red; } .auto-enabled { color: green; } .manual-enabled { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class='target'>&nbsp</div> <button class='auto-control'>Auto-control</button> <button class='manual-control'>Manual-control</button> 

Answer 1

I think your main issue is using the ! In front of startTime and currentTime. It will convert them to a Boolean ( true or false) and not work with the times at all.
You should negate the check like so:

if (!(startTime <= currentTime || currentTime < endTime)) {