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.