codex-lv2-may-2025

Level Navigation: 1

Current Level: 8

Level 8: IDs and Testing

What You’ll Do

Add meaningful IDs to all elements and test that they can be accessed.

Instructions

Add meaningful id attributes to all elements (input, button, card, etc.)
Test that you can access them with getElementById() in the console
Use setProperty() to test that you can modify element properties

💡 Code Hints

Need help with IDs? Check out these snippets:

HTML IDs and JavaScript access: See SNIPPETS.md for ID naming and element access
Testing elements: Use console.log(document.getElementById("your-id")) to test access

✅ Check

Open your webpage in a browser
Open Chrome DevTools (F12) and go to the Console tab
Type document.getElementById("your-input-id") and press Enter
You should see the input element returned (not null)
Test all your IDs this way to make sure they work
Try using setProperty() to test element modification:
- setProperty("your-input-id", "backgroundColor", "yellow")
- setProperty("your-button-id", "border", "3px solid red")
If any return null, check that the ID is spelled correctly in your HTML

🔍 Optional: Diving Deeper - DOM Operations

For extra practice, you can also test element access with:

console.log(document.getElementById("your-input-id"))

This will show you the full element object in the console, which can help you understand what properties and methods are available.

You can also use the native DOM style property to modify elements directly:

// Same as setProperty("your-input-id", "backgroundColor", "yellow")
document.getElementById("your-input-id").style.backgroundColor = "yellow";

// Same as setProperty("your-button-id", "border", "3px solid red")
document.getElementById("your-button-id").style.border = "3px solid red";

The DOM Operations approach is the standard way to manipulate styles in professional JavaScript development and is used across all major frameworks and libraries. Learning the native DOM API prepares you for real-world codebases where helper functions aren’t available.

Level Navigation: 1

Current Level: 8