Updated Source Code with adjustment for doctype
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<style>
.output {
width: 450px;
text-align: center;
font-size: 2em;
}
button {
padding: 10px;
text-align: center;
width: 450px;
}
.dicer {
border: 1px solid black;
width: 90px;
height: 94px;
padding: 5px;
border-radius: 10px;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
.dot {
height: 25px;
width: 25px;
border-radius: 50%;
display: inline-block;
margin: 2px;
}
.viewer {
display: inline-block;
width: 211px;
height: 150px;
border: 1px solid black;
padding: 5px;
}
.namer {
display: inline-block;
font-family: cursive;
font-size: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="gamearea">
<div class="output">
<div> Roll the Dice??</div>
</div>
<div class="viewer"> <span class="namer">Player 1</span> <span id="player1"></span> </div>
<div class="viewer"> <span class="namer">Player 2</span> <span id="player2"></span> </div>
</div>
<button type="button">Roll</button>
<script>
const button = document.querySelector("button");
const output = document.querySelector(".output");
const player1 = document.querySelector("#player1");
const player2 = document.querySelector("#player2");
const dice = [[5], [1, 9], [1, 5, 9], [1, 3, 7, 9], [1, 3, 5, 7, 9], [1, 3, 4, 6, 7, 9]];
button.addEventListener("click", function () {
let rolls = [roll(6), roll(6)];
let temp;
if (rolls[0] == rolls[1]) {
temp = "Draw";
}
else if (rolls[0] > rolls[1]) {
temp = "Player 1 wins";
}
else {
temp = "Player 2 wins";
}
updateOutput(player1, rolls[0]);
updateOutput(player2, rolls[1]);
output.innerHTML = temp;
})
function updateOutput(el, num) {
let holder = builder(num);
if (el.children[0]) {
el.children[0].remove();
}
el.appendChild(holder);
}
function builder(num) {
let div = document.createElement("div");
let dieArray = dice[num - 1];
console.log(dieArray);
for (let x = 1; x < 10; x++) {
let span = document.createElement("div");
span.setAttribute("class", "dot");
if (dieArray.includes(x)) {
span.classList.add("black");
}
div.appendChild(span);
}
div.setAttribute("class", "dicer");
return div;
}
function roll(num) {
let rNumber = Math.floor(Math.random() * num) + 1;
return rNumber;
}
</script>
</body>
</html>
Without doctype the browser renders code within quirks mode.
Line height calculations may differ which will cause the visual object to display shifted.
There are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in Netscape Navigator 4), even though CSS says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height.
https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_quirks_mode_behavior
Below is the code used in the video - although we want keep the focus on JavaScript this is a CSS issue so that you can fix and display the dice dots.
<html>
<head>
<title>JavaScript</title>
<style>
.output {
width: 450px;
text-align: center;
font-size: 2em;
}
button {
padding: 10px;
text-align: center;
width: 450px;
}
.dicer{
border: 1px solid black;
width:90px;
height:90px;
padding:2px;
border-radius: 10px;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
.dot {
height: 25px;
width:25px;
border-radius: 50%;
display: inline-block;
margin:2px;
}
.viewer{
display: inline-block;
width:211px;
height:150px;
border: 1px solid black;
padding:5px;
}
.namer{
display: inline-block;
font-family: cursive;
font-size: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="gamearea">
<div class="output"><div > Roll the Dice??</div></div>
<div class="viewer">
<span class="namer">Player 1</span>
<span id="player1"></span>
</div>
<div class="viewer">
<span class="namer">Player 2</span>
<span id="player2"></span>
</div>
</div>
<button type="button">Roll</button>
<script>
const button = document.querySelector("button");
const output = document.querySelector(".output");
const player1 = document.querySelector("#player1");
const player2 = document.querySelector("#player2");
const dice = [[5],[1,9],[1,5,9],[1,3,7,9],[1,3,5,7,9],[1,3,4,6,7,9]];
button.addEventListener("click", function () {
let rolls = [roll(6),roll(6)];
let temp;
if(rolls[0] == rolls[1]){ temp="Draw"; }
else if(rolls[0] > rolls[1]){ temp="Player 1 wins"; }
else { temp="Player 2 wins"; }
updateOutput(player1,rolls[0]);
updateOutput(player2,rolls[1]);
output.innerHTML = temp;
})
function updateOutput(el,num){
let holder = builder(num);
if(el.children[0]){el.children[0].remove();}
el.appendChild(holder);
}
function builder(num){
let div = document.createElement("div");
let dieArray = dice[num-1];
console.log(dieArray);
for(let x=1;x<10;x++){
let span = document.createElement("div");
span.setAttribute("class","dot");
if(dieArray.includes(x)){
span.classList.add("black");
}
div.appendChild(span);
}
div.setAttribute("class","dicer");
return div;
}
function roll(num) {
let rNumber = Math.floor(Math.random() * num) + 1;
return rNumber;
}
</script>
</body>
</html>