workday scheduler v.2

HTML

<!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 rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"/>
    <link rel="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <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 f-flex flex-column">
      <!-- hour blocks -->
      <div class="d-flex flex-row row">
        <div id="9" class="time-block d-flex w-100">
          <h4 class="hour">9AM</h4>
          <ul id="list-9AM" class="event-list d-flex flex-column"></ul>
          <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
          <button class = "saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
        </div>
      </div>
      <div class="d-flex fle√x-row row">
        <div id="10" class="time-block d-flex w-100 h-100">
          <h4 class="hour">10AM</h4>
          <ul id="list-10AM" class="event-list"></ul>
          <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
          <button class = "saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
       ...

CSS

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;
}

JavaScript

// jumbotron display 
var currentDay = document.getElementById("currentDay")
    currentDay.textContent = moment().format('MMMM Do YYYY, h:mm a')
  var checkTime = setInterval(() => {
    currentDay.textContent = moment().format('MMMM Do YYYY, h:mm a')
  }, (1000*60));


// setting and getting calendar events 
$(".saveBtn").click(function(event) {
  var eventHour = $(this).siblings(".hour").html()
  var eventText = $(this).siblings("input[name=event-input]").val().trim()
  $("input[name=event-input]").val("");
  var calEventObj = {
    text: eventText,
    hour: eventHour
  }
  saveCalEvent(calEventObj);
    var calEventLi = document.createElement("li")
    calEventLi.textContent = calEventObj.text
    $("#list-" + calEventObj.hour).append(calEventLi);
  });
function saveCalEvent(calEventObj) {
  var currentEvents = loadCalEvents();
  currentEvents.push(calEventObj);
  localStorage.setItem("calEventObjects", JSON.stringify(currentEvents))
}
function loadCalEvents() {
  var calEventsArr = JSON.parse(localStorage.getItem("calEventObjects"));
  if (!calEventsArr || !Array.isArray(calEventsArr)) return []
  else return calEventsArr;
}
var showCalendar = function() {
  var currentEvents = loadCalEvents();
  for (var item of currentEvents) {
    var calEventLi = document.createElement("li")
    calEventLi.textContent = item.text
    $("#list-" + item.hour).append(calEventLi);
  }
}
showCalendar();

// time block color-coded to indicate past, present, or future
var currentTime = new Date();
var currentHour = currentTime.getHours();

var auditTime = function() {
  for (var block of $(".time-block")) {
    blockHour = parseInt(block.getAttribute("id"));
    console.log(blockHour == currentHour);
    if (blockHour == currentHour) {
      $(block).addClass("present")
    } else if (blockHour < currentHour) {
      $(block).addClass("past")
    }
    else {
      $(block).addClass("future")
    }
  }
}
auditTime()