ArticleZip > Show An Android Style Toast Notification Using Html Css Javascript

Show An Android Style Toast Notification Using Html Css Javascript

Toast notifications are a convenient way to display information to users in a non-intrusive manner. If you're a web developer looking to add an Android-style toast notification to your website or web application, you're in the right place! In this guide, we'll walk you through how to create a sleek and user-friendly toast notification using HTML, CSS, and JavaScript.

First things first, let's dive into the HTML structure. We'll keep it simple with just a `div` element that will serve as our toast container. You can place this `div` at the bottom of your web page where you want the notification to appear.

Html

<div class="toast" id="toast">
  Android-style toast notification
</div>

Next up, let's move on to styling our toast notification using CSS. We'll style the toast to look visually appealing and ensure it stands out to grab the user's attention. Here's a basic CSS snippet to get you started:

Css

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: none;
}

Now, let's add some interactivity to our toast notification using JavaScript. We'll write a simple function that will show the toast when called. You can customize this function further to add animations or additional features.

Javascript

function showToast(message) {
  const toast = document.getElementById('toast');
  toast.innerText = message;
  toast.style.display = 'block';

  // Hide the toast after 3 seconds
  setTimeout(() =&gt; {
    toast.style.display = 'none';
  }, 3000);
}

// Example: Show the toast notification with a sample message
showToast('Hello, this is a sample toast notification!');

You're all set! With just a few lines of code, you've successfully implemented an Android-style toast notification on your website. Feel free to customize the look and behavior of the toast to suit your needs. You can add animations, change colors, or even include buttons for user interaction.

Toast notifications are a great way to provide feedback or convey important information to your users without being too intrusive. Remember to keep the content concise and relevant to ensure a seamless user experience.

Hope this guide helps you enhance the user experience on your website with stylish toast notifications. Happy coding!

Related posts:

×