ToDo List

Description

This is a simple Todo List Application using react to create and manage a todo list. There are options to mark an item complete, as well as unmark the item, and the ability to add and delete items from the list.

Purpose

This was done as an assignment in the MIT course - Full Stack Development with Mern

Technologies Used

HTML
CSS
Javascript

Installation

Clone this repository to your local machine
Open a command line on your computer and run the command cd path-to-project-root (this should be the actual directory where the repository is located on your local machine)
Within the same command-line window, run npm install http-server which will allow you to fire up a web server to access the paage
Once the command completes successfully, run http-server -c-1
Open your browser of choice and browse to http://127.0.0.1:8080/

How to Run

When the page is loaded in your browser, you will notice 3 default entries
To complete an item: Click on the checkbox of an entry. The checkbox will be checked and the text of the todo item will be striked out
To uncomplete an item: Click on the checkbox of an entry. The checkbox will be unchecked and the text of the todo item will be normal
To delete an item: Click on the trashcan button next to the item you want to remove. The item will be removed.
To add an item: start typing in the input field at the bottom of the form and hit enter. The new todo item will be added to the bottom of your list

Files

/ToDo.png - Screenshot for ReadMe
/Standalone - Standalone React App
- /index.html - Start-up file to be opened by browser
- /index.js - Contains the React code to build the page, Render ReactDOM
- /form.js - Contains the React code to build the form to add new todo items
- /todo.js - Contains the React code to build the todo item
- /styles.css - Stylesheet file that positions objects, controls text, colors, and layout
- /todo.txt - Json Data for todo list
/Create-React-App - React App
- /public/index.html - Start-up file to be opened by browser
- /public/todo.txt - Json Data for todo list
- /src/App.css - Stylesheet file that positions objects, controls text, colors, and layout
- /src/App.js - Contains the React code to build the stores items, the code to manage the inventory, the code to manage the shopping cart, and Render ReactDOM
- /src/index.css - Stylesheet file that positions objects, controls text, colors, and layo
- /src/index.js - Contains the ReactDom
- /src/form.js - Contains the React code to build the form to add new todo items
- /src/todo.js - Contains the React code to build the todo item

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

The MIT License (MIT)