codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19⚡

20

Level 15: Clear Inputs After Submit

Goal: Clear the form inputs after successful submission.

User Story: As a user, I want the form to clear after I submit it so that I can easily add another meal.

---

What You’ll Do

Update your handleAddMeal function to clear the form inputs after submission.

Instructions

• Update your handleAddMeal function to clear the form inputs after successful submission
• Clear each input field by setting its value to an empty string
• Use event.target.elements to access each input field
• Clear all four input fields: mealName, guestName, serves, and kindOfDish

💡 Code Hints

Need help with clearing inputs? Check out these snippets:

Show Me: complete form handler with clearing

async function handleAddMeal(event){
    event.preventDefault()
    console.log("handle add meal submitted")
    const mealName = event.target.elements.mealName.value
    const guestName = event.target.elements.guestName.value
    const serves = event.target.elements.serves.value
    const kindOfDish = event.target.elements.kindOfDish.value
    
    const newMeal = {
        meal_name: mealName,
        guest_name: guestName,
        serves: parseInt(serves),
        kind_of_dish: kindOfDish
    }
    
    console.log(newMeal)
    
    // Insert the new meal
    await supabase.from("potluck_meals").insert(newMeal)
    
    // Refresh the meals list
    const response = await supabase.from("potluck_meals").select()
    const data = response.data
    setMeals(data)
    
    // Clear the form inputs
    event.target.elements.mealName.value = ""
    event.target.elements.guestName.value = ""
    event.target.elements.serves.value = ""
    event.target.elements.kindOfDish.value = ""
}

Show Me: Clear inputs after submit

✅ Check

1. Submit a new meal through the form
2. All form inputs clear automatically
3. The form is ready for the next entry
4. The meals list still updates correctly
5. You can immediately add another meal

---

---