Show dice element corresponding to random number generated on click

Question

I was trying to make a dice random, and I created different faces of it by using HTML and CSS. Now I cannot hide them. I want to show only one face of the die at a time. How can I call a single face on random numbers from 1 to 6 and in javascript I tried onclicking a button to change the border color. How can I link CSS, HTML and javascript so that on clicking it shows one of the face designed through CSS?

HTML

function roll() {
  var die = Math.floor(Math.random() * 6) + 1;
  $('#die').removeAttr('class').addClass('die' + die);
}

#die {
  width: 30px;
  border: 5px solid black;
  padding: 25px;
  margin: 25px;
}

#die.die1 {
  width: 30px;
  border: 5px solid green;
  padding: 25px;
  margin: 25px;
}

#die.die2 {
  width: 30px;
  border: 5px solid pink;
  padding: 25px;
  margin: 25px;
}

#die.die3 {
  width: 30px;
  border: 5px solid violet;
  padding: 25px;
  margin: 25px;
}

#die.die4 {
  width: 30px;
  border: 5px solid yellow;
  padding: 25px;
  margin: 25px;
}

#die.die5 {
  width: 30px;
  border: 5px solid red;
  padding: 25px;
  margin: 25px;
}

#die.die6 {
  width: 30px;
  border: 5px solid blue;
  padding: 25px;
  margin: 25px;
}

.dice {
  border: solid 3px #aaa;
  border-radius: 3px;
  display: block;
  width: 100px;
  height: 100px;
  margin: 7px auto;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}

.dice .dot {
  border-radius: 50%;
  position: absolute;
  width: 15px;
  height: 15px;
  background: #000;
}

.dice:first-child .dot {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(2) .dot:first-child {
  top: 20px;
  left: 20px;
}

.dice:nth-child(2) .dot:last-child {
  bottom: 20px;
  right: 20px;
}

.dice:nth-child(3) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(3) .dot:nth-child(2) {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(3) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(4) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(4) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(4) .dot:nth-child(3) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(4) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(5) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(5) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(5) .dot:nth-child(3) {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(5) .dot:nth-child(4) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(5) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(6) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(6) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(6) .dot:nth-child(3) {
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

.dice:nth-child(6) .dot:nth-child(4) {
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
}

.dice:nth-child(6) .dot:nth-child(5) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(6) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.content {
  left: 80%;
}

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="dice.css" type="text/css" />
  <script src="dice.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <div id="die">
  </div>
  <button type="button" onclick="roll()">Click me!</button>
  <div class="container">
    <div class="dice">
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
</body>

</html>

benvc · Accepted Answer · 2021-09-30T15:18:14.547

Rather than hiding, showing, and repositioning the dice elements you have created, you could just create the element you need on click (with some css modifications to take advantage of the random number generation to help position the dots). As an aside, there is no real need for jQuery here, but it is used in the example since you were using it in your original approach.

The js creates a click event listener on the #roll button. Each time the button is clicked, the num variable is set to a random number between 1 and 6. The cls variable sets the prefix for the various classes that determine the positioning of the dots on the die - it assumes the roll is an odd number and then adjusts if it is even. Then, we remove any child elements from #die with empty() (so any dots from a previous roll are removed before we add new ones). Finally, we use a loop to append the same number of dots to #die as generated in our num variable. At the same time, we append the numbered class for each dot (which is why we named our classes odd-1, even-1, etc). For example:

$('#roll').click(() => {
  const num = Math.floor(Math.random() * 6) + 1;
  let cls = 'odd-'
  if (num % 2 === 0) {
    cls = 'even-'
  }
  
  $('#die').empty();
  for (let i = 1; i <= num; i++) {
    $('#die').append(`<div class="dot ${cls}${i}"></div>`);
  }
});

.dice {
  position: relative;
  margin: 8px;
  border: solid 3px #aaa;
  border-radius: 3px;
  width: 100px;
  height: 100px;
}

.dice .dot {
  position: absolute;
  background: #000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-8px, -8px);
}

.odd-1 {
  top: 50%;
  left: 50%;
}

.even-1,
.odd-2 {
  top: 25%;
  left: 25%;
}

.even-2,
.odd-3 {
  top: 75%;
  left: 75%;
}

.even-3,
.odd-4 {
  top: 75%;
  left: 25%;
}

.even-4,
.odd-5 {
  top: 25%;
  left: 75%;
}

.even-5 {
  top: 50%;
  left: 75%;
}

.even-6 {
  top: 50%;
  left: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="roll" type="button">Click to roll</button>
  <div id="die" class="dice">
  </div>
</div>

Yes it is working but can you please explain the javascript code ? and moreover when i am placing the js code in another file though I am linking it i am not getting the dots.... — Priyom saha, Sep 28 '18 at 03:10
Edited answer to explain the js. Make sure you are also including the new css in your other file as well (as it has changed quite a bit from the original and the dots will not display correctly without it). — benvc, Sep 28 '18 at 03:12

score 0 · Answer 2 · answered Jun 02 '21 at 16:51

Something possessed me to create a Vanilla JS version of @benvc's excellent answer (upvoted).
This uses the exact same strategy, but of course without the jQuery conveniences like .empty() and .append()

I also chose to use const in place of let where possible, collapsed the determination of the class name "cls" into a ternary ?: in place of an if, and I'm displaying the random number to visually confirm that the rendered die matches the number which makes for minor changes in the HTML.
The CSS is completely unchanged.

const die = document.getElementById('die');
const val = document.getElementById('value');
document.getElementById('roll')
        .addEventListener('click', () => {
            const num = Math.floor(Math.random() * 6) + 1;
            const cls = num % 2 === 0 ? 'even-' : 'odd-';
            val.innerText = num;
            die.innerHTML = '';
            for (let i = 1; i <= num; i++) {
                die.innerHTML += `<div class="dot ${cls}${i}"></div>`;
            }
        });

.dice {
  position: relative;
  margin: 8px;
  border: solid 3px #aaa;
  border-radius: 3px;
  width: 100px;
  height: 100px;
}

.dice .dot {
  position: absolute;
  background: #000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-8px, -8px);
}

.odd-1 {
  top: 50%;
  left: 50%;
}

.even-1,
.odd-2 {
  top: 25%;
  left: 25%;
}

.even-2,
.odd-3 {
  top: 75%;
  left: 75%;
}

.even-3,
.odd-4 {
  top: 75%;
  left: 25%;
}

.even-4,
.odd-5 {
  top: 25%;
  left: 75%;
}

.even-5 {
  top: 50%;
  left: 75%;
}

.even-6 {
  top: 50%;
  left: 25%;
}

<div>
  <button id="roll" type="button">Click to roll</button>
  <span id="value">0</span>
  <div id="die" class="dice"></div>
</div>

Show dice element corresponding to random number generated on click

2 Answers2