JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<button onclick="toastSuccess()">成功訂購商品</button>
<hr>
<button onclick="toastError()">訂購商品失敗</button>

<div class="toast toast-success">
  訂購成功！可以查看 Email 確認訂單細節！
</div>
<div class="toast toast-error">
  抱歉，訂購失敗！請稍後重新嘗試
</div>

CSS

.toast {
  opacity: 0;
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px 10px;
  transition: opacity 0.5s linear;
}
.toast.active {
    opacity: 1;
}
.toast-success {
  color: green;
}
.toast-error {
  color: red;
}

JavaScript

const successToastClassName = document.querySelector('.toast-success');
const errorToasttClassName = document.querySelector('.toast-error');

const toastSuccess = () =>  {
	successToastClassName.classList.add('active');
  setTimeout(function() {
  	successToastClassName.classList.remove('active');
  }, 5000);
}

function toastError() {
	errorToasttClassName.classList.add('active');
  setTimeout(function() {
  	errorToasttClassName.classList.remove('active');
  }, 5000);
}