How To Create A Toast Notification in Javascript
Tags: webdev, javascript, beginners, tutorial
Published: 2023-01-12 20:53:53

## What is this article about?
A toast notification is a simple way to provide essential information to the user. It is a small message that appears on the screen for a short period.
In this article, you'll learn how to build a toast notification using pure HTML, CSS, and JS. No library is included.

## Steps to follow

1. Create a `index.html` file
2. Create a `style.css` file
3. Create a `script.js` file

To get started, add the following code to your HTML file. This HTML code will create five buttons to click for the toast notification. Afterward, we will dynamically add a toast `li` element in the notification `ul` using JavaScript.

```html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Toast Notification In Javascript</title>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Font Awesome icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    />
    <script src="script.js" defer></script>
  </head>
  <body>
    <ul class="notifications"></ul>
    <div class="buttons">
      <button class="btn" id="error">Error</button>
      <button class="btn" id="warning">Warning</button>
      <button class="btn" id="info">Info</button>
      <button class="btn" id="success">Success</button>
      <button class="btn" id="random">Random</button>
    </div>
  </body>
</html>
```
Following add the following CSS code to your CSS file. These codes are for styling the toast notification. Feel free to customize the design to suit your tastes.

```css
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  --dark: #78fad1;
  --light: #ffffff;
  --success: #0abf30;
  --error: #e24d4c;
  --warning: #e9bd0c;
  --info: #3498db;
  --random: #eb43ff;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--dark);
}
.notifications {
  position: fixed;
  top: 30px;
  right: 20px;
}
.notifications :where(.toast, .column) {
  display: flex;
  align-items: center;
}
.notifications .toast {
  width: 400px;
  position: relative;
  overflow: hidden;
  list-style: none;
  border-radius: 4px;
  padding: 16px 17px;
  margin-bottom: 10px;
  background: var(--light);
  justify-content: space-between;
  animation: show_toast 0.3s ease forwards;
}
@keyframes show_toast {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-10px);
  }
}
.notifications .toast.hide {
  animation: hide_toast 0.3s ease forwards;
}
@keyframes hide_toast {
  0% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(calc(100% + 20px));
  }
}
.toast::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  animation: progress 5s linear forwards;
}
@keyframes progress {
  100% {
    width: 0%;
  }
}
.toast.success::before,
.btn#success {
  background: var(--success);
}
.toast.error::before,
.btn#error {
  background: var(--error);
}
.toast.warning::before,
.btn#warning {
  background: var(--warning);
}
.toast.info::before,
.btn#info {
  background: var(--info);
}
.toast.random::before,
.btn#random {
  background: var(--random);
}
.toast .column i {
  font-size: 1.75rem;
}
.toast.success .column i {
  color: var(--success);
}
.toast.error .column i {
  color: var(--error);
}
.toast.warning .column i {
  color: var(--warning);
}
.toast.info .column i {
  color: var(--info);
}
.toast.random .column i {
  color: var(--random);
}
.toast .column span {
  font-size: 1.07rem;
  margin-left: 12px;
}
.toast i:last-child {
  color: #aeb0d7;
  cursor: pointer;
}
.toast i:last-child:hover {
  color: var(--dark);
}
.buttons .btn {
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0 5px;
  color: var(--light);
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 4px;
}

@media screen and (max-width: 530px) {
  .notifications {
    width: 95%;
  }
  .notifications .toast {
    width: 100%;
    font-size: 1rem;
    margin-left: 20px;
  }
  .buttons .btn {
    margin: 0 1px;
    font-size: 1.1rem;
    padding: 8px 15px;
  }
}
```
Ultimately, paste the following javascript code to your script.js file.

```js
const notifications = document.querySelector(".notifications"),
  buttons = document.querySelectorAll(".buttons .btn")

const toastDetails = {
  timer: 5000,
  success: {
    icon: "fa-circle-check",
    text: "Hello World: This is a success toast.",
  },
  error: {
    icon: "fa-circle-xmark",
    text: "Hello World: This is an error toast.",
  },
  warning: {
    icon: "fa-triangle-exclamation",
    text: "Hello World: This is a warning toast.",
  },
  info: {
    icon: "fa-circle-info",
    text: "Hello World: This is an information toast.",
  },
  random: {
    icon: "fa-solid fa-star",
    text: "Hello World: This is a random toast.",
  },
}

const removeToast = (toast) => {
  toast.classList.add("hide")
  if (toast.timeoutId) clearTimeout(toast.timeoutId)
  setTimeout(() => toast.remove(), 500)
}

const createToast = (id) => {
  const { icon, text } = toastDetails[id]
  const toast = document.createElement("li")
  toast.className = `toast ${id}`
  toast.innerHTML = `<div class="column">
                         <i class="fa-solid ${icon}"></i>
                         <span>${text}</span>
                      </div>
                      <i class="fa-solid fa-xmark" onclick="removeToast(this.parentElement)"></i>`
  notifications.appendChild(toast) 
  toast.timeoutId = setTimeout(() => removeToast(toast), toastDetails.timer)
}

buttons.forEach((btn) => {
  btn.addEventListener("click", () => createToast(btn.id))
})
```
This Javascript code first defines an object called `toastDetails` that contains details for different toasts, including a **timer** for how long the toast should be displayed and information for each type of toast, such as an icon and text.

The code then defines two functions: `removeToast` and `createToast`. The `removeToast` function is used to remove a toast from the **DOM** by adding a `hide` class to the toast element, clearing any timeout that was set to release the toast, and then removing the element from the DOM after a delay of **500ms**. 

The `createToast` function is used to create a new toast element, setting its classes and innerHTML based on the type of toast specified by the id passed as an argument and appending it to the notifications element.

Finally, the code adds a click event listener to each button so that when a button is clicked, it will call the `createToast` function and pass the id of the clicked button as an argument.

---

## Conclusion
That's all. Congratulations!🥂 You successfully created your Toast Notification in HTML, CSS, and JavaScript. If you encounter any problems or your code is not working as expected, feel free to ask in the comment section.