Core skill
<dialog>
Platform under construction
Modal Project
A modal project teaches state, focus, escape-key handling and accessible dialog behavior.
dialog.showModal();
closeButton.focus();
dialog.addEventListener("close", restoreFocus);
Projects & Practice
Modal Project turns lessons into working browser code.
A modal project teaches state, focus, escape-key handling and accessible dialog behavior.
Projects are where JavaScript starts to become real. You connect state, events, rendering, validation, async work and accessibility in one small feature.
Keep each project small enough to understand, but complete enough that it teaches a real workflow.
Build order
Start with HTML, add CSS, then connect JavaScript behavior.
State
Keep important values in JavaScript state, not hidden in random DOM text.
Review
Each project should include a self-check and one improvement idea.
Examples
Projects turn syntax into instinct.
Build from state to render
dialog.showModal();
closeButton.focus();
dialog.addEventListener("close", restoreFocus);
Let the DOM become accidental state
modal.style.display = "block"; // No focus handling or dialog semantics.
Code patterns
Reusable examples for quick reference.
Use these examples as compact build exercises that connect multiple JavaScript skills.
Project pattern
A small version of the project idea.
dialog.showModal();
closeButton.focus();
dialog.addEventListener("close", restoreFocus);
Beginner trap
A shortcut that makes the project harder to maintain.
modal.style.display = "block"; // No focus handling or dialog semantics.
Render function
Projects become cleaner when rendering is explicit.
function render() {
output.textContent = String(state.value);
}
Status message
Tell users what happened after an action.
status.setAttribute("role", "status");
status.textContent = "Saved successfully.";
Rules that matter
Small projects should still be real projects.
A good practice project has state, interaction, feedback and a clear next improvement.
Start with a working HTML structure
The project should have meaning before JavaScript.
Name state clearly
Use arrays, objects or variables that describe the feature.
Write one render function
Rendering should be repeatable after state changes.
Handle empty and error states
Small projects still need real product thinking.
Keep accessibility visible
Use buttons, labels, status messages and focus deliberately.
Refactor after it works
First make it work, then make it clean.
Production thinking
Ship practice code with the habits of production code.
Why does this matter?
Projects make knowledge stick. They force separate topics to work together in the same page.
Accessibility
Every project should include semantic controls, labels and status feedback so the feature is usable beyond the happy path.
Production note
Production projects need file structure, tests, error handling and a clear release checklist once the prototype works.
SEO note
Project pages are useful learning content when the code, explanation and outcome are all visible.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Change one behavior in the project.
- Add one empty, error or status state.
- Explain where the project stores its state.
Practice assignment
Do this before moving to the next topic.
- Rebuild the project from an empty HTML file.
- Add one feature without changing the original structure too much.
- Write three notes about what you would improve in production.
Try it yourself
Build the Modal Project
Self-check
Before you continue, prove that you understand Modal Project.
Answer these before moving to the next project lesson.
- What JavaScript topics does this project combine?
- Where is the state stored?
- What triggers the render update?
- What accessibility detail is included?
- What would be the next production improvement?
Senior audit upgrade
Extra production context for Modal Project.
Acceptance criteria
- Focus moves into the modal when it opens.
- Escape closes the modal.
- Focus returns to the opener when the modal closes.
- The modal uses dialog behavior or equivalent aria-modal semantics.