Travel List

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• Add items with set quantity
• Delete items from list
• Click checkbox for packed items
• Sort list by input order, description, and packed status
• See the status of the list in the footer

Screenshot

Links

• Live Site URL: View

My process

• This code snippet comprises a simple React application for managing a packing list.
• It includes components for adding items, displaying the list, and providing statistics.
• The App component serves as the main container, managing state for the list of items and passing down relevant functions to child components.
• The Form component handles user input for adding new items, while the PackingList component renders the list itself, allowing users to toggle item status and clear the list.
• Additionally, the Stats component calculates and displays statistics based on the packed status of items, providing users with feedback on their progress.
• Overall, this application demonstrates how React components can interact to create a dynamic user interface for managing tasks.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-Responsive Design
• JavaScript - Scripting language
• React - JS library

What I learned

This is a project testing all I know on react

Continued development

Maybe used for reference.

Author

• Website - Cameron Howze
• Frontend Mentor - @camkol
• GitHub- @camkol
• LinkedIn - @cameron-howze
• E-Mail - cameronhowze4@outlook.com