File tree Expand file tree Collapse file tree 9 files changed +95
-0
lines changed Expand file tree Collapse file tree 9 files changed +95
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html lang ="en " dir ="ltr ">
3
+ < head >
4
+ < meta charset ="utf-8 ">
5
+ < title > Dicee</ title >
6
+ < link rel ="stylesheet " href ="styles.css ">
7
+ < link href ="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster " rel ="stylesheet ">
8
+
9
+ </ head >
10
+ < body >
11
+
12
+ < div class ="container ">
13
+ < h1 > Refresh Me</ h1 >
14
+
15
+ < div class ="dice ">
16
+ < p > Player 1</ p >
17
+ < img class ="img1 " src ="images/dice1.png ">
18
+ </ div >
19
+
20
+ < div class ="dice ">
21
+ < p > Player 2</ p >
22
+ < img class ="img2 " src ="images/dice2.png ">
23
+ </ div >
24
+
25
+ </ div >
26
+
27
+
28
+ </ body >
29
+
30
+ < footer >
31
+ < script src ="script.js "> </ script >
32
+ </ footer >
33
+ </ html >
Original file line number Diff line number Diff line change
1
+ var randomNo = Math . floor ( Math . random ( ) * 6 ) + 1 ;
2
+ var randomDiceImage = "images/dice" + randomNo + ".png" ;
3
+
4
+ var img1 = document . querySelector ( ".img1" ) . setAttribute ( "src" , randomDiceImage ) ;
5
+ // or// var img1 = document.querySelector(".img1").src=`${randomDiceImage}`;
6
+
7
+ var randomNo2 = Math . floor ( Math . random ( ) * 6 ) + 1 ;
8
+ var randomDiceImage2 = "images/dice" + randomNo2 + ".png" ;
9
+ var img2 = document . querySelector ( ".img2" ) . setAttribute ( "src" , randomDiceImage2 ) ;
10
+
11
+ var winnerDeclaration = document . querySelector ( "h1" ) ;
12
+ if ( randomNo > randomNo2 ) {
13
+ winnerDeclaration . innerHTML = "🚩Player 1 is the winner!"
14
+ }
15
+ else if ( randomNo < randomNo2 ) {
16
+ winnerDeclaration . innerText = "Player 2 is the winner🚩!"
17
+ }
18
+ else {
19
+ winnerDeclaration . innerText = "Try again!"
20
+ }
Original file line number Diff line number Diff line change
1
+ .container {
2
+ width : 70% ;
3
+ margin : auto;
4
+ text-align : center;
5
+ }
6
+
7
+ .dice {
8
+ text-align : center;
9
+ display : inline-block;
10
+
11
+ }
12
+
13
+ body {
14
+ background-color : # 393E46 ;
15
+ }
16
+
17
+ h1 {
18
+ margin : 30px ;
19
+ font-family : 'Lobster' , cursive;
20
+ text-shadow : 5px 0 # 232931 ;
21
+ font-size : 8rem ;
22
+ color : # 4ECCA3 ;
23
+ }
24
+
25
+ p {
26
+ font-size : 2rem ;
27
+ color : # 4ECCA3 ;
28
+ font-family : 'Indie Flower' , cursive;
29
+ }
30
+
31
+ img {
32
+ width : 80% ;
33
+ }
34
+
35
+ footer {
36
+ margin-top : 5% ;
37
+ color : # EEEEEE ;
38
+ text-align : center;
39
+ font-family : 'Indie Flower' , cursive;
40
+
41
+ }
42
+
You can’t perform that action at this time.
0 commit comments