Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ How To Create A Toast Notification in Javascript

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š How To Create A Toast Notification in Javascript


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

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.

<!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.

/* 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.

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.

...



๐Ÿ“Œ What is toast notification? Implement react native toast message


๐Ÿ“ˆ 54.78 Punkte

๐Ÿ“Œ How To Create A Toast Notification in Javascript


๐Ÿ“ˆ 49.21 Punkte

๐Ÿ“Œ Discounter bieten das beste Toast: Vollkorn-Toast bei ร–KO-TEST


๐Ÿ“ˆ 42.2 Punkte

๐Ÿ“Œ How To Show A Custom Toast Notification On Windows 10


๐Ÿ“ˆ 33.68 Punkte

๐Ÿ“Œ How To Show A Custom Toast Notification On Windows 10


๐Ÿ“ˆ 33.68 Punkte

๐Ÿ“Œ How to Create Toast Notifications in a React Applications


๐Ÿ“ˆ 28.82 Punkte

๐Ÿ“Œ DNN up to 9.3.x Admin Notification notification cross site scripting


๐Ÿ“ˆ 25.15 Punkte

๐Ÿ“Œ Google Android 8.0/8.1/9.0/10.0/11.0 Notification Notification.java Message/toBundle resource consumption


๐Ÿ“ˆ 25.15 Punkte

๐Ÿ“Œ Nextcloud Server up to 20.0.5 Notification OC.Notification.show cross site scripting


๐Ÿ“ˆ 25.15 Punkte

๐Ÿ“Œ CVE-2024-0625 | WPFront Notification Bar up to 3.3.2 on WordPress wpfront-notification-bar-options[custom_class] cross site scripting


๐Ÿ“ˆ 25.15 Punkte

๐Ÿ“Œ How To Create a Calculator Using HTML CSS & JavaScript | Simple Calculator in JavaScript


๐Ÿ“ˆ 23.34 Punkte

๐Ÿ“Œ Twitter Is 'Toast' and the Stock Is Not Even Worth $10, Says Analyst


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Twitter Is 'Toast' and the Stock Is Not Even Worth $10, Says Analyst


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ A Toast to Kerberoast


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Windows 10 Herbst-Update: Toast-Benachrichtigung wird interaktiv


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Windows 10 Herbst-Update: Toast-Benachrichtigung wird interaktiv


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ โ€žToast Overlayโ€œ-Angriffe: Palo Alto rรคt Android-Nutzern dringend zum Update


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Hard Drive Recovery: Yup this thing is toast...


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Roxio Toast 7 memory corruption [CVE-2006-4801]


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Toast launches rustic wood covers for Razer Blade 15 Advanced


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Young Sheldon Staffel 2: Das passiert in der finalen Episode 22 โ€œA Swedish Science Thing and the Equation for Toastโ€


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ "Toast" Vulnerability in Android Allowed for New Overlay Attacks


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Android Malware Exploits Recently Patched 'Toast' Flaw


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ How to Block Toast Notifications on Windows 10 April 2018 Update


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Itโ€™s a SCAM: Send Bitcoin or your companyโ€™s reputation is TOAST!


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Synology Drive up to 1.0.2 File Sharing Notify Toast File Name cross site scripting


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Toast Wallet 3.0.0 Englisch


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Materialize up to 1.0.0 Toast cross site scripting


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ The Toast Leather Cover for Surface Book is ... almost great


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Deck out your Surface Pro X with these new wood covers from Toast


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Toast's wooden Surface Go 2 skins will grow on you


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Nextcloud Dialogs Library up to 3.1.1 on npm Toast cross site scripting


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ Undercooked fast food burgers are toast with robot AI


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ POS pleasure: How Toast (and tacos) converted me to the joy of iOS App Clips


๐Ÿ“ˆ 21.1 Punkte

๐Ÿ“Œ iOS App Clips: How Toast (and tacos) made me love Apple's lightweight app code


๐Ÿ“ˆ 21.1 Punkte











matomo