Creating a Confetti Effect from Scratch using HTML, CSS, and JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2023-05-05 09:00:00

## ✋🏽 Introduction
Confetti is a popular visual effect used in many web applications to celebrate special events such as birthdays, weddings, and other milestones. It involves a colorful explosion of tiny pieces of paper or shapes that create a fun, festive environment. For example, once you post an article on hashnode, you’ll get a confetti effect.

In this tutorial, we will learn how to create a confetti effect from scratch using HTML, CSS, and JavaScript. We will create a reusable function that will be called to generate confetti on any page or element on the web. Sounds fun right, Let’s dive right into it 😉

## 🧰 **Prerequisites**
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript(I’ll still explain everything in depth though). You should also have a code editor installed on your computer, such as Visual Studio Code or any other text editor that you use.

## 🏚️ HTML CODE 👇🏽
Let's start by creating a basic HTML file and adding a div element that will be used to display the confetti effect.

```

    <div id="confetti-container">
      <div class="card">
        <p>Congratulations, you have successfully created a confetti</p>
      </div>
    </div>
```

From the code above, we created a `div` element with the `id` of `confetti-container`. It is a container for the confetti effect that we'll be creating later in the JavaScript code.

We also created another element with a class of `card`. This is the container for the text "Congratulations, you have successfully created a confetti".

And finally, we created a `p` element with the text "Congratulations, you have successfully created a confetti". This text is contained within the `div` element with the class of `card`.

What I just explained is the part that is more important in the code. But here is the HTML code in full 👇🏽

```
<!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>How to create a confetti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="confetti-container">
      <div class="card">
        <p>Congratulations, you have successfully created a confetti</p>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>
```

## 🏡 CSS CODE
We will be creating the CSS styles that will be used to display the confetti effect.

The CSS style looks a bit lengthy, But let’s break it down into different parts for easier understanding.

First, We will use the CSS reset (`*`) to set the margin and padding of all the elements to 0, change the box-sizing property to content-box, and hides any overflow. Here is the code 👇🏽

```
* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  overflow: hidden;
}
```
After that, we’ll so set the background color of the body element to a dark gray color (#333). 👇🏽

```
body {
  background-color: #333;
}
```
We will now style the **`#confetti-container`** element, which contains the confetti animation. We’ll give it a **`position`** of **`absolute`** to position it relative to the nearest positioned ancestor. The **`top`** and **`left`** properties will be set to 0 to position it at the top left corner of the page. We’ll give it a  **`width`** of 100% to make it span the full width of the page. We’ll also set **`display`**  to **`flex`** to make it a flex container, allowing us to easily center its child elements. The **`align-items`** and **`justify-content`** properties will be set to **`center`** to center its child elements vertically and horizontally. Finally, we’ll set the **`height`** to **`100vh`** to make it fill the entire viewport height. 👇🏽

```
#confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
```
We will now style the **`.card`** element, which contains the congratulatory message. We’ll give it a **`background-color`** of white (#fff) to provide a clean background for the message. The **`max-width`** will be set to 700px to limit its width and make it more readable. We’ll also set **`border-radius`** property to 10px to round the corners of the card. We’ll give it a **`box-shadow`** to give the card some depth. Finally, we’ll set the **`padding`**  to 2rem to add some spacing between the card and its contents. 👇🏽

```
.card {
  background-color: #fff;
  max-width: 700px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 2rem;
}
```

Next, we are going to style the  **`.card p`** selector that targets the paragraph element within the **`.card`** element. We’ll give it a **`font-size`** of 1.2rem to make the text slightly larger than the default size. The **`text-align`** will be set to **`center`** to center the text within the card. **`margin`** and **`padding`** will be set to 0 and 10px, respectively, to remove any extra space around the paragraph and add some space between it and the card's border. 👇🏽

```
.card p {
  font-size: 1.2rem;
  text-align: center;
  margin: 0;
  padding: 10px;
}
```
We’ll add some styles to **`.confetti`** class that will be used to style the confetti elements that will be created dynamically by JavaScript. First of, we are going to set the **`position`** property to **`absolute`**, so that the confetti elements are positioned independently of their parent elements. The **`top`** property will be set to **`0`**, so that the confetti elements are positioned at the top of their parent elements. We’ll also give it a  **`font-size`** of  **`1.6rem`** to give the confetti elements a larger size. Lastly, we will create an **`animation`** property that will be used to apply the **`confetti-fall`** animation to the confetti elements. 👇🏽

```
.confetti {
  position: absolute;
  top: 0;
  font-size: 1.6rem;
  animation: confetti-fall linear 5s infinite;
}
```
The **`linear`** value of the **`animation`** property is used to set the timing function of the animation to linear, which means that the confetti elements will move at a constant speed. The **`5s`** value sets the duration of the animation to 5 seconds, and the **`infinite`** value sets the animation to repeat indefinitely.

Finally, We’ll add some styles to the animation `confetti-fall` that we created earlier using the `@keyframes` rule. We are going to use `transform` property to move the confetti elements down the screen and rotate them. The `transform` property will have two keyframes: `0%` and `100%`. We will also add two `transform` functions to the `transform` property which are `translateY` and `rotate`

At **`0%`**, the confetti elements will be positioned at the top of their parent element and rotated 0 degrees. The **`translateY`** property of the **`transform`** rule will be set to **`-100%`** so that the confetti elements start outside of their parent element and move down.

At **`100%`**, the confetti elements will be positioned at the bottom of their parent element and rotated 180 degrees. The **`translateY`** property will be set to **`100vh`**, which is the height of the viewport. This means that the confetti elements will continue to fall beyond the height of their parent element and disappear from view. Here is the code 👇🏽

```
@keyframes confetti-fall {
  0% {
    transform: translateY(-100%) rotate(0);
  }
  100% {
    transform: translateY(100vh) rotate(180deg);
  }
}
```
Here is the CSS code in full 👇🏽

```
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  overflow: hidden;
}

body {
  background-color: #333;
  font-family: 'Poppins', sans-serif;
}

#confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.card {
  background-color: #fff;
  max-width: 700px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 2rem;
}

.card p {
  font-size: 1.2rem;
  text-align: center;
  margin: 0;
  padding: 10px;
}

.confetti {
  position: absolute;
  top: 0;
  font-size: 1.6rem;
  animation: confetti-fall linear 5s infinite;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100%) rotate(0);
  }
  100% {
    transform: translateY(100vh) rotate(180deg);
  }
}
```
Honestly, I did not really expect this explanation to be this long 😅. Thumbs up 👍🏽 to you if you still reading the article.

## 🏗️ JAVASCRIPT CODE
The JavaScript code will be responsible for creating and showing confetti on the web page. We will also explain each line of code step by step, so it's easy to follow.

Firstly, we are going to create a variable **`confettiContainer`** that gets the HTML element with an ID of "confetti-container". This element is the container where the confetti will be displayed. The **`document.quereSelector()`** method is used to get the container element from the HTML document.

```
const confettiContainer = document.querySelector('#confetti-container');
```
Next step, we are going to create a function called **`showConfetti()`**. This function will be responsible for creating the confetti elements and appending them to the container.

```
const showConfetti = () => {
  const confetti = document.createElement('div');
  confetti.textContent = '🎉';
  confetti.classList.add('confetti');
  confetti.style.left = Math.random() * innerWidth + 'px';
  confettiContainer.appendChild(confetti);
  
  setTimeout(() => {
    confetti.remove();
  }, 5000);
};
```
In the above function, the code creates a new **`div`** element using the **`createElement()`** method. It sets the **`textContent`** property of the element to "🎉", which is the Unicode character for a confetti emoji. The element is then given the CSS class "confetti" using the **`classList.add()`** method.

The next line of code **`confetti.style.left = Math.random() * innerWidth + 'px';`** sets the horizontal position of the confetti element randomly using the **`Math.random()`** function. The **`innerWidth`** property returns the width of the browser window. By multiplying **`Math.random()`** with **`innerWidth`**, the confetti will be placed randomly between 0 and the width of the browser window. The position is set in pixels using the **`px`** unit.

The **`appendChild()`** method is used to add the confetti element to the **`confettiContainer`** element, making it visible on the webpage.

The last part of the **`showConfetti()`** function sets a timeout of 5 seconds using the **`setTimeout()`** method. After 5 seconds, the confetti element is removed from the HTML document using the **`remove()`** method.

Finally,  we are going to set up a loop that repeatedly calls the **`showConfetti()`** function every 400 milliseconds using the **`setInterval()`** method. 👇🏽

```
setInterval(() => {
  showConfetti();
}, 400);
```

Here is the JavaScript code in full 👇🏽

```
const confettiContainer = document.querySelector('#confetti-container');
const showConfetti = () => {
  const confetti = document.createElement('div');
  confetti.textContent = '🎉';
  confetti.classList.add('confetti');
  confetti.style.left = Math.random() * innerWidth + 'px';
  confettiContainer.appendChild(confetti);

  setTimeout(() => {
    confetti.remove();
  }, 5000);
};

setInterval(() => {
  showConfetti();
}, 400);
```
## CONCLUSION
Congrats on getting to the end of this article 🎉(A confetti 😅). Hope you learned something from this article. You can get the code for this project from [Codepen](https://codepen.io/lawrence-stixx/pen/KKGyxQP). Till next time 🙂

https://www.buymeacoffee.com/devlawrence