Simple React To-Do List ✅

About the App:

A simple To-Do list made with React.JS.

The To-Do list has simple features such as Adding, Removing, Editing, Crossing Off user defined items.

Demo Link: 🔗

Accessible at my Website: arielj.ca/todo

Screenshots:📷

Adding To-Do List 📝

Removing To-Do List 🗑️

Editing To-Do List ✍️

(back to top)

Technologies Used: ⚙️

This Application was Created with

• React.js
• JavaScript
• CSS
• HTML

(back to top)

Setup / Installation: 💻

Prerequisites

• npm npm install -g npm

Instalation

1. Download / Clone the repo
2. Use the command npm install to run the app
3. Run the app with the command npm start

(back to top)

Approach: 🚶

As React.JS is a powerful front-end JavaScript library, the design for the To-Do List application utilizes React's Functional Components and Hooks (mainly Effect Hooks useEffect, useState and useRef).

Sectioned out into 3 separate JavaScript files where each script handles certain aspects of the To-Do List.

Todo.js

The Todo.js handles the mapping of the To-Do List. Furthermore, it parses the data into 2 variables, a todo String (which stores the todo item) and the index of the todo String. The submission of new values is also handled by Todo.js as it utilizes React's useState hook and the associated index value of a todo String to modify and change it's String value.

TodoForm.js

The TodoForm.js handles the generation of a new To-Do item. It generates an ID for each submission and utilizes React Hooks (useState, useEffect and useRef) to handle submission and all user applied changes onto the form (textbox) of the To-Do List application.

TodoList.js

The TodoList.js handles the appending of the To-Do element to the To-Do array. Furthermore, it handles the update process and removal of a To-Do entry. It utilizes the index to find and determine which To-Do entry the user specifies to modify.

(back to top)

Status: 📶

• Ability to Delete Entries
• Ability to Modify Entries
• Animate Background
• Ability to Sort Alphabetically

██████████████]99% Completion

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contact

Ariel Johannes - me@arielj.ca

Project Link: https://github.com/ArielJ3/react-todo

(back to top)