-1

I want to restrict the dice to roll only for three times when i press the button, also i need the values of dice when they roll during three times i need the values of front facing dice

The numbers are -1,2,3,4,5,6(first time rolling)

The numbers are -3,4,5,2,1,6(second time rolling)

The numbers are -2,1,3,4,6,5(third time rolling)

What i meant to say is when i press the button second time the values of dice rolled during second time as well as the value of dice rolled during first time also should appear on the screen similarly when i press the button third time i want the values of dice rolled during first and second time also third time when i press the button the dice should not roll i.e the game should continue only for three times

i have created six dice of 3d type but i am not able to restrict the rolling of dice for three times when i press the button and not able to store the values rolled during first time when i press the button second time similarly when i press the button third time not able to store the values rolled during first time and second time 

    function rollDice() {
      const dice = [...document.querySelectorAll(".die-list")];
      let dice1value, dice2value, dice3value, dice4value, dice5value, dice6value;
      dice.forEach(die => {
        toggleClasses(die);
        die.dataset.roll = getRandomNumber(1, 6);
        document.getElementById(die.id+"-val").innerText = die.dataset.roll;
      });
    }
    
    function toggleClasses(die) {
      die.classList.toggle("odd-roll");
      die.classList.toggle("even-roll");
    }
    
    function getRandomNumber(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    document.getElementById("roll-button").addEventListener("click", rollDice);
    
    * {
      margin: 0;
      padding: 0;
      vertical-align: baseline;
    }
    html {
      font-family: system-ui, sans-serif;
    }
    main {
      background: linear-gradient(#454545, #676767, #454545);
      display: grid;
      grid-template-columns: 1fr;
      height: 100vh;
      width: 100%;
    }
    body {
      overflow: hidden;
    }
    .dice {
      align-items: center;
      display: grid;
      grid-gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
      grid-template-rows: auto;
      justify-items: center;
      padding: 2rem;
      perspective: 600px;
    }
    .die-list {
      height: 6rem;
      list-style-type: none;
      position: relative;
      transform-style: preserve-3d;
      width: 6rem;
    }
    .even-roll {
      transition: transform 1.5s ease-out;
    }
    .odd-roll {
      transition: transform 1.25s ease-out;
    }
    .die-item {
      background-color: #fefefe;
      box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
        inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
      display: grid;
      grid-template-areas: "one two three" "four five six" "seven eight nine";
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      height: 100%;
      padding: 1rem;
      position: absolute;
      width: 100%;
    }
    .dot {
      align-self: center;
      background-color: #676767;
      border-radius: 50%;
      box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);
      display: block;
      height: 1.25rem;
      justify-self: center;
      width: 1.25rem;
    }
    .even-roll[data-roll="1"] {
      transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
    }
    .even-roll[data-roll="2"] {
      transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
    }
    .even-roll[data-roll="3"] {
      transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
    }
    .even-roll[data-roll="4"] {
      transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
    }
    .even-roll[data-roll="5"] {
      transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
    }
    .even-roll[data-roll="6"] {
      transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
    }
    .odd-roll[data-roll="1"] {
      transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
    }
    .odd-roll[data-roll="2"] {
      transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
    }
    .odd-roll[data-roll="3"] {
      transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
    }
    .odd-roll[data-roll="4"] {
      transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
    }
    .odd-roll[data-roll="5"] {
      transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
    }
    .odd-roll[data-roll="6"] {
      transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
    }
    [data-side="1"] {
      transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
    }
    [data-side="2"] {
      transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
    }
    [data-side="3"] {
      transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
    }
    [data-side="4"] {
      transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
    }
    [data-side="5"] {
      transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
    }
    [data-side="6"] {
      transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
    }
    [data-side="1"] .dot:nth-of-type(1) {
      grid-area: five;
    }
    [data-side="2"] .dot:nth-of-type(1) {
      grid-area: one;
    }
    [data-side="2"] .dot:nth-of-type(2) {
      grid-area: nine;
    }
    [data-side="3"] .dot:nth-of-type(1) {
      grid-area: one;
    }
    [data-side="3"] .dot:nth-of-type(2) {
      grid-area: five;
    }
    [data-side="3"] .dot:nth-of-type(3) {
      grid-area: nine;
    }
    [data-side="4"] .dot:nth-of-type(1) {
      grid-area: one;
    }
    [data-side="4"] .dot:nth-of-type(2) {
      grid-area: three;
    }
    [data-side="4"] .dot:nth-of-type(3) {
      grid-area: seven;
    }
    [data-side="4"] .dot:nth-of-type(4) {
      grid-area: nine;
    }
    [data-side="5"] .dot:nth-of-type(1) {
      grid-area: one;
    }
    [data-side="5"] .dot:nth-of-type(2) {
      grid-area: three;
    }
    [data-side="5"] .dot:nth-of-type(3) {
      grid-area: five;
    }
    [data-side="5"] .dot:nth-of-type(4) {
      grid-area: seven;
    }
    [data-side="5"] .dot:nth-of-type(5) {
      grid-area: nine;
    }
    [data-side="6"] .dot:nth-of-type(1) {
      grid-area: one;
    }
    [data-side="6"] .dot:nth-of-type(2) {
      grid-area: three;
    }
    [data-side="6"] .dot:nth-of-type(3) {
      grid-area: four;
    }
    [data-side="6"] .dot:nth-of-type(4) {
      grid-area: six;
    }
    [data-side="6"] .dot:nth-of-type(5) {
      grid-area: seven;
    }
    [data-side="6"] .dot:nth-of-type(6) {
      grid-area: nine;
    }
    
    button {
      align-self: center;
      background-color: #efefef;
      border: none;
      color: #333;
      font-size: 1.25rem;
      font-weight: 700;
      justify-self: center;
      padding: 0.5rem 1rem;
    }
    button:hover {
      cursor: pointer;
    }
    
    @media (min-width: 900px) {
      .dice {
        perspective: 1500px;
      }
    }
    <main>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <div class="dice">
        <ol class="die-list even-roll" data-roll="1" id="die-1">
          <li class="die-item" data-side="1">
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="2">
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="3">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="4">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="5">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="6">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
        </ol>
        <ol class="die-list odd-roll" data-roll="1" id="die-2">
          <li class="die-item" data-side="1">
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="2">
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="3">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="4">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="5">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="6">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
        </ol>
        <ol class="die-list odd-roll" data-roll="1" id="die-3">
          <li class="die-item" data-side="1">
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="2">
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="3">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="4">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="5">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="6">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
        </ol>
        <ol class="die-list even-roll" data-roll="1" id="die-4">
          <li class="die-item" data-side="1">
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="2">
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="3">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="4">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="5">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="6">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
        </ol>
        <ol class="die-list odd-roll" data-roll="1" id="die-5">
          <li class="die-item" data-side="1">
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="2">
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="3">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="4">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="5">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="6">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
        </ol>
        <ol class="die-list even-roll" data-roll="1" id="die-6">
          <li class="die-item" data-side="1">
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="2">
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="3">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="4">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="5">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
          <li class="die-item" data-side="6">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </li>
        </ol>
      </div>
      <div style="color:#fff; font-size: 14px; margin: -25px 0 5px; text-align: center;">The Numbers Are - <span id="die-1-val"></span> <span id="die-2-val"></span> <span id="die-3-val"></span> <span id="die-4-val"></span> <span id="die-5-val"></span> <span id="die-6-val"></span></div>
      <button type="button" id="roll-button">Roll Dice</button>
    </main>
    <script type="text/javascript" src="js/index.js">
    
    </script>

What i am expecting is i want to restrict the dice rolling to three times only the values of front faced dice should be stored like below-

The numbers are -1,2,3,4,5,6(first time rolling)

The numbers are -3,4,5,2,1,6(second time rolling)

The numbers are -2,1,3,4,6,5(third time rolling)

Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
chandan
  • 19
  • 2

1 Answers1

0

The problem is, that your animation uses css transition (1.5s) but the function rollDice generates the random numbers immediately.

I added a function "rollDiceNTimes(times)", that takes an argument, where you can specify how many times the dice should roll.

The second function is just a function to "sleep" the given time. I added 2s, since your transition takes 1.5s. So the user could see the dices settling, before the next roll.

The last part is the visual (DOM) output. I removed the single dice span's and added one output span to add all three values.

Of course there are better solutions, where you would add event listeners, and wait for transitionend and run the next roll (check this SO post). 

// this list holds your three rolls
var diceValuesList;

function rollDice() {
  const dice = [...document.querySelectorAll(".die-list")];
  let dice1value, dice2value, dice3value, dice4value, dice5value, dice6value;
  let diceValues = [];
  dice.forEach(die => {
    toggleClasses(die);
    die.dataset.roll = getRandomNumber(1, 6);
    // document.getElementById(die.id+"-val").innerText = die.dataset.roll;
    diceValues.push(die.dataset.roll);
  });
  return diceValues;
}

function toggleClasses(die) {
  die.classList.toggle("odd-roll");
  die.classList.toggle("even-roll");
}

function getRandomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

async function rollDiceNTimes(times)
{
  diceValuesList = [];
  
  let btnRoll = document.getElementById("roll-button");
  let rollList = document.getElementById("roll-list");
  rollList.innerHTML = "";
  btnRoll.disabled = true;
  
  for(let i = 0;i<times;i++)
  {
    let rollValues = rollDice();
    diceValuesList.push(rollValues);
    await sleep(2000);
    // wait before adding the dom element for this roll
    let el = document.createElement("div");
    el.innerHTML = (i+1) + ". roll: " + rollValues.join();
    rollList.appendChild(el);
    
  
  }
  btnRoll.disabled = false;
  
  console.log(diceValuesList);
}


document.getElementById("roll-button").addEventListener("click", ()=>{ rollDiceNTimes(3); });

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
* {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
html {
  font-family: system-ui, sans-serif;
}
main {
  background: linear-gradient(#454545, #676767, #454545);
  display: grid;
  grid-template-columns: 1fr;
  height: 100vh;
  width: 100%;
}
body {
  overflow: hidden;
}
.dice {
  align-items: center;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  grid-template-rows: auto;
  justify-items: center;
  padding: 2rem;
  perspective: 600px;
}
.die-list {
  height: 6rem;
  list-style-type: none;
  position: relative;
  transform-style: preserve-3d;
  width: 6rem;
}
.even-roll {
  transition: transform 1.5s ease-out;
}
.odd-roll {
  transition: transform 1.25s ease-out;
}
.die-item {
  background-color: #fefefe;
  box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
    inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  display: grid;
  grid-template-areas: "one two three" "four five six" "seven eight nine";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
  padding: 1rem;
  position: absolute;
  width: 100%;
}
.dot {
  align-self: center;
  background-color: #676767;
  border-radius: 50%;
  box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);
  display: block;
  height: 1.25rem;
  justify-self: center;
  width: 1.25rem;
}
.even-roll[data-roll="1"] {
  transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="2"] {
  transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="3"] {
  transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}
.even-roll[data-roll="4"] {
  transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}
.even-roll[data-roll="5"] {
  transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="6"] {
  transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}
.odd-roll[data-roll="1"] {
  transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="2"] {
  transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="3"] {
  transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
}
.odd-roll[data-roll="4"] {
  transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
}
.odd-roll[data-roll="5"] {
  transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="6"] {
  transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}
[data-side="1"] {
  transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
}
[data-side="2"] {
  transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="3"] {
  transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
}
[data-side="4"] {
  transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
}
[data-side="5"] {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="6"] {
  transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
}
[data-side="1"] .dot:nth-of-type(1) {
  grid-area: five;
}
[data-side="2"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="2"] .dot:nth-of-type(2) {
  grid-area: nine;
}
[data-side="3"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="3"] .dot:nth-of-type(2) {
  grid-area: five;
}
[data-side="3"] .dot:nth-of-type(3) {
  grid-area: nine;
}
[data-side="4"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="4"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="4"] .dot:nth-of-type(3) {
  grid-area: seven;
}
[data-side="4"] .dot:nth-of-type(4) {
  grid-area: nine;
}
[data-side="5"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="5"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="5"] .dot:nth-of-type(3) {
  grid-area: five;
}
[data-side="5"] .dot:nth-of-type(4) {
  grid-area: seven;
}
[data-side="5"] .dot:nth-of-type(5) {
  grid-area: nine;
}
[data-side="6"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="6"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="6"] .dot:nth-of-type(3) {
  grid-area: four;
}
[data-side="6"] .dot:nth-of-type(4) {
  grid-area: six;
}
[data-side="6"] .dot:nth-of-type(5) {
  grid-area: seven;
}
[data-side="6"] .dot:nth-of-type(6) {
  grid-area: nine;
}

button {
  align-self: center;
  background-color: #efefef;
  border: none;
  color: #333;
  font-size: 1.25rem;
  font-weight: 700;
  justify-self: center;
  padding: 0.5rem 1rem;
}
button:hover {
  cursor: pointer;
}

@media (min-width: 900px) {
  .dice {
    perspective: 1500px;
  }
}
<main>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <div class="dice">
    <ol class="die-list even-roll" data-roll="1" id="die-1">
      <li class="die-item" data-side="1">
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="2">
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="3">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="4">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="5">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="6">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
    </ol>
    <ol class="die-list odd-roll" data-roll="1" id="die-2">
      <li class="die-item" data-side="1">
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="2">
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="3">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="4">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="5">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="6">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
    </ol>
    <ol class="die-list odd-roll" data-roll="1" id="die-3">
      <li class="die-item" data-side="1">
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="2">
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="3">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="4">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="5">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="6">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
    </ol>
    <ol class="die-list even-roll" data-roll="1" id="die-4">
      <li class="die-item" data-side="1">
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="2">
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="3">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="4">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="5">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="6">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
    </ol>
    <ol class="die-list odd-roll" data-roll="1" id="die-5">
      <li class="die-item" data-side="1">
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="2">
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="3">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="4">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="5">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="6">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
    </ol>
    <ol class="die-list even-roll" data-roll="1" id="die-6">
      <li class="die-item" data-side="1">
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="2">
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="3">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="4">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="5">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
      <li class="die-item" data-side="6">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </li>
    </ol>
  </div>
  <div style="color:#fff; font-size: 14px; margin: -25px 0 5px; text-align: center;">The Numbers Are - 
    <span id="roll-list"></span>
  </div>
  <button type="button" id="roll-button">Roll Dice</button>
</main>
Recep Karadas
  • 669
  • 4
  • 10