Progress of Release 0.4
Tags: opensource, github, html, javascript
Published: 2021-12-16 18:12:28

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:
![undone_button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9630hhqlptdwds3a5zk.jpg)
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.
![CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nep5o0qhrbnqaucnbmc1.jpg)

__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:
![edit_button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1j7v96s83cz8n9ouwwq.jpg)
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.
![prompt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lduq87880xxwhkljibz.jpg)
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:
![functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xj7zlxiihiqzlm1d4ao.jpg)
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:
![dark/light_toggle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdmjbr5ti3grpcz981ey.jpg)

__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. 
![clear_function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0hnj1uqy2mcz3lsaax7.jpg)
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:
![new_clear_function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h3d4c0tokrhdz8e5lkn.jpg)
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](https://github.com/nirajacharyaa/todo-app/pull/42)]