Working at Tommy’s desk is decent. I’m on my laptop, hooked to his monitor, keyboard, and mouse. I downloaded Chrome cause the FreeCodeCamp website is too buggy on Safari. The website is working so much better now. Even WordPress, the app I use to write, works better now. It seems that WordPress works better on Apple. I don’t know why. Coding today was all right. There are a few things that were frustrating me. Sometimes, the wording of the problem could be more precise to understand better what I need to do. However, I have always needed help with word problems. Comprehension has never been my strong point.
Tommy and I cleaned the garage and worked on his truck last weekend. We got a lot done, and the garage looks a lot better. If we can keep it that way, that’s usually always the case. We clean it, and it becomes a catch-all.
We are almost done with the first Final Fantasy VII game and then onto the next part of the game. Since I follow Final Fantasy on Facebook, I have been avoiding spoilers to the story. But the consensus has been that the devs have listened to their audience on the next game. It’s been a mostly positive outcome. So, I’m excited to continue the story.
I had therapy yesterday. We talked about boundaries and me setting them. Since I hardly ever say no or disagree with someone, I will try to do just that. To say no or disagree with someone. That will be hard. Even if I don’t agree with someone, I may be optimistic about it because I never want to upset someone. I’ve been trained to please and need to start setting boundaries. We also talked about how trauma affects the memory. Trauma will block specific memories and details of my life. I know something happened, but I may only remember a little. I will see colors or feel different emotions, but I can’t tell you much about the memory. My memory could be better. Sometimes, I can see a place I’ve been to before and not recognize it. Then, I will realize where I’m at after a few moments. Sometimes, when I’m driving, my brain will interject another picture. Say I am driving home; my brain will see an intersection, and I will see an intersection in another state and momentarily forget how to get home. I turn the corner and remember how to get home, but I don’t particularly appreciate how my mind interjects pictures. It will do it when I’m at home, and suddenly, I will see the walls of my old house as if I’m there. Or I can be somewhere and suddenly see someone or something disturbing from my past. But I have to write so much down to remember what I need to do or remember things in general.
Lexi called. She said she has been looking at her classes and thinks she may be able to graduate in December. Lex wants to talk to a counselor first cause she said she only has a few classes left. She plans to take a year off and then go to grad school.
I called the audiologist today. First, the ENT doctor’s assistant called to cancel my ENT appointment cause they don’t have any audiology services at the hospital. And I need to have an audiology test before my ENT appointment. So they referred me. This is cool, but my insurance doesn’t cover audiology tests so that the test will cost $80. It seems alright, but Costco does it for free. I want to call back my ENT doctor tomorrow and discuss if I can get the test done in Costco instead and then have my ENT appointment. All they want is that piece of paper that shows I’m deaf, and they will be happy. I hope it doesn’t matter where I get the test done.
I hope I will be able to get some hearing aids sometime. It’s frustrating not being able to hear well.
I finally am signed into Facebook on my laptop. I heard Facebook and Instagram were having problems earlier. Probably why nothing in my feed was showing up.
JavaScript notes…
——————————-
ToDo App steps 26 – 46
Step 26
Remove the existing code toggling the class of hidden on taskForm and call the reset function instead. This would clear the input fields and also hide the form modal for the user to see the added task.
reset();
Step 27
Also, remove the existing code toggling the class hidden on taskForm inside the discardBtn event listener and call the reset function instead. That’s because when you click the Discard button, everything in the input fields should go away.
discardBtn.addEventListener("click", () => {
confirmCloseDialog.close();
reset();
});
Step 28
You should display the Cancel and Discard buttons to the user only if there is some text present in the input fields.
To begin, within the closeTaskFormBtn event listener, create a formInputsContainValues variable to check if there is a value in the titleInput field or the dateInput field or the descriptionInput field.
closeTaskFormBtn.addEventListener("click", () => {
confirmCloseDialog.showModal();
const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value;
});
Step 29
Create an if statement to check if formInputsContainValues is true. If formInputsContainValues is true, indicating that there are changes, use the showModal() method on confirmCloseDialog. Otherwise, if there are no changes, call the reset() function to clear the input fields and hide the form modal.
confirmCloseDialog.showModal();
if (formInputsContainValues) {
confirmCloseDialog.showModal();
} else {
reset();
}
Step 30
You can enhance code readability and maintainability by refactoring the submit event listener into two separate functions. The first function can be used to add the input values to taskData, while the second function can be responsible for adding the tasks to the DOM.
Use arrow syntax to create an addOrUpdateTask function. Then move the dataArrIndex variable, the taskObj object, and the if statement into the addOrUpdateTask function.
const addOrUpdateTask = () => {
const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id);
const taskObj = {
id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`,
title: titleInput.value,
date: dateInput.value,
description: descriptionInput.value,
};
if (dataArrIndex === -1) {
taskData.unshift(taskObj);
}
};
Step 31
Use arrow syntax to create an updateTaskContainer function. Then move the taskData.forEach() and its content into it.
const updateTaskContainer = () => {
taskData.forEach(
({ id, title, date, description }) => {
(tasksContainer.innerHTML += `
Title: ${title}
Date: ${date}
Description: ${description}
`)
}
);
}
Step 32
Inside the addOrUpdateTask function, call the updateTaskContainer and reset functions.
updateTaskContainer(); reset();
Step 33
Now remove the reset() call inside the taskForm submit event listener and call the addOrUpdateTask function instead.
addOrUpdateTask();
Step 34
There’s a problem. If you add a task, and then add another, the previous task gets duplicated. This means you need to clear out the existing contents of tasksContainer before adding a new task.
Set the innerHTML of tasksContainer back to an empty string.
tasksContainer.innerHTML = "";
Step 35
To enable editing and deleting for each task, add an onclick attribute to both buttons. Set the value of the onclick attribute to editTask(this) for the Edit button and deleteTask(this) for the Delete button. The editTask(this) function will handle editing, while the deleteTask(this) function will handle deletion.
this is a keyword that refers to the current context. In this case, this points to the element that triggers the event – the buttons.
Step 36
Create a deleteTask function using arrow syntax. Pass buttonEl as the parameter and define an empty set of curly braces for the function body.
const deleteTask = (buttonEl) => {
}
Step 37
You need to find the index of the task you want to delete first.
Create a dataArrIndex variable and set its value using the findIndex() method on the taskData array. Pass item as the parameter for the arrow callback function, and within the callback, check if the id of item is equal to the id of the parentElement of buttonEl.
const deleteTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex((item) => item.id === buttonEl.parentElement.id )
}
Step 38
You need to remove the task from the DOM using remove() and from the taskData array using splice().
splice() is an array method that modifies arrays by removing, replacing, or adding elements at a specified index, while also returning the removed elements. It can take up to three arguments: the first one is the mandatory index at which to start, the second is the number of items to remove, and the third is an optional replacement element. Here’s an example:
const fruits = [“mango”, “date”, “cherry”, “banana”, “apple”];
// Remove date and cherry from the array starting at index 1
const removedFruits = fruits.splice(1, 2);
console.log(fruits); // [ ‘mango’, ‘banana’, ‘apple’ ]
console.log(removedFruits); // [ ‘date’, ‘cherry’ ]
Use the remove() method to remove the parentElement of the buttonEl from the DOM. Then use splice() to remove the task from the taskData array. Pass in dataArrIndex and 1 as the arguments of your splice().
dataArrIndex is the index to start and 1 is the number of items to remove.
const deleteTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex(
(item) => item.id === buttonEl.parentElement.id
);
buttonEl.parentElement.remove();
taskData.splice(dataArrIndex, 1);
}
Step 39
Use arrow syntax to create an editTask function. Pass in buttonEl as the parameter and add empty curly braces for the body.
const editTask = (buttonEl) => {
}
Step 40
As you did in the deleteTask function, you need to find the index of the task to be edited.
Create a dataArrIndex variable. For its value, utilize the findIndex() method on taskData. Pass item as the parameter to its callback function and check if the id of item is equal to the id of the parentElement of buttonEl.
const editTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex((item) => item.id === buttonEl.parentElement.id )
}
Step 41
Use square bracket notation to retrieve the task to be edited from the taskData array using the dataArrIndex. Then, assign it to the currentTask object to keep track of it.
const editTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex((item) => item.id === buttonEl.parentElement.id);
currentTask = taskData[dataArrIndex];
}
Step 42
The task to be edited is now in the currentTask object. Stage it for editing inside the input fields by setting the value of titleInput to currentTask.title, dateInput to currentTask.date, and descriptionInput to currentTask.description.
const editTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex(
(item) => item.id === buttonEl.parentElement.id
);
currentTask = taskData[dataArrIndex];
titleInput.value = currentTask.title;
dateInput.value = currentTask.date;
descriptionInput.value = currentTask.description;
}
Step 43
Set the innerText of the addOrUpdateTaskBtn button to Update Task.
const editTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex(
(item) => item.id === buttonEl.parentElement.id
);
currentTask = taskData[dataArrIndex];
titleInput.value = currentTask.title;
dateInput.value = currentTask.date;
descriptionInput.value = currentTask.description;
addOrUpdateTaskBtn.innerText = "Update Task";
}
Step 44
Finally, display the form modal with the values of the input fields by using classList to toggle the hidden class on taskForm.
const editTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex(
(item) => item.id === buttonEl.parentElement.id
);
currentTask = taskData[dataArrIndex];
titleInput.value = currentTask.title;
dateInput.value = currentTask.date;
descriptionInput.value = currentTask.description;
addOrUpdateTaskBtn.innerText = "Update Task";
taskForm.classList.toggle("hidden");
}
Step 45
At this point, editing a task won’t reflect when you submit the task. To make the editing functional, go back to the if statement inside the addOrUpdateTask function. Create an else block and set taskData[dataArrIndex] to taskObj.
if (dataArrIndex === -1) {
taskData.unshift(taskObj);
} else {
taskData[dataArrIndex] = taskObj;
}
Step 46
If you try to add a new task, edit that task, and then click on the Add New Task button, you will notice a bug.
The form button will display the incorrect text of Update Task instead of Add Task. To fix this, you will need to assign the string Add Task to addOrUpdateTaskBtn.innerText inside your addOrUpdateTask function.
addOrUpdateTaskBtn.innerText = "Add Task";
