This project started 21/02/2025 and ended 24/02/2025
This was my first attempt at writing JavaScript with as little help as possible. I didn’t follow any courses or YouTube videos while creating this. I only allowed myself to use Google Search and minimal help from ChatGPT.
Here is my GitHub repository where you can find the project: GitHub repository ↗
Before this project, I only knew Python. To get started with JavaScript, I watched a 3-hour 30-minute JavaScript course from FreeCodeCamp on YouTube. After that, I watched a JavaScript DOM tutorial, also by FreeCodeCamp. About 30 minutes into the course, I thought to myself: Why not try learning by building my own app? I already knew some basics, so while it would be challenging, it wouldn’t be impossible.
Getting Started…
I began by structuring my layout and writing the HTML. Next, I created two <li> elements in my HTML to test and design the UI using CSS. I have some knowledge of SASS, but since I wanted to focus on JavaScript, I stuck with vanilla CSS, as that’s what I feel most comfortable with.
After completing the design in CSS, here is a picture of the final layout:
It was time for JavaScript.
The first step was to store the input value in an array so I could later iterate through it to display the user’s tasks. I searched for a solution and found one on W3Schools. I followed the steps, used console.log to check if the array was storing the values correctly, and everything worked as expected.
Next, I needed to create the updateUi(); function. This function updates and displays the new todos. I spent most of my time trying to understand how this works. After researching how to create elements and add classes to them, I managed to get it to a good stage. (This might sound easy, but it took me hours to figure out.) Unfortunately, I don’t have the exact links, but W3Schools and Stack Overflow were really helpful during this process.
Creating the removeItem(); function wasn’t too difficult since I had already learned about slice in the 3-hour 30-minute JavaScript course, so I had that in mind from the beginning.
What I struggled with was the edit function. After hours of trying, I asked ChatGPT for help. It provided a working solution in seconds, so I copied and pasted the code. I kept it there so I could learn from it.
The final step was adding my finishing touches. I implemented a notice to alert the user when trying to add an empty todo.