<div class="container">
  <button type="button" id="showToastBtn">Show Toast</button>
</div>

body {
  background: #f8f8f8;
}

.container {
  max-width: 767px;
  margin: 6rem auto;
  display: flex;
  justify-content: center;
}

#showToastBtn {
  background: navy;
  color: white;
  border: none;
  appearance: none;
  padding: 1rem 2rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1.2rem;
}

#showToastBtn:hover {
  filter: brightness(90%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

#toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 40px;
  background-color: #28a745;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

#toast.show {
  opacity: 1;
}

class Toast {
  constructor(message) {
    this.message = message
    this.toast = document.createElement("div")
    this.toast.id = "toast"
    this.toast.innerHTML = `<p>${this.message}</p>`
    document.body.appendChild(this.toast)
    this.toastBtn = document.getElementById("showToastBtn")
    this.toastBtn.addEventListener("click", () => this.show())
  }

  show() {
    this.toast.classList.add("show")
    setTimeout(() => {
      this.toast.classList.remove("show")
    }, 3000) // Hide after 3 seconds
  }
}

const myToast = new Toast("This is a toast notification!")