Build a Simple TODO List 📝

[nunyvega]

Objective

Hey Max! Ready for your next challenge? 💹 This time, let’s create a simple TODO list that allows adding tasks, marking them as completed, and removing them. This one is a bit more challenging than the previous one, so it should take a bit longer.

Preview

It should look something like this (feel free to tweak it):

Task Breakdown

Step 1: Setup HTML Structure 🏗

• [x] Create an HTML file with necessary elements such as input fields and buttons.
• [x] Designate an area to display the tasks.

Step 2: Link a JavaScript File 🖇

• [x] Create a JavaScript file.
• [x] Link this file to your HTML.

Step 3: Adding Tasks ➕

• [x] Capture the text from the input field as a task.
• [x] Display each task in the designated area.
• [x] Clear the input field after adding a task. (remove the text from the input field so it is empty again)

Step 4: Marking Tasks as Completed ✅

• [x] Add a feature to mark tasks as completed. You might use checkboxes or click events.

Step 5: Removing Tasks ❌

• [x] Add a "remove" button next to each task.
• [x] Enable the removal of tasks when the "remove" button is clicked.

Step 6: Testing and Debugging 🐞

• [x] Test the functionality of the TODO list thoroughly.
• [x] Debug any issues or errors that you encounter.

Notes 📝

• Progress through each step methodically, ensuring each feature works before moving on to the next.
• Feel free to ask questions or seek clarification whenever needed.

---

Looking forward to seeing your progress, Max 💪

[ByteBiteChef]

Hey! I started with this new project. I just completed step one, creating the HTML file and making the structure. Also, step two creating a JS file, linking it to the HTML file.

Regards!

[ByteBiteChef]

Hi! Steps three and four are completed. Now we can see the tasks from the 'input' in the list area and check it when it is done. Thanks!

[ByteBiteChef]

I finished the last two steps, I had some challenges in the last step but I made it!

Thanks for this fun project.

[nunyvega]

Thanks! where can I see this project online? Btw, don't forget to add it to your menu, let me know once that's done.

[nunyvega]

Final steps:

• [x] Improve the notes in this project, explaining to Max from the past how to overcome the challenges that you found.
• [x] Add a link to your live project so we can visit it and check the results.
• [x] Add a link to your website's menu so we can visit the project from your homepage.

Once you're done with this project, you can find your new project here: Build an Expense Tracker 💰 #4

[ByteBiteChef]

Hey, I just updated the website. The TODO list project is now on the menu. You can visit the TODO list by clicking this link: https://bytebitechef.github.io/TODOlist.html or you can have a look on the website: https://bytebitechef.github.io/

Thanks!

[ByteBiteChef]

This project had new challenges and showed me the importance of organization in the starting stage. Writing a line of text for each code I needed to make was very helpful.

Something else to keep in mind is to understand every line of code we write down. It is very easy to use GPT to get an explanation of a code. Remember to use console.log to be aware of what is happening in your code all the time. Also, don’t try to do all at once, do everything in baby steps. In the final stage of the project, I had to delete the tasks added to the list using the 'remove' button. For this, I needed some help from Alvaro. To achieve this we used the '.remove' and 'this.' methods.

Thanks!!