<div id="container">
  <label for="input">Number of dice</label><br />
  <input type="number" id="input" name="input" min="1" max="99"><br />
  <button onclick="rollClick()">Roll</button>
</div>
<div id="grid"></div>
#container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}
#input {
  width: 100px;
}
#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  margin: 20px;
}
.dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}
.face-1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.face-2 {
  display: flex;
  justify-content: space-between;
}
.face-2 span {
  margin: 10px;
}
.face-2 span:nth-child(2) {
  align-self: flex-end;
}
.face-3 {
  display: flex;
  justify-content: space-between;
}
.face-3 span {
  margin: 10px;
}
.face-3 span:nth-child(2) {
  align-self: center;
  margin: 0;
}
.face-3 span:nth-child(3) {
  align-self: flex-end;
}
.face-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.face-4 span {
  justify-self: center;
  align-self: center;
}
.face-5 {
  display: grid;
}
.face-5 .col {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.face-5 .col:nth-child(2) {
  justify-content: center;
  align-items: center;
  padding: 0;
}
.face-5 .col:last-child span {
  align-self: flex-end;
}
.face-6 {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(2, 1fr);
}
.face-6 span {
  justify-self: center;
  align-self: center;
}
/*
* https://frontendeval.com/questions/rolling-dice
*
* Create a dice roller application that can roll anywhere from 1-99 six-sided dice
*/
const grid = document.getElementById('grid');
const input = document.getElementById('input');

function rollClick() {
    grid.innerHTML = ''; // remove all children
    const val = input.value;

    if (val !== '' && val > 0 && val < 100) {
        for (let i = 0; i < val; i++) {
            const dice_container = document.createElement('div');
            dice_container.style.display = 'flex';
            dice_container.style.justifyContent = 'center';

            dice_container.appendChild(drawDice(random()));
            grid.appendChild(dice_container);
        }
    }
}

function random() {
    return Math.floor(Math.random() * 6) + 1;
}

function drawDice(n) {

    const dice = document.createElement('div');
    dice.style.width = '100px';
    dice.style.height = '100px';
    dice.style.border = '1px solid black';
    dice.style.borderRadius = '10px';

    dice.classList.add(`face-${n}`);

    // n = 5
    const col_1 = document.createElement('div');
    const col_2 = document.createElement('div');
    const col_3 = document.createElement('div');

    col_1.classList.add('col');
    col_2.classList.add('col');
    col_3.classList.add('col');

    for (let i = 0; i < n; i++) {
        if (n === 5) {
            const span = document.createElement('span');
            span.classList.add('dot');

            if (i === 0 || i === 1) col_1.appendChild(span);
            else if (i === 2) col_2.appendChild(span);
            else if (i === 3 || i === 4) col_3.appendChild(span);

            if (i === 1) dice.appendChild(col_1);
            else if (i === 2) dice.appendChild(col_2);
            else if (i === 4) dice.appendChild(col_3);
        } else {
            const span = document.createElement('span');
            span.classList.add('dot');
    
            dice.appendChild(span);
        }
    }

    return dice;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.