I started by creating an input field and a submit button.
I quickly realized that I needed to handle events properly since React takes over the input field, which means it doesn’t work out of the box like regular HTML.
Next, I focused on preventing the default submit behavior of the form.
I added the todo string to an array by combining the previous values with the new one using the spread operator.
Then, I created a TodoItem component to render each todo.
I mapped over the todo list and made sure to provide a unique key for each item to help React keep track of changes.
After that, I added a header to my app and started styling it.
I learned about CSS modules and how to style the App class, which helped me scope my CSS and avoid style conflicts.
As I continued, I decided to separate the components further due to dependencies between the form and the list.
This made my code cleaner and easier to manage.
I then focused on styling the form to enhance its visual appeal and improve the overall user experience.
Next, I styled the todo list component and each individual todo item.
I wanted to ensure that the list was visually appealing and easy to read.
I added a remove button for each todo item and styled it to make it clear and accessible.
This way, users could easily remove items from the list when they needed to.
I implemented the functionality to actually remove items from the list when the remove button was clicked.
It felt great to see it all come together!
I added a feature that allowed users to mark items as completed by clicking on the span.
I made sure the span was centered, so users needed to click right in the middle of the visual item to mark it as completed.
To wrap things up, I added a footer to display the number of completed and total todos.
I also included buttons to remove completed todos or clear all todos from the list.
Finally, I tidied up the HTML structure and utilized the public directory for assets like the favicon.
This ensured my app looked polished and professional in the end!