script.js

// ````// Wrap all code that interacts with the DOM in a call to jQuery to ensure that
// the code isn't run until the browser has finished rendering all the elements
// in the html.
$(function () {
  // TODO: Add a listener for click events on the save button. This code should
  // use the id in the containing time-block as a key to save the user input in
  // local storage. HINT: What does `this` reference in the click listener
  // function? How can DOM traversal be used to get the "hour-x" id of the
  // time-block containing the button that was clicked? How might the id be
  // useful when saving the description in local storage?

  
  $('.saveBtn').on('click', function() {
    let description =  $(this).prev().val()
    let hour = $(this).parent().attr("id").substring(5)
    localStorage.setItem(hour, description)
  })

  //
  // TODO: Add code to apply the past, present, or future class to each time
  // block by comparing the id to the current hour. HINTS: How can the id
  // attribute of each time-block be used to conditionally add or remove the
  // past, present, and future classes? How can Day.js be used to get the
  // current hour in 24-hour time?

function updateTimeBlocks() {
  const currentHour = dayjs().hour();
    $(".time-block").each(function() {
      let blockHour = Number($(this).attr("id").substring(5))
      if(blockHour < currentHour) {
        $(this).addClass("past");
        $(this).removeClass("present");
        $(this).removeClass("future");
      }
      else if(blockHour == currentHour) {
        $(this).addClass("present");
        $(this).removeClass("past");
        $(this).removeClass("future");
      }
      else{
        $(this).addClass("future");
        $(this).removeClass("present");
        $(this).removeClass("past");
      }
    })
}
updateTimeBlocks();
setInterval(updateTimeBlocks, 60000);

  //
  // TODO: Add code to get any user input that was saved in localStorage and set
  // the values of the corresponding textarea elements. HINT: How can the id
  // attribute of each time-block be used to do this?
  //

for(let i = 9; i <= 17; i++) {
  $("#hour-" + i + " .description").val(localStorage.getItem(i))
}

  // TODO: Add code to display the current date in the header of the page. 
var reformatDate = dayjs().format('dddd, MMMM D, YYYY');
$('#currentDay').text(reformatDate); 

});