https://main--animated-lebkuchen-2d4afe.netlify.app/
In this mini-project, you are given starter code for a React Bucket List app. Some pieces of the application are not complete, and it is your mission to take what you have learned so far and complete the app.
This project invites you to use most of the concepts you've learned in this module. You will manage state using the useState Hook, pass data as props to child components, and use lists and keys to render a list of bucket-list items.
Work with your group to resolve the following issues:
-
As a user, I want to be able to able to enter a bucket-list item.
-
As a user, I want to be able to set the eagerness level of a bucket-list item.
-
As a user, I want to see a list of all my bucket-list items after they are added, with colors that identify their eagerness level.
-
As a user, I want to be able to edit and delete bucket-list items.
-
It's done when I write logic to add a bucket-list item in
components/BucketList.jsx. -
It's done when I write logic to mark a bucket-list item as complete or incomplete.
-
It's done when I write logic that will remove a bucket-list item from the list.
-
It's done when I write logic to update a bucket-list item in
components/Bucket.jsx. -
It's done when I write logic to render a list of bucket-list items using
.map. -
It's done when each bucket-list item has a color that corresponds to the priority or "eagerness" to complete.
-
It's done when each bucket-list item renders a button to edit and delete the item.
- How can we use string interpolation in
classNameattributes to help change the color of the bucket-list items?
If you have completed this activity, work through the following challenge with your partner to further your knowledge:
- Which React Hooks could we use in combination with local storage to make the bucket list persist after refreshes?
Use Google or another search engine to research this.
© 2023 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.