I’m at the University library. Chris has to leave for Colorado during his Spring Break, so he has to drop Everest off with us. I’m helping Tommy take Everest home so she isn’t just walking around the back of his car. I brought my Kindle to read after working on the computer. And I got food today! I remembered. Well, Tommy reminded me last night to make a lunch for today.
I just remembered that I have a hair appointment on the 16th. I may have to reschedule. It depends on when we take Lexi back to school after Spring Break. That isn’t so bad. However, I am getting tired of my hair being so long. It gets in my way a lot.
There are a lot of people at the library today, and it’s distractingly crowded. The lady next to me gave me a granola bar to watch her stuff while she left for five minutes, so that was nice. This library gives me Harry Potter vibes. Well, it is noted to be the “Harry Potter” part of the library.
I feel restless. I need help focusing. I’m zoning off too much. Of course, I’m not supposed to be writing right now. I need to work on coding. Oh! Tommy sent me some money. I’m going to get a cup of coffee from Starbucks.
Ok, I have a white chocolate mocha with oat milk. Alright, back to work.
I’m done with the ToDo app project. However, the website says that I missed a lot of problems, which I know I didn’t. The website didn’t save my progress so now I need to redo much of the project to get credit. I will use this as a way to study more and try not to listen to my head cussing the website out.
The library is much quieter now.
JavaScript notes…
—————————–
Todo App steps 47 – 59
Step 47
If the user attempts to edit a task but decides not to make any changes before closing the form, there is no need to display the modal with the Cancel and Discard buttons.
Inside the closeTaskFormBtn event listener, use const to create another variable named formInputValuesUpdated. Check if the user made changes while trying to edit a task by verifying that the titleInput value is not equal to currentTask.title, or the dateInput value is not equal to currentTask.date, or the descriptionInput value is not equal to currentTask.description.
const formInputValuesUpdated = titleInput.value !== currentTask.title || dateInput.value !== currentTask.date || descriptionInput.value !== currentTask.description
Step 48
Now add formInputValuesUpdated as the second mandatory condition in the if statement using the AND operator.
This way, the Cancel and Discard buttons in the modal won’t be displayed to the user if they haven’t made any changes to the input fields while attempting to edit a task.
if (formInputsContainValues && formInputValuesUpdated) {
confirmCloseDialog.showModal();
} else {
reset();
}
Step 49
localStorage offers methods for saving, retrieving, and deleting items. The items you save can be of any JavaScript data type.
For instance, the setItem() method is used to save an item, and the getItem() method retrieves the item. To delete a specific item, you can utilize the removeItem() method, or if you want to delete all items in the storage, you can use clear().
Here’s how you can save an item:
localStorage.setItem(“key”, value); // value could be string, number, or any other data type
A myTaskArr array has been provided for you. Use the setItem() method to save it with a key of data.
After that, open your browser console and go to the Applications tab, select Local Storage, and the freeCodeCamp domain you see.
localStorage.setItem("data", myTaskArr);
Step 50
If you check the Application tab of your browser console, you’ll notice a series of [object Object]. This is because everything you save in localStorage needs to be in string format.
To resolve the issue, wrap the data you’re saving in the JSON.stringify() method. Then, check local storage again to observe the results.
localStorage.setItem("data", JSON.stringify(myTaskArr));
Step 51
Now that you have the myTaskArr array saved in localStorage correctly, you can retrieve it with getItem() by specifying the key you used to save the item.
Use the getItem() method to retrieve the myTaskArr array and assign it to the variable getTaskArr. Then, log the getTaskArr variable to the console to see the result.
const getTaskArr = localStorage.getItem("data");
console.log(getTaskArr);
Step 52
The item you retrieve is a string, as you saved it with JSON.stringify(). To view it in its original form before saving, you need to use JSON.parse().
Use getItem() to retrieve the myTaskArr array again. This time, wrap it inside JSON.parse(), assign it to the variable getTaskArrObj and log the getTaskArrObj to the console.
Check the console to see the difference between getTaskArr and getTaskObj.
const getTaskArrObj = JSON.parse(localStorage.getItem("data"));
console.log(getTaskArrObj);
Step 53
You can use localStorage.removeItem() to remove a specific item and localStorage.clear() to clear all items in the local storage.
Remove the data item from local storage and open the console to observe the result. You should see null.
localStorage.removeItem("data");
Step 54
Using localStorage.clear() won’t just delete a single item from local storage but will remove all items.
Remove localStorage.removeItem() and use localStorage.clear() instead. You don’t need to pass in anything. You should also see null in the console.
localStorage.clear();
Step 55
Remove the myTaskArr array and all of the code for localStorage because you don’t need them anymore.
localStorage.clear();
const getTaskArr = localStorage.getItem("data")
console.log(getTaskArr)
const getTaskArrObj = JSON.parse(localStorage.getItem("data"));
console.log(getTaskArrObj);
Step 56
Now you should save the task items to local storage when the user adds, updates, or removes a task.
Inside the addOrUpdateTask function, use setItem() to save the tasks with a key of data, then pass the taskData array as its argument. Ensure that you stringify the taskData.
This would persist data once the user adds or updates tasks.
localStorage.setItem("data", JSON.stringify(taskData));
Step 57
You also want a deleted task to be removed from local storage. For this, you don’t need the removeItem() or clear() methods. Since you already use splice() to remove the deleted task from taskData, all you need to do now is save taskData to local storage again.
Use setItem() to save the taskData array again. Pass in data as the key and ensure that taskData is stringified before saving.
localStorage.setItem("data", JSON.stringify(taskData));
Step 58
If you add, update, or remove a task, it should reflect in the UI. However, that’s not happening now because you have yet to retrieve the tasks. To do this, you need to modify your initial taskData to be an empty array.
Set taskData to the retrieval of data from local storage or an empty array. Make sure you parse the data coming with JSON.parse() because you saved it as a string.
const taskData = JSON.parse(localStorage.getItem("data")) || [];
Step 59
You’ve retrieved the task item(s) now, but they still don’t reflect in the UI when the page loads. However, they appear when you add a new task.
You can check if there’s a task inside taskData using the length of the array. Because 0 is a falsy value all you need for the condition is the array length.
Check if there’s a task inside taskData, then call the updateTaskContainer() inside the if statement block.
With that, you’ve completed this project.
if (taskData.length) {
updateTaskContainer()
}
