ReadME: The purpose of this application was to practice pair programming by creating a shopping list for a visit to a candy store, all in under 45 minutes . Our team was made of Theo, Annie and Salah.

Tech Stack Font-End React.JS JavaScript HTML/CSS

1.⁠ ⁠User Interface

• Input Fields:
  • A text input for entering the name of a candy.
  • A number input for entering the quantity of the candy.
• Add Button: A button to add the entered candy item to the inventory list.
• Candy List: A list displaying all added candy items with their quantities.
• Delete Button: A button next to each candy item for removing it from the list.

2.⁠ ⁠Functionality

• Adding Candies:
  • Users should be able to type a candy name and quantity in the input fields.
  • Upon clicking the "Add" button or pressing the Enter key, the candy item should be added to the inventory list.
  • After adding a candy item, the input fields should be cleared, ready for new entries.
• Displaying Candies:
  • Display each candy item as a list item with its name and quantity.
  • Each item should display the candy name, quantity, and a "Delete" button.
• Deleting Candies:
  • Clicking the "Delete" button should remove the corresponding candy item from the list.
• Empty List Message:
  • If there are no candies in the list, display a message like "Your inventory is empty!" to indicate the list is empty.

3.⁠ ⁠Technical Requirements

• State Management: Use React's useState hook to manage the list of candy items, the current values of the input fields, and their quantities.
• Event Handling:
  • Handle changes in the input fields to update the state for candy name and quantity.
  • Handle form submission to add new candy items to the inventory list.
  • Handle click events on the "Delete" button to remove items.

Project Challenges

• Resizing the kenyan flag image to use for the background
• Using ES6 syntax to update the UI when no more items were in the list

Future Project Improvements / Lessons

• Improve the readability of items after adding the Kenyan Flag
• Make a moodboard / pintrest board for the colours,fonts, emoji's to use to deploy

Overall Experience

• Enjoyable working as a team on code. We covered each others blind spots and made for a more creative end product.

Social Channels

LinkedIN https://www.linkedin.com/in/theo-dryden-bb6526114/

Github https://github.com/theodryden

Coding Newsletter https://theodrydentech.substack.com/