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 16: Add Select Dropdown (Challenge)

Goal: Replace the text input for dish type with a dropdown for better data consistency.

User Story: As a user, I want to select from predefined dish types so that the data is consistent and easier to filter.

---

What You’ll Do

Replace the “Kind of Dish” text input with a select dropdown containing predefined options.

Instructions

• Replace the text input for “Kind of Dish” with a select dropdown
• Add option elements for: entree, side, snack, dessert, drink
• Include a disabled default option: “Select a kind”
• Use defaultValue="" on the select element
• Test that the dropdown works correctly with form submission

💡 Code Hints

Need help with select dropdown? Check out these snippets:

Show Me: select dropdown

<label>
    Kind of Dish:
    <select name="kindOfDish" defaultValue="">
        <option value="" disabled>Select a kind</option>
        <option value="entree">Entree</option>
        <option value="side">Side</option>
        <option value="snack">Snack</option>
        <option value="dessert">Dessert</option>
        <option value="drink">Drink</option>
    </select>
</label>

Show Me: Option select dropdown

✅ Check

1. The text input is replaced with a dropdown
2. You can select from the predefined options
3. The form still submits correctly
4. Data is saved with the selected value
5. The dropdown resets after form submission

---

---