Stage 4: Prototype

App Flow Sketch

• Screen 1 (Home): User sees a feed of recipe cards and clicks "Add to Cart". (Function triggered: addToCart())
• Screen 2 (Cart View): User clicks the "View Cart" nav icon to see their compiled ingredients.
• Screen 3 (Success): User clicks "Checkout" and sees a confirmation message.

Low-Fidelity Prototype

[Placeholder: Uploaded photos of paper sketches]

Core Function Draft & Function Mapping

Action: Adds the ingredients into the user's master grocery list array.

• displayRecipes(): Loads the list of available healthy meals.
• addToCart(item): Pushes selected ingredients into the array.
• checkout(): Clears the cart array.

JavaScript Code Generation

Prompt Used: "I need a JavaScript function that adds an item to a digital grocery cart array and displays an alert. Include step-by-step comments."

let userCart = []; 
function addToCart(itemName) {
    userCart.push(itemName); 
    alert(itemName + " was added to your grocery list!"); 
}
    

Summary of Work & Iteration

Project Link: [Codecraft Web Studio URL]

We built a three-screen application using CSS and JavaScript. Our biggest challenge was getting the cart list to update visually on the screen, so we cloned the project to experiment with AI-generated loops to display the array data.