Project 4: Building a To-Do List App – Overcoming Inconsistency and Delivering Results

Project 4: To-Do List App – A Step Forward in My 40-Day JavaScript Challenge

Hello, everyone! I am on a journey to enhance my JavaScript skills through a 40-day project challenge. However, I must admit that consistency has been a struggle for me during this challenge. But today, I am excited to share that I've completed my 4th project—an interactive To-Do List App! 🎉

Project Overview: To-Do List App

This project allowed me to dive into JavaScript fundamentals, as well as apply my knowledge of HTML and CSS for a clean and functional user interface. The main objective was to create an app where users can add tasks, mark them as completed, and remove them as needed. Additionally, I wanted the tasks to persist even after refreshing the page.

Challenges Faced and Solutions Implemented

1. Handling Empty Input Validation:

• Difficulty: One of the first challenges was preventing users from adding empty tasks. It’s important for the user experience that they receive feedback if they try to add a blank task.

• Solution: I used an if condition in my addTask() function to check if the input field is empty. If it is, an alert message pops up saying, "You must write something!". This simple validation helps in maintaining a clean task list.

2. Managing Task Deletion:

• Difficulty: Creating a way for users to delete individual tasks was a bit tricky. I had to figure out how to remove the specific task from the list when a delete button is clicked.

• Solution: To solve this, I added a span element containing the “×” symbol to each new list item (li). When this span is clicked, it triggers an event that removes the parent list item using e.target.parentElement.remove(). This provided an intuitive way for users to manage their tasks.

3. Data Persistence Using Local Storage:

• Difficulty: I wanted users to retain their tasks even after refreshing the page, which required some way of saving data locally.

• Solution: I used localStorage to store the HTML content of my listContainer. The saveData() function saves the updated tasks to localStorage whenever a task is added, deleted, or marked as complete. The showTask() function retrieves this saved data when the app loads, making the To-Do List persistent across browser refreshes.

4. Toggling Task Completion:

• Difficulty: Implementing a feature to mark tasks as complete or incomplete, and reflecting that visually, was another challenge.

• Solution: I used the classList.toggle() method in my JavaScript to add or remove the checked class to list items (li). This class applies styles like a gray text color and line-through effect to show completed tasks, offering a clear visual cue.

5. Designing a User-Friendly Interface:

• Difficulty: I aimed for a visually appealing and responsive design, which involved styling with CSS and using flexbox for better layout control.

• Solution: I created a gradient background for the container and designed the task input area with rounded corners. The #todo-app section has a maximum width to ensure it looks great on different screen sizes. The end result is a clean and functional design that enhances the overall user experience.

Final Thoughts

Completing this project feels like a small victory, especially since staying consistent has been a struggle for me. Today, I pushed through and delivered my 4th project, learning valuable lessons along the way. This To-Do List app may seem simple, but it represents a key step in my learning journey. I hope to keep the momentum going and stay more consistent in the coming days.

Check out the code, give it a try, and let me know your thoughts! I’m excited to continue learning and sharing my progress with you all.