setting localStorage for multiple items

Question

I am having trouble setting up local storage to save the textArea input for each of the time blocks. I have commented out 3 different sections where I was playing with different techniques to try and make it work. However, I was not able to set it to save the text in local storage and get it so that it stay on the page when you revisit it. Please let me know if you can help me with a solution to fix it. I have provided a link to my repository. please look at the feature/calendar branch because that is where my code resides. I also snippet the code into here for you to look at. I am new to coding so please be patient with me. I am still learning the terminology and different ways to reach the objective/goal.

saveBtn = document.getElementsByClassName('saveBtn');

//  creates a new instance for time and date.
const currentDay = luxon.DateTime.now().toLocaleString(luxon.DateTime.DATETIME_MED);
//  format's the date and time.
var newFormat = {
    //  The selected date format from luxon documentation.
    ...luxon.DateTime.DATETIME_MED,
    //  added the day of the week.
    weekday: 'long'
};

// creates a new instance for time and date.
const newCurrentDay = luxon.DateTime.now().toLocaleString(newFormat);
//  checks if time works.


//  creates a new instance to parse the date and time into the header html.
var ol = document.querySelector('header');
//  creates the ol element.
const list = document.createElement('ol');
//  styles the  element.
list.setAttribute('style', 'color: white; background-color: black; display: flex; flex-direction: column; justify-content: center; align-items: center;');
//  displays newCurrentDay variable in the header as readable text.
list.innerText = newCurrentDay;
//  appends the newCurrentDay variable to the ol element.
ol.appendChild(list);

//  creates an array to change the blocks bases on their time in the text area element.
const timeBlocks = Array.from(document.getElementsByClassName('description'));
// assigning timeBlocks based on time.
for (var i = 0; i < timeBlocks.length; i++) {
    //  gets the current hour to connect the color changing feature in the text area element based on the 24hr format.
    const now = luxon.DateTime.now().hour.toLocaleString();
    //  if statement's to change the color of the blocks based on time using the 24hr time format.
    if (timeBlocks[i].id < now) {
        timeBlocks[i].classList.add('past');
    }
    if (timeBlocks[i].id > now) {
        timeBlocks[i].classList.add('future');
    }
    if (timeBlocks[i].id === now) {
        timeBlocks[i].classList.add('present');
    }
}


// // * testing
// saveBtn = document.getElementsByClassName('saveBtn');

// var save = addEventListener('click', function () {
//     //  creates a new instance to parse the date and time into the header html. 
//     var textarea = document.querySelector('textarea');

//     this.window.localStorage.setItem('textarea', textarea.value);

//     this.window.localStorage.getItem('textarea');
// });




//  TODO: can  use save button for event text to persist even when refreshed.

// $('.saveBtn').on("click", function () {
//     window.localStorage.setItem('task', $(this).siblings('.description').val());
// })

// loadTask = function () {
//     return window.localStorage.getItem('task');
// }


// let taskArray = [{
//     21: "",
//     22: "",
//     23: "",
// }];

// $('.saveBtn').on("click", function () {
//     window.localStorage.setItem('tasks', JSON.stringify(taskArray));

//     JSON.parse(window.localStorage.getItem('tasks'));

// var storedData = window.localStorage.getItem(taskArray);

// if (storedData) {
//     taskArray = JSON.parse(storedData);
//     alert(taskArray);
// }
// });


// TODO:  event is saved into time block using local storage


// TODO:  have my minutes actively change.

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





  
  
  
  
  
  
  
  Work Day Scheduler



  
    Work Day Scheduler
    A simple calendar app for scheduling your work day
    
  
  
    
    
      
        9:00PM
      
      Event
      
    
    
      
        10:00PM
      
      Event
      
    
    
      
        11:00PM
      
      Event
      
    
    
      
        12:00AM
      
      Event

setting localStorage for multiple items

Answers (1)

Related Questions