<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>

    <section>
        <h1>Number of dice</h1>
        <form>
            <input type="number" placeholder="#" name="numberOfDice" min="1" max="99">
            <button>Roll</button>
        </form>

        <div id="allDices">
        </div>
    </section>






    <script src="app.js"></script>
</body>

</html>
// CSS Rest

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  width: 100%;
}

/* —————————————————————————————————— */

section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

form {
  width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

input,
button {
  display: block;
}

button {
  width: 100%;
}

#allDices {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  justify-items: center;
  align-items: center;
}

.dice {
  width: 80%;
}

const form = document.querySelector("form");
const dicesList = document.querySelector("#allDices");

function clearDice() {
  const allDisplayedDices = document.querySelectorAll("#allDices img");
  allDisplayedDices.forEach((element) => {
    element.remove();
  });
}

const diceImageUrl = [
  "https://i.ibb.co/X4v0cx6/Dice-1.png",
  "https://i.ibb.co/XDLjwCx/Dice-2.png",
  "https://i.ibb.co/fvsX9NM/Dice-3.png",
  "https://i.ibb.co/0c5b4Wv/Dice-4.png",
  "https://i.ibb.co/N942gWG/Dice-5.png",
  "https://i.ibb.co/2jVqvWy/Dice-6.png",
];

function addDice(num) {
  for (let i = 0; i < num; i++) {
    let randomNum = Math.floor(Math.random() * 6);
    const newImage = document.createElement("img");
    newImage.classList.add("dice");
    newImage.setAttribute("src", diceImageUrl[randomNum]);
    dicesList.append(newImage);
  }
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  clearDice();
  addDice(form.elements.numberOfDice.value);
  form.elements.numberOfDice.value = "";
});
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.