When I first tried to create a simple toast notification using JavaScript, I failed miserably. And honestly, it’s supposed to be one of the easiest DOM tasks — just class toggling and a small timeout. But no, I kept messing up the timing, the CSS position, and even the event listener. So in this blog, I’m rewriting everything in the simplest way so that no one struggles like I did.

Small machine-coding tasks like toast notifications have been asked in past interviews at:

• Amazon (Junior frontend rounds)
• Swiggy
• Zoho
• Startups focusing on JavaScript fundamentals

These companies often test DOM manipulation, event handling, and timers, and a toast component covers all three.

Below is the HTML part we used:

<button id="opentoast" class="toast-btn">show me Toast</button>

<div class="toast-container" id="toast">
  <span class="toast-message">This is a toast notification!</span>
</div>

Why we add CSS classes & IDs? (Short Explanation)

• ID –> to select the exact element from JavaScript easily.
• CSS class –> to apply styling and to toggle visibility (show/hide) smoothly.
• This combination helps us control the toast fully through JS.

.toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px); /* hidden */
  background: #333;
  color: #fff;
  padding: 15px 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-size: 15px;
  transition: right 0.4s ease;
  z-index: 9999;
}

.toast-container.show {
  transform: translateX(-50%) translateY(0); /* visible */
}

• The toast starts hidden because of
  translateY(100px) –> it pushes the toast downward off-screen.
• When the .show class is added, translateY(0) –> brings it back to visible position.
• We use this trick instead of display: none, because transform gives us a smooth sliding animation.
• We will add and remove the .show class using JavaScript — that’s how the toast appears and disappears.

const toast = document.getElementById("toast");
const opentoast = document.getElementById("opentoast");

opentoast.addEventListener("click", () => {
  toast.classList.add("show");

  setTimeout(() => {
    toast.classList.remove("show");
  }, 3000);
});

• First, we catch the HTML elements using getElementById.
• On button click, we add the .show class –> toast becomes visible.
• setTimeout() waits 3 seconds and then removes the .show class –> toast slides back down and hides.

Because setTimeout helps your toast auto-hide after a fixed time.
Without it, the toast would stay on screen forever until you manually remove it.
Timeouts are extremely common in UI features like:

• Toast notifications
• Modals auto-close
• Tooltips
• Intro animations

So learning it properly is important for interview and real projects.

You can check the full working project in my CodeSandbox: Click Here

Creating a toast notification is a small thing, but the learning behind it is powerful — DOM control, class toggling, animations, and timeout handling. These are the fundamentals every frontend developer must master.

If you want to check more JavaScript interview questions and machine coding tasks, you can explore all of them here.

Please leave this field empty

Stay Ahead in Your Tech Career 🚀

We don’t spam! Read our privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.