avelops/index.html

## index.html


    <body>
        <div id="display">
            <div id="dices">
                <div id="diceOne" class="dice">0</div>
                <div id="diceTwo" class="dice">0</div>
            </div>
            <button id="btnRoll">Roll Dice</button>
            <table id="resultTable">
                <tr>
                    <th>Resolve / Reject</th>
                    <th>Dice 1</th>
                    <th>Dice 2</th>
                </tr>
            </table>
        </div>
    </body>

## poxxrax.markdown

      
    Raw
  

              poxxrax.markdown
            
          
    PoxxraX

A Pen by שגיא on CodePen.
License.

  
## script.js
const diceOne = document.getElementById('diceOne');
const diceTwo = document.getElementById('diceTwo');
const resultTable = document.getElementById('resultTable');

const rollDice = (dice) => dice.innerHTML = Math.floor(Math.random() * 6) + 1;

// Math.random()
// console.log(Math.floor((Math.random() * 6) + 1))

// console.log(Math.trunc(Math.random() *6  + 1))

const rollDices = () => {
    rollDice(diceOne);
    rollDice(diceTwo);
}

function cubeRollPromise () {
    return new Promise((resolve, reject) => {
        if(diceOne.innerText === diceTwo.innerText) {
            resolve();
        } else {
            reject();
        }
    })
}

function addRow(msg) {
    resultTable.innerHTML += `<tr>` +
        `<td>${msg}</td>` +
        `<td>${diceOne.innerText}</td>` +
        `<td>${diceTwo.innerText}</td>` +
        `</tr>`
}

const cubeRoll = () => {
    rollDices();
    cubeRollPromise()
    .then(() => {
        addRow('Resolve');
    })
    .catch(() => {
        addRow('Reject');
    })
}


document.getElementById('btnRoll').addEventListener('click', cubeRoll)


## style.css
#display{
    margin: auto;
    width: 50%;
    padding: 10px;}

.dice{
    width: 32px;
    background: #f5f5f5;
    border:1px solid grey;
    padding: 10px;
    font-size: 26px;
    text-align: center;
    margin: 5px;
    display: inline-block;
}

#btnRoll{
    font-size: medium;
    margin: 5px;
}



	<body>
	<div id="display">
	<div id="dices">
	<div id="diceOne" class="dice">0</div>
	<div id="diceTwo" class="dice">0</div>
	</div>
	<button id="btnRoll">Roll Dice</button>
	<table id="resultTable">
	<tr>
	<th>Resolve / Reject</th>
	<th>Dice 1</th>
	<th>Dice 2</th>
	</tr>
	</table>
	</div>
	</body>
	const diceOne = document.getElementById('diceOne');
	const diceTwo = document.getElementById('diceTwo');
	const resultTable = document.getElementById('resultTable');

	const rollDice = (dice) => dice.innerHTML = Math.floor(Math.random() * 6) + 1;

	// Math.random()
	// console.log(Math.floor((Math.random() * 6) + 1))

	// console.log(Math.trunc(Math.random() *6 + 1))

	const rollDices = () => {
	rollDice(diceOne);
	rollDice(diceTwo);
	}

	function cubeRollPromise () {
	return new Promise((resolve, reject) => {
	if(diceOne.innerText === diceTwo.innerText) {
	resolve();
	} else {
	reject();
	}
	})
	}

	function addRow(msg) {
	resultTable.innerHTML += `<tr>` +
	`<td>${msg}</td>` +
	`<td>${diceOne.innerText}</td>` +
	`<td>${diceTwo.innerText}</td>` +
	`</tr>`
	}

	const cubeRoll = () => {
	rollDices();
	cubeRollPromise()
	.then(() => {
	addRow('Resolve');
	})
	.catch(() => {
	addRow('Reject');
	})
	}


	document.getElementById('btnRoll').addEventListener('click', cubeRoll)
	#display{
	margin: auto;
	width: 50%;
	padding: 10px;}

	.dice{
	width: 32px;
	background: #f5f5f5;
	border:1px solid grey;
	padding: 10px;
	font-size: 26px;
	text-align: center;
	margin: 5px;
	display: inline-block;
	}

	#btnRoll{
	font-size: medium;
	margin: 5px;
	}