In website notification

<style>
  #notification {
    max-height: 200px;
    right: 20px;
    top: 20px;
    position: fixed;
    pointer-events: none;
  }

  .notification {
    width: 350px;
    border-radius: 8px;
    padding: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    animation-name: animationNotification;
    animation-duration: 4s;
  }

  .notification_success {
    background-color: rgba(0, 204, 0, 0.8);
    border: 1px solid rgba(0, 214, 0, 1);
    color: rgb(0, 128, 0);
    margin: 4px;
  }

  .notification_error {
    background-color: rgba(204, 0, 0, 0.8);
    border: 1px solid rgba(214, 0, 0, 1);
    color: rgb(102, 0, 0);
    margin: 4px;
  }

  @keyframes animationNotification {
    0% { opacity: 0; }
    10% { opacity: 0.8; }
    20% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }
</style>

<button class="btn btn-success" onclick="successNotification()">Success notification</button>
<button class="btn btn-danger" onclick="errorNotification()">Error notification</button>
<div id="notification">
  <span></span>
</div>
<script>
  let notification = document.querySelector("#notification");

  function successNotification() {
    notification.insertAdjacentHTML('afterbegin',
      '<p class="notification notification_success">Success notification</p>');
    notification.firstElementChild.addEventListener('animationend',
      function () {
        this.parentNode.removeChild(this)
      });
  }

  function errorNotification() {
    notification.insertAdjacentHTML('afterbegin',
      '<p class="notification notification_error">Error notification</p>');
    notification.firstElementChild.addEventListener('animationend',
      function () {
        this.parentNode.removeChild(this)
      });
  };
</script>