SKETCH

Before I started coding, I specified the components to be created with a simple sketch to know what components to build the user interface with.

LOGO

The logo has a minimalistic feel by putting a thin font “TODO” in the box.

React.js

Initially, a component that can be used when returning the basic app component was created in App.js. Then I added a component called Form to give it permission to create a new item and select a list of categories.

I built a function that lets a user go to the “Completed” category when the user presses a checkmark and a function that deletes the list when the user clicks a trash can icon.

I was able to understand React in more detail by creating the simple Todo list app that creates new information, updates existing information, and deletes the information.

Styling

Finally, I entered style rules in a style sheet called App.css, such as the background shadow and button animation.