Skip to content

Commit 0fd7864

Browse files
authored
feat: release v3 with showcase (README + assets)
Interactive event-driven web pages with JavaScript — theme toggle, counter, FAQ, and custom form validation.
1 parent d4d3daa commit 0fd7864

File tree

1 file changed

+67
-2
lines changed

1 file changed

+67
-2
lines changed

README.md

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,67 @@
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+
[![Status](https://img.shields.io/badge/status-stable-brightgreen)](#)
4+
[![Made with](https://img.shields.io/badge/made%20with-Vanilla%20JS-blue)](#)
5+
[![License](https://img.shields.io/badge/license-MIT-lightgrey)](#)
6+
[![Accessibility](https://img.shields.io/badge/accessibility-ARIA%20Ready-purple)](#)
7+
[![Responsive](https://img.shields.io/badge/design-responsive-orange)](#)
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+
![Theme Toggle](assets/theme-toggle.gif)
29+
30+
### Counter with Keyboard
31+
![Counter Demo](assets/counter.gif)
32+
33+
### FAQ (Collapsible)
34+
![FAQ](assets/faq.png)
35+
36+
### Sign-up Form Validation
37+
![Form Validation](assets/form.png)
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

Comments
 (0)