Colin's To-do App

An application for users to make to-do lists. A personal project built with React.

Live link: https://colins-todo-app.netlify.app/

Project Screen Shot(s)

Features

Users can:

• add to-do items
• mark items completed/active
• view "All", "Active", or "Completed" items
• search items using search filter
• delete individual items
• delete all completed items
• reorder items by dragging, dropping them

Usage instructions

• Add to-do items by typing, then clicking "Save", or pressing the "Enter" key on your keyboard or smartphone
• Reorder items by dragging them up or down
• Toggle items as "completed/active" by clicking or tapping on the item's text
• View all, active, or completed items by using the buttons toward the top
• Delete items individually by clicking on the "x" to the right side of each item
• Remove all completed items by clicking the button toward the bottom, below list items. This function is only available when completed items are visible on the screen, i.e. 1) completed items actually exist and 2) the user has not opted to view "active" items by filtering out completed items Note: Items are stored locally so they will not sync, and will be permanently lost and unrecoverable when deleted.

Installation and Setup Instructions

Clone down this repository. git clone https://github.com/colin-macrae/to-do-app.git

You will need Node.js installed globally on your machine.

Installation:

npm install

npm install react-dom

npm install vite

npm install react-beautiful-dnd

To Run App Locally:

npm run dev

http://localhost:5173