<div class="card">
  <p class="question">Would you like to try your luck in a throw of the dice?</p>
  <p>Everyone has a chance to win.</p>
  <button id="showDialogBtn">Yes, let's give it a try</button>
</div>

<dialog id="favDialog">
  <form method="dialog">
    <p class="won">You have won! Congratulations!</p>
    <p class="lost">I am sorry to say, but you have lost...</p>
    <button id="closeBtn">Close dialog</button>
  </form>
</dialog>

.card {
  text-align: center;
  width: 80%;
  background-color: bisque;
  padding: 1em;
  font-weight: bold;
}

dialog::backdrop {
  background-color: grey;
}

.won {
  font-weight: bold;
  color: deeppink;
  font-size: 1.3em;
  text-align: center;
}

const showDialogBtn = document.getElementById('showDialogBtn');
const favDialog = document.getElementById('favDialog');

function rollDice() {
  return Math.floor(Math.random() * 3) === 0;
}

function changeHidden(className, hidden) {
  const elements = document.getElementsByClassName(className);
  for (const e of elements) {
    if (hidden) {
      e.classList.add('hidden');
    } else {
      e.classList.remove('hidden');
    }
  }
}

showDialogBtn.addEventListener('click', () => {
  const won = rollDice();
  changeHidden('won', !won);
  changeHidden('lost', won);
  favDialog.showModal();
});