-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDay 8 - RollingDice.js
129 lines (98 loc) · 2.97 KB
/
Day 8 - RollingDice.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/* Rolling Dice
https://scrimba.com/scrim/coab241ebab0c921b1223fbf1
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 click the
dice on the screen, the dice is expected to show one of the faces randomly.
Hints: event listeners, Math.random()
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 an integer alongside the dice face?
- Can you improve the overall design?
*/
const dotContainer = document.querySelectorAll("#dotContainer")
const dots = document.querySelectorAll("#dotContainer .dot")
// console.log(dots.length)
// console.log(dotContainer + " " + dotContainer[0])
dotContainer[0].onclick = function() {
let randomDots = []
let randomNum = Math.floor(Math.random() * 6) + 1
console.log(randomNum)
let dotNr = {
1 : [4],
2 : [0, 8],
3 : [0, 4, 8],
4 : [0, 2, 6, 8],
5 : [0, 2, 6, 8, 4],
6 : [0, 3, 6, 1, 4, 7, 2, 5, 8]
}
randomDots = dotNr[randomNum]
// console.log(randomDots)
for (let i = 0; i < dots.length; i++) {
let dot = dots[i]
dot.style.visibility = "hidden"
// console.log(dot)
}
// console.log("randomDots:", randomDots)
// console.log("randomDots:", dots)
for (let i=0; i < randomDots.length; i++) {
// console.log("randomDots["+i+"]" + "=" + randomDots[i])
let dotIndex = randomDots[i]
let dot = dots[dotIndex]
dot.style.visibility = "visible"
// console.log(dot)
}
}
/*
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="index.pack.js"></script>
</head>
<body>
<div id="mainContainer">
<div id="dotContainer">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</body>
</html>
//CSS:
body {
background-color: #AEB8FE;
display: flex;
}
#mainContainer {
border-radius: 20px;
background-color: #EFE5DC;
margin: auto;
margin-top: 100px;
}
#dotContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
border-radius: 20px;
}
.dot {
width: 30px;
height: 30px;
border-radius: 15px;
background-color: black;
margin: 25px;
}
*/