Vfrdtyky

Wrote a simple little app to check what period it is a display it with Javascript. Works great for the most part - but at certain times it will display the next period instead of the current one.

1. How do I test it without waiting and manually checking?


2. I'd obviously like to figure out why it displays the wrong period

Edit: If the time is 15:06 (3:06PM) it will display the last else statement instead of the second to last one

Code:

var now = '';



//Set Periods

//Slot 1+2 are periods - slots 3+4 are passing times inbetween periods

var periods = [

  ['Before School', 5.00, 7.59],

  ['First', 8.00, 8.49, 8.50, 8.54],

  ['Second', 8.55, 9.44, 9.45, 9.49],

  ['Third', 9.50, 10.39, 10.40, 10.44],

  ['Fourth', 10.45, 11.34, 11.35, 11.39],

  ['Fifth', 11.40, 12.29, 12.30, 12.34],

  ['Sixth', 12.35, 13.24, 13.25, 13.29],

  ['Seventh', 13.30, 14.19, 14.20, 14.24],

  ['Eighth', 14.25, 15.15]

];



//Display Period

function displayPeriod() {

  if (now >= periods[0][1] && now <= periods[0][2]) {

    document.getElementById('period').innerHTML = ('School has not started yet');

  } else if (now >= periods[1][1] && now <= periods[1][2]) {

    document.getElementById('period').innerHTML = ('1st');

  } else if (now >= periods[1][3] && now <= periods[1][4]) {

    document.getElementById('period').innerHTML = ('1st Passing');

  } else if (now >= periods[2][1] && now <= periods[2][2]) {

    document.getElementById('period').innerHTML = ('2nd');

  } else if (now >= periods[2][3] && now <= periods[2][4]) {

    document.getElementById('period').innerHTML = ('2nd Passing');

  } else if (now > periods[3][1] && now <= periods[3][2]) {

    document.getElementById('period').innerHTML = ('3rd');

  } else if (now >= periods[3][3] && now <= periods[3][4]) {

    document.getElementById('period').innerHTML = ('3rd Passing');

  } else if (now >= periods[4][1] && now <= periods[4][2]) {

    document.getElementById('period').innerHTML = ('4th');

  } else if (now >= periods[4][3] && now <= periods[4][4]) {

    document.getElementById('period').innerHTML = ('4th Passing');

  } else if (now >= periods[5][1] && now <= periods[5][2]) {

    document.getElementById('period').innerHTML = ('5th');

  } else if (now >= periods[5][3] && now <= periods[5][4]) {

    document.getElementById('period').innerHTML = ('5th Passing');

  } else if (now >= periods[6][1] && now <= periods[6][2]) {

    document.getElementById('period').innerHTML = ('6th');

  } else if (now >= periods[6][3] && now <= periods[6][4]) {

    document.getElementById('period').innerHTML = ('6th Passing');

  } else if (now >= periods[7][1] && now <= periods[7][2]) {

    document.getElementById('period').innerHTML = ('7th');

  } else if (now >= periods[7][3] && now <= periods[7][4]) {

    document.getElementById('period').innerHTML = ('7th Passing');

  } else if (now >= periods[8][1] && now <= periods[8][2]) {

    document.getElementById('period').innerHTML = ('8th');

  } else {

    document.getElementById('period').innerHTML = ('School is done for the day.');

  }

}





//Check Time

function startTime() {

  var today = new Date();

  now = today.getHours() + '.' + today.getMinutes();

  var h = today.getHours();

  var m = today.getMinutes();

  var s = today.getSeconds();

  m = checkTime(m);

  s = checkTime(s);



  displayPeriod();



  var t = setTimeout(startTime, 500);

}



function checkTime(i) {

  if (i < 10) {

    i = '0' + i

  }; // add zero in front of numbers < 10

  return i;

}

You can test the function by inputting the current time through startTime() function. You can comment out the setTimeout if you only want to test a specific function. You can check that the output for 15.06 is correct too.

var now = '';



//Set Periods

//Slot 1+2 are periods - slots 3+4 are passing times inbetween periods

var periods = [

  ['Before School', 5.00, 7.59],

  ['First', 8.00, 8.49, 8.50, 8.54],

  ['Second', 8.55, 9.44, 9.45, 9.49],

  ['Third', 9.50, 10.39, 10.40, 10.44],

  ['Fourth', 10.45, 11.34, 11.35, 11.39],

  ['Fifth', 11.40, 12.29, 12.30, 12.34],

  ['Sixth', 12.35, 13.24, 13.25, 13.29],

  ['Seventh', 13.30, 14.19, 14.20, 14.24],

  ['Eighth', 14.25, 15.15]

];



//Display Period

function displayPeriod() {

  console.log(now)

  if (now >= periods[0][1] && now <= periods[0][2]) {

    console.log('School has not started yet');

  } else if (now >= periods[1][1] && now <= periods[1][2]) {

    console.log('1st');

  } else if (now >= periods[1][3] && now <= periods[1][4]) {

    console.log('1st Passing');

  } else if (now >= periods[2][1] && now <= periods[2][2]) {

    console.log('2nd');

  } else if (now >= periods[2][3] && now <= periods[2][4]) {

    console.log('2nd Passing');

  } else if (now > periods[3][1] && now <= periods[3][2]) {

    console.log('3rd');

  } else if (now >= periods[3][3] && now <= periods[3][4]) {

    console.log('3rd Passing');

  } else if (now >= periods[4][1] && now <= periods[4][2]) {

    console.log('4th');

  } else if (now >= periods[4][3] && now <= periods[4][4]) {

    console.log('4th Passing');

  } else if (now >= periods[5][1] && now <= periods[5][2]) {

    console.log('5th');

  } else if (now >= periods[5][3] && now <= periods[5][4]) {

    console.log('5th Passing');

  } else if (now >= periods[6][1] && now <= periods[6][2]) {

    console.log('6th');

  } else if (now >= periods[6][3] && now <= periods[6][4]) {

    console.log('6th Passing');

  } else if (now >= periods[7][1] && now <= periods[7][2]) {

    console.log('7th');

  } else if (now >= periods[7][3] && now <= periods[7][4]) {

    console.log('7th Passing');

  } else if (now >= periods[8][1] && now <= periods[8][2]) {

    console.log('8th');

  } else {

    console.log('School is done for the day.');

  }

}





//Check Time

function startTime(hours, minutes, seconds) {

    var today = new Date();

    var h = hours != null ? hours : today.getHours(); // use current time if input is empty

    var m = minutes != null ? minutes : today.getMinutes(); // use current time if input is empty

    var s = seconds != null ? seconds : today.getSeconds(); // use current time if input is empty

    m = checkTime(m);

    s = checkTime(s);

    now = h + '.' + m; // move it here to correspond with input



    displayPeriod();



    // var t = setTimeout(startTime, 500);

}



function checkTime(i) {

  if (i < 10) {

    i = '0' + i

  }; // add zero in front of numbers < 10

  return i;

}



startTime();

startTime(15, 6, 0);

You should check time (add zero in front of numbers < 10) before set now variable

function startTime() {

  var today = new Date();

  var h = checkTime(today.getHours());

  var m = checkTime(today.getMinutes());



  now = h + '.' + m;

  displayPeriod();



  var t = setTimeout(startTime, 500);

}

Where your problem is:

Your startTime function is setting now like this:

now = today.getHours() + '.' + today.getMinutes();

It's then calculating zero-padded hour and minute values, but these are not used!

So, instead of representing nine minutes past eight as "9.08", it is using "9.8".

How to test your code

You probably want to learn about unit testing, but that is too big a topic to go over here.

Some of the prinicpals of writing testable code can be applied here, though.

First, separate logic from updating UI (or DOM), by refactoring your DisplayPeriod function to return a string value instead of modifying the DOM:

function displayPeriod() {

  if (now >= periods[0][1] && now <= periods[0][2]) {

    return 'School has not started yet';

  } else if (now >= periods[1][1] && now <= periods[1][2]) {

    return '1st';

  } else if (now >= periods[1][3] && now <= periods[1][4]) {

    return '1st Passing';

  } else if (now >= periods[2][1] && now <= periods[2][2]) {

    return '2nd';



  // (Snip)



  } else {

    return 'School is done for the day.';

  }

}

This method would then be used by another method which updates the DOM.

Second, allow for injection of dependencies. E.g. You have an implicit dependency on the system clock via the Date() constructor. If you refactor StartTime to accept a date, then your test code can pass in whichever date values it needs to test different cases:

// Note that bugs in this method have not been fixed!

function startTime(today) {

  now = today.getHours() + '.' + today.getMinutes();

  var h = today.getHours();

  var m = today.getMinutes();

  var s = today.getSeconds();

  m = checkTime(m);

  s = checkTime(s);



  // Commented out, as interfers with testing (should be moved to DOM setting method).

  // var t = setTimeout(startTime, 500);

}

Third, use a test framework to run various scenarios and check expected and actual results. Here's a poor man's test case and test execution script:

function TestCase(time, expectedResult) {

  startTime(time)

  var result = displayPeriod();

  if (result == expectedResult) {

    console.log("Passed for " + time)

  } else {

    console.log("Failed for " + time + "(" + result + ")");

  }

}



for (minute = 0; minute < 50; minute++) {

  time = new Date(2018, 11, 14, 8, minute);

  TestCase(time, "1st");

}