Day 9: You don’t need JS for that

HTML5 added several interactive elements that used to require complex JavaScript.

1. Accordions (details & summary)

Want a collapsible section (“Read More”, “FAQ”)?

<details>
    <summary>Click to reveal secret</summary>
    <p>Here is the hidden content! It was here all along.</p>
</details>

No JS required. It opens/closes natively.

2. Modal Dialogs (dialog)

A native popup window.

<dialog id="myModal">
    <p>I am a modal window!</p>
    <form method="dialog">
        <button>Close</button>
    </form>
</dialog>

<!-- You need a TINY bit of JS to open it -->
<button onclick="document.getElementById('myModal').showModal()">Open Modal</button>

3. Progress Bars (progress)

Showing a loading state or completion.

<label for="file">Upload progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

4. Range Sliders (input type="range")

<label>Volume:</label>
<input type="range" min="0" max="100">

5. Date Pickers (input type="date")

<label>Birthday:</label>
<input type="date">

Homework for Day 9:

1. Create a “FAQ” Section using <details> and <summary>.
2. Add 3 questions and answers.
3. Add a <progress> bar showing “Course Completion: 90%”.

Day 10: Accessibility & Final Project. We build a landing page!