script.js

$(document).ready(function () {

    // test flag
    const test = false;

    // get times from moment
    const now = moment().format('MMMM Do YYYY');

    // commented out for test in non-standard hours
    let nowHour24 = moment().format('H');
    let nowHour12 = moment().format('h');

    // set times for testing after hours
    if (test) {
        nowHour24 = 13;
        nowHour12 = 1;
    }

    let $dateHeading = $('#navbar-subtitle');
    $dateHeading.text(now);

    // using font awesome icon https://fontawesome.com/license
    // change description here - none
    const saveIcon = "./images/save-regular.svg";

    // Get stored to dos from localStorage
    // Parsing the JSON string to an object
    let storedPlans = JSON.parse(localStorage.getItem("storedPlans"));

    if (test) { console.log(storedPlans); }

    // If plans were retrieved from localStorage, update the plan array to it
    if (storedPlans !== null) {
        planTextArr = storedPlans;
    } else {
        // this should only occur on first time the app is loaded in the browser
        // helpfully remind user that lunch is important
        planTextArr = new Array(9);
        planTextArr[4] = "Let me help plan your day";
    }

    if (test) { console.log("full array of planed text", planTextArr); }

    // set variable referencing planner element
    let $plannerDiv = $('#plannerContainer');
    // clear existing elements
    $plannerDiv.empty();

    if (test) { console.log("current time", nowHour12); }


    // build calendar by row for fix set of hours
    for (let hour = 9; hour <= 17; hour++) {
        // index for array use offset from hour
        let index = hour - 9;

        // build row components
        let $rowDiv = $('<div>');
        $rowDiv.addClass('row');
        $rowDiv.addClass('plannerRow');
        $rowDiv.attr('hour-index', hour);

        // Start building Time box portion of row
        let $col2TimeDiv = $('<div>');
        $col2TimeDiv.addClass('col-md-2');

        // create timeBox element (contains time)
        const $timeBoxSpn = $('<span>');
        // can use this to get value
        $timeBoxSpn.attr('class', 'timeBox');

        // format hours for display
        let displayHour = 0;
        let amPm = "";
        if (hour > 12) {
            displayHour = hour - 12;
            amPm = "pm";
        } else {
            displayHour = hour;
            amPm = "am";
        }

        // populate timeBox with time
        $timeBoxSpn.text(`${displayHour} ${amPm}`);

        $rowDiv.append($col2TimeDiv);
        $col2TimeDiv.append($timeBoxSpn);
        // STOP building Time box portion of row

        // START building input portion of row
        // build row components
        let $dailyPlanSpn = $('<input>');

        $dailyPlanSpn.attr('id', `input-${index}`);
        $dailyPlanSpn.attr('hour-index', index);
        $dailyPlanSpn.attr('type', 'text');
        $dailyPlanSpn.attr('class', 'dailyPlan');

        // access index from data array for hour 
        $dailyPlanSpn.val(planTextArr[index]);

        // create col to control width
        let $col9IptDiv = $('<div>');
        $col9IptDiv.addClass('col-md-9');

        // add col width and row component to row
        $rowDiv.append($col9IptDiv);
        $col9IptDiv.append($dailyPlanSpn);
        // STOP building Time box portion of row

        // START building save portion of row
        let $col1SaveDiv = $('<div>');
        $col1SaveDiv.addClass('col-md-1');

        let $saveBtn = $('<i>');
        $saveBtn.attr('id', `saveId-${index}`);
        $saveBtn.attr('save-id', index);
        $saveBtn.attr('class', "far fa-save saveIcon");

        $rowDiv.append($col1SaveDiv);
        $col1SaveDiv.append($saveBtn);

        // set row color based on time
        updateRowColor($rowDiv, hour);

        // add row to planner container
        $plannerDiv.append($rowDiv);
    };

    // function to update row color
    function updateRowColor($hourRow, hour) {

        if (test) { console.log("rowColor ", nowHour24, hour); }

        if (hour < nowHour24) {
            // $hourRow.css('')
            if (test) { console.log("lessThan"); }
            $hourRow.css("background-color", "darkGray")
        } else if (hour > nowHour24) {
            if (test) { console.log("greaterThan"); }
            $hourRow.css("background-color", "lightGreen")
        } else {
            if (test) { console.log("equal"); }
            $hourRow.css("background-color", "lightPink")
        }
    };

    $(document).on('click', 'i', function (event) {
        event.preventDefault();

        if (test) { console.log('click pta before ' + planTextArr); }

        let $index = $(this).attr('save-id');

        let inputId = '#input-' + $index;
        let $value = $(inputId).val();

        planTextArr[$index] = $value;


        if (test) { console.log('value ', $value); }
        if (test) { console.log('index ', $index); }
        if (test) { console.log('click pta after ' + planTextArr); }
// id tag for save button 
        $(`#saveId-${$index}`).removeClass('shadowPulse');
        localStorage.setItem("storedPlans", JSON.stringify(planTextArr));
    });

    $(document).on('change', 'input', function (event) {
        event.preventDefault();
        if (test) { console.log('onChange'); }
        if (test) { console.log('id', $(this).attr('hour-index')); }

        let i = $(this).attr('hour-index');

        $(`#saveId-${i}`).addClass('shadowPulse');
    });
});