|
1 | | -# interactive-web-pages-javascript |
2 | | -A project showcasing dynamic web development with JavaScript, including event handling, interactive components, and custom form validation. |
| 1 | +# ⚡ Interactive Web Pages with JavaScript |
| 2 | + |
| 3 | +[](#) |
| 4 | +[](#) |
| 5 | +[](#) |
| 6 | +[](#) |
| 7 | +[](#) |
| 8 | + |
| 9 | +This project demonstrates **JavaScript event handling**, **interactive UI elements**, and **custom form validation** without reloading the page. |
| 10 | +Built with semantic **HTML5**, **CSS3**, and **vanilla JavaScript** — no frameworks. |
| 11 | + |
| 12 | +--- |
| 13 | + |
| 14 | +## ✨ Features Overview |
| 15 | + |
| 16 | +| Feature | Description | |
| 17 | +|---------------------------|-------------| |
| 18 | +| 🌗 Theme Toggle | Switch between light/dark themes, saved in `localStorage`. | |
| 19 | +| 🔢 Counter Game | Increment/decrement/reset via buttons or keyboard (`↑`, `↓`, `R`). | |
| 20 | +| ❓ Accessible FAQ | Expand/collapse questions with smooth animation & ARIA attributes. | |
| 21 | +| 📝 Custom Form Validation | Full validation (name, email, password, confirmation, terms) with **inline messages** and accessible feedback. | |
| 22 | + |
| 23 | +--- |
| 24 | + |
| 25 | +## 🖼️ Demo & Screenshots |
| 26 | + |
| 27 | +### Theme Toggle |
| 28 | + |
| 29 | + |
| 30 | +### Counter with Keyboard |
| 31 | + |
| 32 | + |
| 33 | +### FAQ (Collapsible) |
| 34 | + |
| 35 | + |
| 36 | +### Sign-up Form Validation |
| 37 | + |
| 38 | + |
| 39 | +--- |
| 40 | + |
| 41 | +## 🚀 Live Preview |
| 42 | + |
| 43 | +👉 **[GitHub Pages Deployment](https://Augusto047.github.io/interactive-web-pages-javascript/)** |
| 44 | + |
| 45 | +--- |
| 46 | + |
| 47 | +## 📂 Project Structure |
| 48 | + |
| 49 | +``` |
| 50 | +. |
| 51 | +├── index.html |
| 52 | +├── style.css |
| 53 | +├── script.js |
| 54 | +├── assets/ # Images and GIFs |
| 55 | +└── README.md |
| 56 | +``` |
| 57 | + |
| 58 | +--- |
| 59 | + |
| 60 | +## 👨💻 Author |
| 61 | + |
| 62 | +**Augusto Mate** |
| 63 | + |
| 64 | + |
| 65 | +--- |
| 66 | + |
| 67 | +> ⚡ *Crafted with attention to UX, accessibility (ARIA, keyboard support), and clean code — perfect for academic and professional showcase.* |
0 commit comments