<button id="review">Review Comment</button>

<dialog>
  <p>Either approve or deny this comment.</p>
  
  <button id="reject">Reject</button>
  <button id="approve">Approve</button>
</dialog>

<span id="message" hidden></span>

body {
  display: grid;
  gap: 1rem;
  place-items: center;
  min-height: 100vh;
}

[hidden] {
  display: none;
}

button {
  padding: .25rem .5rem;
}

div, dialog {
  padding: 3rem;
  text-align: center;
}
 
* {
  border-radius: 4px;
}

span {
  display: inline-block;
  background: green;
  color: white;
  padding: 1rem;
  font-size: 5rem;
}
const dialog = document.querySelector('dialog');
const message = document.getElementById('message');
const reviewButton = document.getElementById('review');
const rejectButton = document.getElementById('reject');
const approveButton = document.getElementById('approve');

const { promise, resolve, reject } = Promise.withResolvers();

reviewButton.addEventListener('click', () => dialog.show());
rejectButton.addEventListener('click', reject);
approveButton.addEventListener('click', resolve);

promise
  .then(() => {
     message.innerHTML = "You approved it!";
     message.style.background = "green";
     message.hidden = false;
  })
  .catch(() => {
     message.innerHTML = "You rejected it.";
     message.style.background = "red";
     message.hidden = false;
  }).finally(() => {
    reviewButton.remove();
    dialog.close();
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.