-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit be76f68
Showing
3 changed files
with
220 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
<html> | ||
<head> | ||
<link rel="stylesheet" href="style.css"> | ||
</head> | ||
<body> | ||
|
||
<h1>Click to Roll the dice</h1> | ||
|
||
<div id="first" class="dice first"> | ||
<div class="dot"></div> | ||
</div> | ||
|
||
<div id="second" class="dice second hide"> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
</div> | ||
|
||
<div id="third" class="dice third hide"> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
</div> | ||
|
||
<div id="forth" class="dice forth hide"> | ||
<div class="column"> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
</div> | ||
<div class="column"> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
</div> | ||
</div> | ||
|
||
<div id="fifth" class="dice fifth hide"> | ||
<div class="column"> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
</div> | ||
<div class="column"> | ||
<div class="dot"></div> | ||
</div> | ||
<div class="column"> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
</div> | ||
</div> | ||
|
||
<div id="sixth" class="dice sixth hide"> | ||
<div class="column"> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
</div> | ||
<div class="column"> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
<div class="dot"></div> | ||
</div> | ||
</div> | ||
|
||
<script src="index.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
/* | ||
DESCRIPTION: | ||
In this challenge a casino has asked you to make an online dice that works just like | ||
it would 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() | ||
*/ | ||
|
||
const body = document.body; | ||
const min = 1; | ||
const max = 6; | ||
|
||
const first = document.getElementById('first'); | ||
const second = document.getElementById('second'); | ||
const third = document.getElementById('third'); | ||
const forth = document.getElementById('forth'); | ||
const fifth = document.getElementById('fifth'); | ||
const sixth = document.getElementById('sixth'); | ||
|
||
|
||
body.addEventListener('click', function () { | ||
let randomNum = Math.floor(Math.random() * max) + min; | ||
console.log(randomNum); | ||
|
||
// mapping dice faces | ||
let diceFaces = [ | ||
{ id: 1, el: first }, | ||
{ id: 2, el: second }, | ||
{ id: 3, el: third }, | ||
{ id: 4, el: forth }, | ||
{ id: 5, el: fifth }, | ||
{ id: 6, el: sixth }, | ||
]; | ||
|
||
// show random number with faces | ||
diceFaces.map(face => { | ||
if (randomNum === face.id) { | ||
face.el.classList.add('show'); | ||
face.el.classList.remove('hide'); | ||
} else { | ||
face.el.classList.add('hide'); | ||
face.el.classList.remove('show'); | ||
} | ||
}); | ||
|
||
}); | ||
|
||
|
||
|
||
/* | ||
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? | ||
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
body { | ||
background-color: #AEB8FE; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
h1 { | ||
margin: 2em auto; | ||
} | ||
|
||
.dice { | ||
width: 90px; | ||
height: 90px; | ||
border-radius: 10px; | ||
background-color: #EFE5DC; | ||
margin: 2em; | ||
padding: 5px; | ||
} | ||
|
||
.dot { | ||
width: 20px; | ||
height: 20px; | ||
border-radius: 15px; | ||
background-color: black; | ||
} | ||
|
||
/* 1st */ | ||
.first { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
/* 2nd */ | ||
.second { | ||
display: flex; | ||
justify-content: space-between; | ||
} | ||
|
||
.second .dot:nth-of-type(2) { | ||
align-self: flex-end; | ||
} | ||
|
||
/* 3rd */ | ||
.third { | ||
display: flex; | ||
justify-content: space-between; | ||
} | ||
.third .dot:nth-of-type(2){ | ||
align-self: center; | ||
} | ||
|
||
.third .dot:nth-of-type(3){ | ||
align-self: flex-end; | ||
} | ||
|
||
/* 4th, 5th, 6th */ | ||
.forth { | ||
display: flex; | ||
justify-content: space-between; | ||
} | ||
|
||
.fifth { | ||
display: flex; | ||
justify-content: space-between; | ||
} | ||
|
||
.sixth { | ||
display: flex; | ||
justify-content: space-between; | ||
} | ||
|
||
.forth .column, .fifth .column, .sixth .column { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
} | ||
|
||
.fifth .column:nth-of-type(2) { | ||
align-self: center; | ||
} | ||
|
||
|
||
.hide { | ||
display: none; | ||
} | ||
|
||
.show { | ||
display: flex; | ||
} |