Hello everybody! 👋
✨ Welcome to the Far Away project! This project is a simple and interactive packing list application for organizing your travel essentials. Built with React, it offers a user-friendly interface to add, check, and remove items from your list. Whether you're planning a short trip or a long vacation, this app helps you stay organized.
- React: For building the user interface.
- CSS: For styling the application with a clean and minimal design.
- JavaScript: To handle logic and interactivity.
- Add Items
-
Users can add items to their packing list by specifying the quantity and the item name.
-
The input includes a dropdown to set the quantity and a text field to enter the item.
- Mark Items as Packed
-
Each item in the list has a checkbox.
-
Ticking the checkbox strikes through the item, indicating that it has been packed.
- Remove Items
- Each item has a delete button (red “X”) that allows users to remove the item from the list.
- Packing Progress
- At the bottom of the application, the total number of items in the list and the number of packed items are displayed, along with the packing progress percentage.
-
Adding an Item: Enter the quantity and item name in the input fields and click the "Add" button. The item will appear in the list below.
-
Packing an Item: Click the checkbox next to an item to mark it as packed. This will strike through the item name.
-
Deleting an Item: Click the red “X” button next to an item to remove it from the list.
-
Progress Tracking: The progress bar at the bottom updates in real time as items are packed or removed.
- Clone the repository:
git clone https://github.com/your-username/far-away-packing-list.git
2.Navigate to the project directory:
cd far-away-packing-list
- Install dependencies:
npm install
- Start the development server:
npm start
- Open your browser and visit:
[npm start](http://localhost:3000)
- Build for Production : To create a production-ready build, run:
npm run build
- Tuğçe Çifci - @tucecifci
- Frontend Mentor - @tucecifci