<h1>Click to Roll the dice</h1>

<div id="first" class="dice first">
  <div class="dot"></div>
</div>

<div id="second" class="dice second hide">
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="third" class="dice third hide">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="forth" class="dice forth hide">
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

<div id="fifth" class="dice fifth hide">
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="column">
    <div class="dot"></div>
  </div>
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

<div id="sixth" class="dice sixth hide">
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

body {
  background-color: #aeb8fe;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100vh;
  margin: 0;
}

h1 {
  margin: 2em auto;
}

.dice {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  background-color: #efe5dc;
  margin: 2em;
  padding: 15px;
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background-color: black;
}

/* 1st */
.first {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2nd */
.second {
  display: flex;
  justify-content: space-between;
}

.second .dot:nth-of-type(2) {
  align-self: flex-end;
}

/* 3rd */
.third {
  display: flex;
  justify-content: space-between;
}
.third .dot:nth-of-type(2) {
  align-self: center;
}

.third .dot:nth-of-type(3) {
  align-self: flex-end;
}

/* 4th, 5th, 6th */
.forth,
.fifth,
.sixth {
  display: flex;
  justify-content: space-between;
}

.forth .column,
.fifth .column,
.sixth .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fifth .column:nth-of-type(2) {
  align-self: center;
}

.hide {
  display: none;
}

.show {
  display: flex;
}

const body = document.body;
const min = 1;
const max = 6;

const first = document.getElementById("first");
const second = document.getElementById("second");
const third = document.getElementById("third");
const forth = document.getElementById("forth");
const fifth = document.getElementById("fifth");
const sixth = document.getElementById("sixth");

body.addEventListener("click", function () {
  let randomNum = Math.floor(Math.random() * max) + min;
  console.log(randomNum);

  // mapping dice faces
  let diceFaces = [
    { id: 1, el: first },
    { id: 2, el: second },
    { id: 3, el: third },
    { id: 4, el: forth },
    { id: 5, el: fifth },
    { id: 6, el: sixth }
  ];

  // show random number with faces
  diceFaces.map((face) => {
    if (randomNum === face.id) {
      face.el.classList.add("show");
      face.el.classList.remove("hide");
    } else {
      face.el.classList.add("hide");
      face.el.classList.remove("show");
    }
  });
});