codex-lv2-may-2025

Level Navigation: 1

Current Level: 6

🧪 Level 6: UI & DOM Wiring - Basic Interface

Goal: Build the Bootstrap UI, connect it with helpers (or direct DOM methods), and test interactions. (Choose meaningful ids. Example only: <input id="userPrompt">.)

What You’ll Do

Add the basic interface elements to your HTML.

Instructions

In the HTML, add the interface:

An input for the user’s prompt
A button to send
A plain <div> for the chatbot’s reply (no styling yet)

💡 Code Hints

Need help with the HTML structure? Check out these snippets:

HTML IDs and JavaScript access: See SNIPPETS.md for ID naming and element access
Input elements: See SNIPPETS.md for <input> examples
Button elements: See SNIPPETS.md for <button> examples
Basic structure: Use meaningful id attributes like id="user-chat-input" and id="send-btn"

✅ Check

Open your index.html file in a web browser and verify you can see:

A text input box where you can type
A button (it won’t do anything yet, but it should be visible)
A blank area below for the chatbot’s response
Open Chrome DevTools (F12) and check the Console tab for any errors

Next: Level 7 - Bootstrap Styling

Level Navigation: 1

Current Level: 6