A modern, glassy, and interactive webpage that demonstrates how to use JavaScript Event Handling to make web pages dynamic and engaging.
This project changes the background color to a random gradient when a button is clicked — and includes advanced event-handling examples for a professional frontend learning experience.
✅ Click Event — Change background color to a random gradient
✅ Double-Click Event — Reset to the original background
✅ Mouseover & Mouseout — Neon glow animation on hover
✅ Keydown Event (Spacebar) — Trigger color change using keyboard
✅ Clipboard Interaction — Click the color text to copy gradient code
✅ Dynamic Text Feedback — Displays the current color gradient
✅ Glassy Neon UI — Smooth glassmorphism + gradient glow effects
✅ Responsive & Modern Design — Works on all screen sizes
| Concept | Description |
|---|---|
addEventListener() |
Attaches multiple event handlers dynamically |
click event |
Handles button clicks for color change |
mouseover / mouseout |
Adds and removes glow effects on hover |
dblclick |
Resets background to the default |
keydown |
Detects the Space key press to trigger the same action |
navigator.clipboard.writeText() |
Copies the color gradient to clipboard |
Math.random() |
Generates random color values |
template literals |
Used for dynamic text and color display updates |
- 🌈 Glassy (Frosted Glass) look using
backdrop-filter: blur(20px) - 💡 Gradient neon glow animation for modern UI
- 🎨 Dynamic background that updates smoothly with transitions
- 🖱️ Interactive hover, click, and key events for better UX
- 🌓 Minimal, elegant layout with Alfido Tech branding
| Technology | Purpose |
|---|---|
| HTML5 | Structure of the webpage |
| CSS3 | Glassmorphism, glow, and responsive styling |
| Vanilla JavaScript (ES6) | Event handling, DOM manipulation, and dynamic color generation |
- Clone or Download the Repository
git clone https://github.com/your-username/javascript-event-handling.git cd javascript-event-handling