|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | + <title>Interactive Web Pages with JavaScript — Submission</title> |
| 7 | + <meta name="description" content="Event handling, interactive UI elements, and custom form validation without reload." /> |
| 8 | + <link rel="stylesheet" href="style.css" /> |
| 9 | + <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>"> |
| 10 | + <script defer src="script.js"></script> |
| 11 | +</head> |
| 12 | +<body> |
| 13 | + <a class="skip-link" href="#main">Skip to content</a> |
| 14 | + |
| 15 | + <header class="site-header"> |
| 16 | + <h1><span aria-hidden="true">⚡</span> Interactive Web Pages — Demo</h1> |
| 17 | + <div class="header-actions"> |
| 18 | + <button id="theme-toggle" class="btn" aria-pressed="false" aria-label="Toggle dark mode">Toggle theme</button> |
| 19 | + <nav aria-label="Quick links"> |
| 20 | + <a href="#counter">Counter</a> |
| 21 | + <a href="#faq">FAQ</a> |
| 22 | + <a href="#form">Form</a> |
| 23 | + |
| 24 | + </nav> |
| 25 | + </div> |
| 26 | + </header> |
| 27 | + |
| 28 | + <main id="main" class="container"> |
| 29 | + <section id="intro" class="card"> |
| 30 | + <h2>What this page shows</h2> |
| 31 | + <ul> |
| 32 | + <li>Event listeners for click, keyboard, input, and submit events.</li> |
| 33 | + <li>Interactive components: a theme toggle, a counter game, and a collapsible FAQ.</li> |
| 34 | + <li>Custom JavaScript form validation (native validation disabled) with helpful inline feedback.</li> |
| 35 | + </ul> |
| 36 | + </section> |
| 37 | + |
| 38 | + <section id="counter" class="card"> |
| 39 | + <h2>Counter game</h2> |
| 40 | + <p class="muted">Use the buttons or your keyboard: ↑ to increment, ↓ to decrement, R to reset.</p> |
| 41 | + <div class="counter"> |
| 42 | + <output id="count" aria-live="polite" aria-atomic="true">0</output> |
| 43 | + <div class="btn-row"> |
| 44 | + <button id="inc" class="btn">+1</button> |
| 45 | + <button id="dec" class="btn">−1</button> |
| 46 | + <button id="reset" class="btn btn-secondary">Reset</button> |
| 47 | + </div> |
| 48 | + </div> |
| 49 | + </section> |
| 50 | + |
| 51 | + <section id="faq" class="card"> |
| 52 | + <h2>FAQ (collapsible)</h2> |
| 53 | + <ul class="faq-list"> |
| 54 | + <li class="faq-item"> |
| 55 | + <button class="faq-question" aria-expanded="false" aria-controls="a1" id="q1">What is an event listener?</button> |
| 56 | + <div id="a1" class="faq-answer" hidden> |
| 57 | + An event listener runs a function in response to a user action (click, keydown, input) or system event. |
| 58 | + </div> |
| 59 | + </li> |
| 60 | + <li class="faq-item"> |
| 61 | + <button class="faq-question" aria-expanded="false" aria-controls="a2" id="q2">Why build components without reloading?</button> |
| 62 | + <div id="a2" class="faq-answer" hidden> |
| 63 | + It improves user experience and performance by updating only what’s needed on the page. |
| 64 | + </div> |
| 65 | + </li> |
| 66 | + <li class="faq-item"> |
| 67 | + <button class="faq-question" aria-expanded="false" aria-controls="a3" id="q3">Where is the validation happening?</button> |
| 68 | + <div id="a3" class="faq-answer" hidden> |
| 69 | + In <code>script.js</code>, which attaches handlers to inputs and the form. HTML5 validation is disabled via <code>novalidate</code>. |
| 70 | + </div> |
| 71 | + </li> |
| 72 | + </ul> |
| 73 | + </section> |
| 74 | + |
| 75 | + <section id="form" class="card"> |
| 76 | + <h2>Sign-up form (custom validation)</h2> |
| 77 | + <p class="muted">All validation is done with JavaScript. Try typing! Errors appear inline as you go.</p> |
| 78 | + <form id="signup-form" novalidate> |
| 79 | + <div class="form-field"> |
| 80 | + <label for="name">Full name</label> |
| 81 | + <input id="name" name="name" type="text" autocomplete="name" aria-describedby="name-msg"/> |
| 82 | + <small class="message" id="name-msg"></small> |
| 83 | + </div> |
| 84 | + |
| 85 | + <div class="form-field"> |
| 86 | + <label for="email">Email</label> |
| 87 | + <input id="email" name="email" type="email" autocomplete="email" aria-describedby="email-msg"/> |
| 88 | + <small class="message" id="email-msg"></small> |
| 89 | + </div> |
| 90 | + |
| 91 | + <div class="form-field"> |
| 92 | + <label for="password">Password</label> |
| 93 | + <input id="password" name="password" type="password" autocomplete="new-password" aria-describedby="password-msg"/> |
| 94 | + <small class="message" id="password-msg"></small> |
| 95 | + <div class="hint">Min 8 chars, with upper, lower, number, and symbol.</div> |
| 96 | + </div> |
| 97 | + |
| 98 | + <div class="form-field"> |
| 99 | + <label for="confirm">Confirm password</label> |
| 100 | + <input id="confirm" name="confirm" type="password" autocomplete="new-password" aria-describedby="confirm-msg"/> |
| 101 | + <small class="message" id="confirm-msg"></small> |
| 102 | + </div> |
| 103 | + |
| 104 | + <div class="form-field checkbox"> |
| 105 | + <input id="terms" name="terms" type="checkbox" /> |
| 106 | + <label for="terms">I agree to the terms</label> |
| 107 | + <small class="message" id="terms-msg"></small> |
| 108 | + </div> |
| 109 | + |
| 110 | + <div class="form-actions"> |
| 111 | + <button type="submit" class="btn">Create account</button> |
| 112 | + </div> |
| 113 | + |
| 114 | + <div id="form-status" class="status" role="status" aria-live="polite" hidden></div> |
| 115 | + </form> |
| 116 | + </section> |
| 117 | + </main> |
| 118 | + |
| 119 | + <footer class="site-footer"> |
| 120 | + <p>Built by <strong>Augusto Mate </strong> · <a href=" mailto:[email protected]" >[email protected]</a></p> |
| 121 | + |
| 122 | + </footer> |
| 123 | +</body> |
| 124 | +</html> |
0 commit comments