A simple React application to manage a packing list for trips. You can add items, mark them as packed, sort the list by different criteria, and clear the list once you're done. The app uses Tailwind CSS for styling.
- Add Items: Add items with a description and quantity.
- Mark as Packed: Toggle whether an item has been packed or not.
- Sort Items: Sort the list by input order, description, or packed status.
- Clear List: Clear all items from the list.
- App: Main component handling the state and rendering the packing list.
- Form: Form to add new items to the list.
- PackingList: Component that handles rendering and sorting of the list.
- Stats: Displays statistics like the total number of items and packed percentage.
To install and run the project locally:
-
Clone the repository:
git clone https://github.com/divine7022/atomicBlog.git
-
Navigate to the project directory:
cd atomicBlog -
Install dependencies:
npm install
-
Run the app:
npm start
-
Open your browser and go to
http://localhost:3000to view the app.
- Add an item with a quantity and description.
- Check off items as you pack them. 3 .Sort items by their input order, description, or packed status.
- Clear the list when your packing is done.