Making Toast using CSS and javascript

To create a toast message in JavaScript, you can use a combination of HTML, CSS, and JavaScript. Here is an example of how you can do this:

<!-- Add a container for the toast message -->

<div id="toast-container"></div>


<style>

  /* Add some basic styles for the toast message */

  .toast {

    background-color: #333;

    color: #fff;

    padding: 20px;

    border-radius: 5px;

    font-size: 14px;

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 999;

  }


  /* Add a transition to fade the toast in and out */

  .toast.show {

    animation: fadein 0.5s, fadeout 0.5s 2.5s;

  }


  @keyframes fadein {

    from { bottom: 0; opacity: 0; }

    to { bottom: 20px; opacity: 1; }

  }


  @keyframes fadeout {

    from { bottom: 20px; opacity: 1; }

    to { bottom: 0; opacity: 0; }

  }

</style>


<script>

  function showToast(message) {

    // Create the toast element

    var toast = document.createElement("div");

    toast.classList.add("toast");

    toast.innerHTML = message;


    // Add the toast to the container

    document.getElementById("toast-container").appendChild(toast);


    // Show the toast for 3 seconds

    toast.classList.add("show");

    setTimeout(function() {

      toast.classList.remove("show");

    }, 3000);

  }

</script>

This code will create a function called showToast that takes a message as an argument and displays it as a toast message for 3 seconds. The toast message will appear at the bottom of the screen and fade in and out.


To show a toast message, you can call the showToast function and pass in the message that you want to display. For example:

showToast("Hello, world!");


This will display the toast message "Hello, world!" for 3 seconds. 

Comments

Post a Comment

Popular posts from this blog

Attack on Titan Final Episode Released! Dub Coming Soon

  Attack on Titan Final Episode Released! Dub Coming Soon The final episode of Attack on Titan, Attack on Titan Final Season THE FINAL CHAPTERS Special 2, was released on November 4, 2023. The English dub of the final episode is expected to be released a few weeks later, but an exact date has not yet been announced. In the meantime, fans can watch the final episode subtitled in English on Crunchyroll, Funimation, and other streaming platforms. Attack on Titan is one of the most popular anime series of all time, and its final season has been highly anticipated by fans. The series follows the story of Eren Yeager and his friends as they fight to survive in a world where humanity is constantly under threat from giant, human-eating Titans. The final episode is expected to be a thrilling and emotional conclusion to the series, and fans are eagerly awaiting its release. **Stay tuned for more updates on the release date of the English dubbed version of the final episode!** **#AttackOnTita...
Read more

AAAA

// Get all form elements var forms = document.getElementsByTagName("form"); // Create an empty list to store the forms var formList = []; // Loop through the forms and add their ID to the list for (var i = 0; i < forms.length; i++) {   formList.push(forms[i].id); } console.log(formList); // Get the form element by its ID var form = document.getElementById("myForm"); // Create an empty 2D list to store the elements' type and id var elementsList = []; // Loop through the form elements and add their type and id to the list for (var i = 0; i < form.elements.length; i++) {   elementsList.push([form.elements[i].type, form.elements[i].id]); } console.log(elementsList);  // Get the form element by its ID var form = document.getElementById("myForm"); // Get the input elements by their name var inputName = form.elements.name; var inputEmail = form.elements.email; var inputPhone = form.elements.phone; // Set the values for the input elements inputName.value...
Read more