Step 8

Take a moment and read through the code below; feel free to create a play-ground (click on play button) and experiment with it. I expect that you understand the code (since you've done programming in Java/C++).

let now = Date.now();
let minute = 60 * 1000; // milliseconds

let hours = "";
now += 14 * minute; // fall sleep
// compute sleep cycles
for (let c = 1; c <= 6; c++) {
    now += 90 * minute;
    let cycle = new Date(now);
    hours += cycle.toLocaleTimeString();
    if (c < 6) {
        hours += " or ";
    }
}

console.log(hours);

We need to plug this code into the <script> element:

<script>
function handleOnClickEvent() {
    let output = document.querySelector('.output');
    output.style.display = 'block';

    let now = Date.now();
    let minute = 60 * 1000; // miliseconds

    let hours = "";
    now += 14 * minute; // fall sleep
    // compute sleep cycles
    for (let c = 1; c <= 6; c++) {
        now += 90 * minute;
        let cycle = new Date(now);
        hours += cycle.toLocaleTimeString();
        if (c < 6) {
            hours += " or ";
        }
    }

    let hoursElm = document.getElementById('hours');
    hoursElm.innerText = hours;
}
</script>

• Save the index.html file; refresh the index page in the browser. You must now have a working application.