To-do List

Video Demo: https://youtu.be/c9bf1mKiRQs?si=VZUI3msRsMQ9CAPB

Description: I created a to-do list website that uses HTML, CSS, and JavaScript. The application allows you to create tasks, cross them off, uncross them off, and delete them. The tasks are saved to your browser if you refresh the page. Although it is a pretty simple concept of an application, I still learnt more JavaScript and became more comfortable with new syntax. As well, I dove deeper in CSS and found new resources that I can use in the future.

In my HTML file, I made the choice of leaving out my JavaScript and linking it to its own file. I knew all of the commands of the task buttons would be run through JS, and I didn't want to bulk up my HTML file too much. At first, for the list of tasks that I created, I made it in the HTML file with the "ul" and "li", but I knew that I needed to use JS for the controls. I left that in as a comment.

In my CSS file, I first set the whole page's design. Then I did a lot of research of different styles; how to round the buttons and colour codes. I found images online as png files to add. I had to figure out how to change the colour of sections when they are hovered over as well. I picked a light gradient of greens for the background, because I didn't want anything too distracting from the main task.

For the JavaScript file, I did a lot of research on buttons and found a lot of great tutorials on youtube. I liked being able to check and uncheck the boxes. I didn't want to have the tasks disappear once they were checked incase it was a mistake made by the user. So I added the 'x' button to delete the tasks only by control of the user. As well, if there is no input into the container/box a message pops up to the user telling them to write something. Although it wasn't necessary, I think the pop-up is a nice additional feature.

I had to research how to save data to a local server using JavaScript and how to display the data whenever I open the website. Which was a good skill to learn and suprisingly easy. I also researched how to use Git and GitHub, and how to push code. This was the part I struggled with the most, but I feel that I learnt a lot and gained more confidence in using GitHub. I think in the furture, once I develop more skills and feel more confident, I would create a page similar to what I have made. But I would add other components for studying or working, like a timer or a points system implemented, where users can collect points for each task they complete.