codex-lv2-may-2025

Level Navigation: 1

Current Level: 27

🧪 Level 27: Add Validation Area

What You’ll Do

Improve your validation system by creating a dedicated area for validation messages.

Instructions

Add a dedicated validation area to your HTML:

Create a small area near the input field for validation messages
Give it a clear ID (like validation-message)
Keep it empty by default
Style it appropriately (subtle border, background, or text color)
(This will make your validation messages more professional and organized)

💡 Code Hints

Need to display text in your validation area? You’ll use the setText() function to show validation messages. Check out the Helper Functions section in SNIPPETS.md for setText() examples and other useful functions.

✅ Check

Open your webpage in a browser
Look for a new validation area near your input field
This area should be empty by default (no text visible)
The area should be styled appropriately (subtle border, background, or text color)
Open Chrome DevTools (F12) and check the Console tab for any errors
If you don’t see the validation area, check that you added the HTML element with the correct ID
Next step: In Level 28, you’ll connect this area to your validation logic from Levels 25-26

Next: Level 28 - Show Validation on Empty

Level Navigation: 1

Current Level: 27