https://github.com/mstephen19/react-bucket-list
https://github.com/mstephen19/react-bucket-list
react state-management
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mstephen19/react-bucket-list
- Owner: mstephen19
- Created: 2021-11-19T21:46:01.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-20T10:19:27.000Z (over 3 years ago)
- Last Synced: 2025-02-04T22:14:26.526Z (4 months ago)
- Topics: react, state-management
- Language: JavaScript
- Homepage:
- Size: 526 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Unit 20 Mini-Project: Bucket List
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 unit. 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.
## Activity
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.
## Acceptance Criteria
* It's done when I write logic to add a bucket-list item in `components/BucketList.js`.
* 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.js`.
* 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.
---
## 💡 Hints
* How can we use string interpolation in `className` attributes to help change the color of the bucket-list items?
## 🏆 Bonus
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](https://www.google.com) or another search engine to research this.
---
© 2021 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.