Mark Plants as Owned

Value Proposition

As a user

I want to mark the plants I own,

so that I can easily track and manage the care of my personal collection.

Capstone Group Todo: Add wireframes

Each listed plant includes a “Mark as Owned” option.
Clicking the “Mark as Owned” button of an unmarked plant adds it to the “My Plants” list.
Clicking the same button again removes the plant from the “My Plants” list.
The “My Plants” list is displayed on a separate page dedicated to owned plants.
There is a clearly visible link on the homepage to navigate to the “My Plants” page.
There is a clearly visible link on the “My Plants” page to navigate back to the homepage.
Owned plants are visually highlighted by a distinct icon or style to differentiate them from unowned plants.
If there are no owned plants in the “My Plants” list, a message is displayed to the user indicating that no plants have been marked as owned.

[ ] Create feature branch feature/mark-as-owned
[ ] Create comp PlantOwnedButton.js
- [ ] implement SVG for button
- [ ] conditional return statement: isOwned? "full star" : "empty star"
- [ ] call props {isOwned, onClick, id }
[ ] Develop handle toggle function in App.js to toggle isOwned
[ ] Create page MyPlants.js
- [ ] Add header "My Plants"
- [ ] conditional return statement: isOwned? display list of all owned plants : "No plants on list"
- [ ] Utilize .filter to iterate over plants-state and return PlantCard(s) if isOwned=true