codex-lv2-may-2025

Level Navigation: 1

Current Level: 5

Level 5: 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> or a <pre> for the output (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

Navigate to your file in your browser (remember, you’re using live-server) 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 output
Open Chrome DevTools (F12) and check the Console tab for any errors

Level Navigation: 1

Current Level: 5