Best matchRelated: JavaScript calculations
Animated Search Bar
Turn JavaScript calculations into clear visual results.
Build an animated search bar →Blurred Background Popup
Build a blurred background popup with HTML, CSS, and JavaScript while practicing click events and DOM selection.
Beginner20–30 minutesHTML5CSS3JavaScript
You’ll practice
Click EventsDOM SelectionCSS Class Toggling
01 — What you’ll build
Blurred Background Popup
This project shows you how HTML, CSS, and JavaScript work together in a blurred background popup. You’ll open and close a focused popup while keeping the page state organized, then practice click events, DOM selection, and CSS class toggling as you build the complete project from scratch.
02 — Included
- Click-based interactions
- Blurred Background Popup interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Handle user clicks
- Select HTML elements from the DOM
- Change styles by updating CSS classes
- Perform calculations with JavaScript
Recommended knowledge: Basic HTML and CSS, JavaScript variables and number operations, DOM selection and click events, CSS classes and DOM selection.
Complete project files
Build It from the Source Code
This project runs directly in the browser with HTML, CSS, and JavaScript.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for external assets.
Project structure
blurred-background-popup/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blurred Background Popup</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Welcome to our website</h1>
<button class="btn">Click to join</button>
</div>
<div class="popup-container active">
<h4>20% OFF Offer</h4>
<label for="email">Your Email</label>
<input
type="email"
name="email"
class="input"
placeholder="Enter Your Email"
/>
<button class="popup-btn">Join</button>
<div class="close-icon">
<i class="fas fa-times fa-2x"></i>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice javaScript calculations, click events, and cSS Class Toggling with these related projects.
Best match
Related: click eventsBeginner
Background Video
Connect user clicks to visible interface changes.
Build a background video →
Related: CSS Class Toggling
Emoji Rating
Change interface states by adding and removing CSS classes.
Build an emoji rating →Related: JavaScript calculationsBest match
Animated Search Bar
Turn JavaScript calculations into clear visual results.
Build an animated search barRelated: click events
Background Video
Connect user clicks to visible interface changes.
Build a background videoRelated: CSS Class Toggling
Emoji Rating
Change interface states by adding and removing CSS classes.
Build an emoji rating