This project was bootstrapped with Create React App.
TODOLIST APPLICATION
To run the TODO list application locally, follow these steps:
- npx create-react-app react-todolist 2.cd react-todolist
Usage
1.Use the input bar at the top of the app to add TODO items. Press the return (Enter) key to add a new TODO. 2.Click on a TODO card to mark it as complete. Completed TODOs will move to the bottom of the list. 3.Click the "Reset" button in the top-right corner to clear all TODOs and return to the initial state. 4.The app works offline, and browser refreshes will not affect the TODOs' state.
Code Structure
The project structure is organized as follows: react-todolist/ ├── index.html ├── css/ │ ├── styles.css ├── js/ │ ├── app.js └── README.md index.html: The HTML file for the application's user interface. css/styles.css: CSS styles for the UI. js/app.js: JavaScript code for handling TODO functionality.
Assumptions
The app is assumed to work in modern web browsers, including the latest versions of Chrome, Firefox, and Safari.
Key Features
Input Bar for Adding TODOs: simple input bar that allows users to add TODO items by pressing the return key (or Enter key).
List of TODO Cards: Display a list of TODO cards where each TODO item is appended upon creation.
Marking TODO as Complete: Allow users to click on a TODO card to mark it as complete. When marked as complete, move the TODO card to the bottom of the list.
Sorting of TODOs: Active TODO cards should appear in order of creation, with the most recent on top. Completed TODO cards should appear in order of completion, with the most recent on top.
Reset Button: a reset button in the top-right corner of the app. Clicking this button clear all TODO items and return the app to its initial state.
Browser Refresh Behavior: hitting the refresh button, including a hard refresh, in the browser does not cause any change in the state of the app. It should work like a regular offline app, meaning that the TODOs should persist across page reloads.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify