In this project, we create a pop-up window with a blurred background effect. When you click on the join button, a pop-up window smoothly appears with an email input field. Clicking the close icon makes the pop-up window disappear, restoring the main website to its original state without any blurriness. We'll utilize CSS to apply transitions and blur effects to the background image, and JavaScript to add event listeners to the button and close icon.
Create these three files, copy the code into each one, then open index.html with Live Server.
background-image-scroll-effect/ ├── index.html ├── style.css └── index.js
<!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>Background Image Scroll Effect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="bg-image" id="bg-image"></div>
<div class="container">
<h1>Welcome to our website</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
provident veritatis quos dolorum repellendus officia voluptate veniam id
pariatur, maiores dolore libero nemo repudiandae facere reiciendis
quisquam? Deleniti, eius.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
provident veritatis quos dolorum repellendus officia voluptate veniam id
pariatur, maiores dolore libero nemo repudiandae facere reiciendis
quisquam? Deleniti, eius.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
provident veritatis quos dolorum repellendus officia voluptate veniam id
pariatur, maiores dolore libero nemo repudiandae facere reiciendis
quisquam? Deleniti, eius.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
provident veritatis quos dolorum repellendus officia voluptate veniam id
pariatur, maiores dolore libero nemo repudiandae facere reiciendis
quisquam? Deleniti, eius.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
provident veritatis quos dolorum repellendus officia voluptate veniam id
pariatur, maiores dolore libero nemo repudiandae facere reiciendis
quisquam? Deleniti, eius.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
provident veritatis quos dolorum repellendus officia voluptate veniam id
pariatur, maiores dolore libero nemo repudiandae facere reiciendis
quisquam? Deleniti, eius.
</p>
</div>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
%202.webp?alt=media&token=7ffdb0b5-c934-43e2-a7a1-029e283cce6f)
In this project, you will learn how to build a testimonial slider using HTML, CSS and JavaScript. We use a timer to change the sliders automatically and also we have added a bountiful animation showing the slides.
View project
This project aims to create a temperature converter for beginners. The final version of the project includes three inputs for Celsius, Fahrenheit, and Kelvin temperature formats. When you change any of these inputs, for example, if you choose 100 degrees Celsius, you will see the equivalent Celsius value in Fahrenheit and Kelvin formats. Additionally, if you change one input, you will see a real-time change inside the other inputs. For instance, changing the Fahrenheit input to 100 degrees will show you that it is equal to 37 degrees Celsius and 311 Kelvin. To create this project, we will learn how to use an "onchange" event listener to track changes inside the inputs. We will also use the switch statement to track changes based on the name of the input we are working on. Additionally, we will use CSS to give the project a modern look, inspired by newMorphISM design. In summary, this project will help us learn how to create a temperature converter using JavaScript and CSS, and we will learn how to track changes using event listeners and switch statements.
View project
In this project, we create a rock, paper, and scissors game. The computer will also choose a random option, and the results will be displayed. You can win, lose, or tie. Scores are tracked at the bottom. We'll use HTML for structure, CSS for a modern look, and JavaScript to generate the computer's choice and compare the results. This game is an interactive way to test your luck and strategy against a computer opponent.
View project