assets/js/script.js
//function to create the display of the work day planner
function to create the display of the work day planner
function to create the display of the work day planner
function createRow() {
  timeBlk.forEach(function (tm) {
    var contRow = $("<form>").addClass("row time-block");
    var hourly = $("<div>").addClass("col-2 hour");
    if (tm.milTime < 12) {
      hourly.text(tm.time + "am");
    } else {
      hourly.text(tm.time + "pm");
    }
    var task = $("<textarea>").addClass("col-8 description p-0");
    task.attr("name", tm.time);
    var prevTask = localStorage.getItem(tm.time);
    if (prevTask != null) {
      task.text(prevTask);
    } else {
      task.text("");
    }
    task.keyup(function (e) {
      if (e.keyCode == 13 || e.keyCode == 8 || e.keyCode == 16) {
        e.preventDefault();
        return false;
      }
      task.text(e.key);
    });
    var save = $("<button type = 'submit' >Save</button>").addClass(
      "col-2 saveBtn"
    );
    contRow.on("submit", function (e) {
      e.preventDefault();
      var todo = task.val();
      localStorage.setItem(tm.time, todo);
    });
    containerEl.append(contRow);
    contRow.append(hourly, task, save);
    var hourNow = moment().format("H");
    if (tm.milTime < hourNow) {
      task.addClass("past");
    } else if (tm.milTime > hourNow) {
      task.addClass("future");
    } else {
      task.addClass("present");
    }
  });
}
function createRow ( ) { timeBlk . forEach ( function ( tm ) { var contRow = $ ( "<form>" ) . addClass ( "row time-block" ) ; var hourly = $ ( "<div>" ) . addClass ( "col-2 hour" ) ; if ( tm . milTime < 12 ) { hourly . text ( tm . time + "am" ) ; } else { hourly . text ( tm . time + "pm" ) ; } var task = $ ( "<textarea>" ) . addClass ( "col-8 description p-0" ) ; task . attr ( "name" , tm . time ) ; var prevTask = localStorage . getItem ( tm . time ) ; if ( prevTask != null ) { task . text ( prevTask ) ; } else { task . text ( "" ) ; } task . keyup ( function ( e ) { if ( e . keyCode == 13 || e . keyCode == 8 || e . keyCode == 16 ) { e . preventDefault ( ) ; return false ; } task . text ( e . key ) ; } ) ; var save = $ ( "<button type = 'submit' >Save</button>" ) . addClass ( "col-2 saveBtn" ) ; contRow . on ( "submit" , function ( e ) { e . preventDefault ( ) ; var todo = task . val ( ) ; localStorage . setItem ( tm . time , todo ) ; } ) ; containerEl . append ( contRow ) ; contRow . append ( hourly , task , save ) ; var hourNow = moment ( ) . format ( "H" ) ; if ( tm . milTime < hourNow ) { task . addClass ( "past" ) ; } else if ( tm . milTime > hourNow ) { task . addClass ( "future" ) ; } else { task . addClass ( "present" ) ; } } ) ; }
function to create the display of the work day planner
function to create the display of the work day planner
//for each loop takes in the array of objects and creates rows with children elements and adds classes to them // creates the rows with form element and adds te row class from bootstrap and my style.css //creates the 1st column in each row and sets them to 1/6 of the container, adds class hour, and adds am and pm to relative hours based on military time // creates the todo column that takes up 2/3 of the container and adds the description class as well as bootstrap 0 padding class // adds a name attribute of the time block so each row can be targeted by functions based on the hour //sets tasks that have been already stored locally to variable //if text is empty val() returns null, so if not null it adds the locally stored task to textarea element // keyboard event for the textarea, if enter, shift, backspace is pressed they're not logged, otherwise it is added to the text of textarea element //creates third col 1/6 of the container as button element with submit type because its in a form with class saveBtn //on submit event to set the current value(text) in textarea to local storage with the key as the hour block // adds the rows to the element with container class // adds the columns to the time block row // variable for current hour in military time // conditional to compare current hour and hour block, then add background color class appropriately