This workshop was run 02/06/24 by Christopher Bannon and Nhu Vhu through Open Project
https://openprojectberkeley.com/
-
Clone the repository
-
cd into
OP-Frontend-WS
-
run
yarn
ornpm i
-
run
yarn dev
ornpm run dev
-
Read through the code to understand a bit about the React project. The major changes will mostly be made in
ShoppingList.jsx
-
First, hook up the "Add item" button so it adds a new section to the shopping list. How do we make something happen to a button when it is clicked? How do we keep track of what the user is typing --> how do we listen for this change in input?
-
Render this list of items. Look into the
map
function. It might be nice to use Flexbox to arrange the information in a row, but up to you! -
Then, try adding another "price" field that you can also add to the shopping list item. You'll need to add a new element and make sure that information tracked by the state.
-
Add (or toggle) the ".highlight" class to a shopping list item when it is clicked.
-
Add a description for each item. Look in
Description.jsx
for more direction. -
For each item, add a button that will remove the item (itself) from the shopping list.
Most of this was taken from Tim's CS160 SP24 Week2 Activity and changed to fit a React context. Thank you TIm & CS160!