scrimba
Note at 1:22
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Note at 1:22
AboutCommentsNotes
Note at 1:22
Expand for more info
index.js
run
preview
console
/*
DESCRIPTION:
In this challenge a casino has asked you to make an online dice that works just like
it wold in real life. Using the pre-made dice face that represents ‘one’, make the
faces for ‘two’, ‘three’, ‘four’, ‘five’ and ‘six’. Now when the users clicks the
dice on the screen the dice is expected to show one of the faces randomly.

event listeners, Math.random()

*/

// Write your code here 👇
// When user clicks on the dice, a random number should be generated within range (1-6), where each number is then associated with a 'dot' CSS class. The class should be switched of the element with #dot id, depending on the number (e.g. random number = 4, so class="four-dot").


function rollDice() {

// Generate random number and display
var number = Math.floor(Math.random() * (6 - 1 + 1) + 1);
var result = document.querySelector("#result");
result.innerText = number;
console.log("Number is ", number);


// Use switch expression to display appropriate dice face according to number result

switch (number) {
case 1:
document.querySelector('.first-face').style.display = "grid";
var otherItems = diceHolder.querySelectorAll("div:not(.first-face)");
for (const item of otherItems) {
item.style.display = "none";
}
break;
case 2:
document.querySelector('.second-face').style.display = "grid";
var otherItems = diceHolder.querySelectorAll("div:not(.second-face)");
for (const item of otherItems) {
item.style.display = "none";
}
break;
case 3:
document.querySelector('.third-face').style.display = "grid";
var otherItems = diceHolder.querySelectorAll("div:not(.third-face)");
for (const item of otherItems) {
item.style.display = "none";
}
break;
case 4:
document.querySelector('.fourth-face').style.display = "grid";
var otherItems = diceHolder.querySelectorAll("div:not(.fourth-face)");
for (const item of otherItems) {
item.style.display = "none";
}
break;
case 5:
document.querySelector('.fifth-face').style.display = "grid";
var otherItems = diceHolder.querySelectorAll("div:not(.fifth-face)");
for (const item of otherItems) {
item.style.display = "none";
}
break;
case 6:
document.querySelector('.sixth-face').style.display = "grid";
var otherItems = diceHolder.querySelectorAll("div:not(.sixth-face)");
for (const item of otherItems) {
item.style.display = "none";
}
break;
}
}


/*
DETAILED INSTRUCTIONS
1. pick out the neccesary elements from the HTML
2. Create other 5 dice faces in CSS
3. use eventlisteners on the appropriate div
4. Display dice faces randomly on click

STRETCH GOALS:
- Can you show the number you rolled as a integer along-side the dice face?
- Can you improve the overall design?
*/
Console
"Number is "
,
1
,
"Number is "
,
1
,
"Number is "
,
4
,
"Number is "
,
6
,
"Number is "
,
2
,
"Number is "
,
4
,
"Number is "
,
1
,
"Number is "
,
5
,
"Number is "
,
3
,
"Number is "
,
1
,
"Number is "
,
4
,
"Number is "
,
1
,
"Number is "
,
2
,
"Number is "
,
5
,
"Number is "
,
4
,
"Number is "
,
2
,
"Number is "
,
2
,
"Number is "
,
6
,
/index.html
LIVE