Progress of Release 0.4

As I filed the issue on the project that I picked for the final assignment. I started to work on it since I'm late on it.

Procedure

The first thing I was going to do to improve the programs was add a new Undone-All button. It's basically as its name, undoning the todoList in the program. The first step was I tried to add a need button in the main html -- index.html. And when I run the program after that, it was really funny though:

And I found that I need to add some CSS for it as well! So, I just add a new CSS. But when I run the program again after I added the new CSS, I realized I should have a same CSS format as the All-Done button that the project currently having. So, instead of adding a new CSS, I just add the Undone-All button class name to the Done-All button. In this way, I will have a some button format that the original project having.

After that, I tried to work on the Edit button which is a new feature for the program. I was planning to add a Edit button for the user to edit the description of the todoList. This is the most difficult part I had for this final assignment.
At the beginning, I tried to add a new button to each todoList, which will implement in the app.js file. I followed the logic that the current program having to make the new edit button. And it turns out as the Undone-All button I made before, it's in a pretty ugly format. Also, I didn't include the fa class that the program using, which make the edit button looks so weird. Therefore, I use google and the stylesheet link that the program provided to update my initial Edit button. Finally, I decided to make the button with a pencil symbol to inform the user that this will be a edit button. Also, I added some CSS to make it look nicer. And here is the final look of my new edit button:

When I finished the outlook of the Edit button, I started to add a function for it. Honestly, I was planning to make the todoList to be editable. But the reality is, I can't find to a way to do that because it's inside a <li>. So I tried to enable the edit button in a different way, which is using the prompt() function. The prompt()function allows the user to input a new text as an update for the old todoList.

And the next thing I found out was all of those functions for the todoList buttons are in a same function scope, which is not a good practice. Thus, I divided the origin function for the todoList buttons into 3 different functions:

After some personal testing for the edit button, I found a new problem which related to the date time that the origin program having. The date time format that the program using was a dynamic format, if the current date time is "2021-5-12 00:00:08", then the program will display the time as "2021/5/12 0:0:8". Although this is not wrong, it will be better if we can have a specific date time format such as "YYYY/MM/DD HH:MM:SS". So, if the current date time is "2021-5-12 00:00:08", this time it will display "2021/05/12 00:00:08". On one hand, it will be better to have a same date time format for the user. On the other hand, it can provide a good format to the programmer to catch date time string. Therefore, I updated the date time function to :

function now() {
  let today = new Date();
  var year = today.getFullYear();
  var month = (today.getMonth() + 1);
  var dateTime = today.getDate();

  var date = year;
  date += ((month < 10) ? '/0' : "/") + month;
  date += ((date < 10) ? '/0' : "/") + dateTime;

  var hour = today.getHours();
  var minute = today.getMinutes();
  var second = today.getSeconds();

  var time = ((hour < 10) ? '0' : '') + hour;
    if (hour == 0)
      time = '00';
  time += ((minute < 10) ? ':0' : ':') + minute;
  time += ((second < 10) ? ':0' : ':') + second;
  return `${date}\n${time}`;
}

After adding the new buttons, I had an easy improvement for this program, which is adding a simple footer.
It's a simple step which only required a few lines of code in the index.html.

Finally, I moved on to fix the issue that when the user change the display mode to dark mode, it will automatically change back to the light mode when the user refresh the page. Not only the user refresh the page would cause that issue, but also when the user click on the Done-All button or the Undone-All button, it will use the confirm() function which also will refresh the page and change the display mode from dark mode to light mode automatically even thought that's not what the user looking for. In order to fix this issue, I need to find some information from the Internet, because it has been a long time that I never worked on dark/light mode toggle. Also, I even watched some videos from Youtube to help me figure out the issue. I spent times to learn, to practice and to fulfill it. And finally, I solved the problem by adding these lines of code:

When I wrapped up the project, I found another new issue, which is when the user click on the Clear button, the same situation of change the display mode back to light mode happens again. So I go into the Clear function.

In this function, we are going to clear all the information or data that saved into the localStorage, which including the display mode data. As I mentioned above, this is not a good practice. Therefore, I need to update this function as well even though I didn't have this move in my plan. After a few times of research, I learned that the localStorage.clear() is deleting all the data saved in the localStorage. But the goal for this button or this function is to delete all the saved todoList. So, I decided to update the function to like this:

In this way, the Clear button will only delete all the saved todoList, and it will keep the same display mode that they user currently using.

Link to the PR I made : [PR#42]