Alert on load

HTML

<main>
  <h1>Alert on load</h1>
  <div class="notification" role="region" aria-label="Notification">
    <div role="alert" id="js-repeater">
      <h2>Warning!</h2>
      <p>This is a test notification.</p>
    </div>
    <button type="button" class="close-notification">Close</button>
  </div>
</main>

CSS

.notification.closed {
  display: none;
}

JavaScript

const notificationButton = document.querySelector('.close-notification');
const notificationRemoval = document.querySelector('.notification');
const notificationRepeater = document.querySelector('#js-repeater');

if (notificationButton) {
  notificationButton.addEventListener("click", function() {
    notificationRemoval.classList.add('closed')
  });
}

if (notificationRepeater) {
  const cache = notificationRepeater.innerHTML;
  setTimeout(function() {
    notificationRepeater.innerHTML = '';
    notificationRepeater.innerHTML = cache;
  }, 300);
}