├── README.md
├── images
    ├── dice1.png
    ├── dice2.png
    ├── dice3.png
    ├── dice4.png
    ├── dice5.png
    └── dice6.png
├── styles.css
├── index.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # dicegame


--------------------------------------------------------------------------------
/images/dice1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikdahal/dicegame/HEAD/images/dice1.png


--------------------------------------------------------------------------------
/images/dice2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikdahal/dicegame/HEAD/images/dice2.png


--------------------------------------------------------------------------------
/images/dice3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikdahal/dicegame/HEAD/images/dice3.png


--------------------------------------------------------------------------------
/images/dice4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikdahal/dicegame/HEAD/images/dice4.png


--------------------------------------------------------------------------------
/images/dice5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikdahal/dicegame/HEAD/images/dice5.png


--------------------------------------------------------------------------------
/images/dice6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unikdahal/dicegame/HEAD/images/dice6.png


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 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 | body {
13 |     background-color: #393E46;
14 | }
15 | 
16 | h1 {
17 |     margin: 30px;
18 |     font-family: 'Lobster', cursive;
19 |     text-shadow: 5px 0 #232931;
20 |     font-size: 5rem;
21 |     color: #4ECCA3;
22 | }
23 | 
24 | p {
25 |     font-size: 2rem;
26 |     color: #4ECCA3;
27 |     font-family: 'Indie Flower', cursive;
28 | }
29 | 
30 | img {
31 |     width: 80%;
32 | }
33 | 
34 | footer {
35 |     margin-top: 5%;
36 |     color: #EEEEEE;
37 |     text-align: center;
38 |     font-family: 'Indie Flower', cursive;
39 | }
40 | 
41 | .click {
42 |     font-size: 2rem;
43 |     color: #4ECCA3;
44 |     font-family: 'Indie Flower', cursive;
45 |     text-decoration: none;
46 |     border-radius: 5px;
47 |     border: 1px solid wheat;
48 |     background-color: #232931;
49 | }
50 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var btn = document.getElementById('new');
 2 | var text = document.querySelectorAll('h1');
 3 | 
 4 | btn.addEventListener("click", function() {
 5 |     var randomNumber1 = Math.random() * 6;
 6 |     randomNumber1 = Math.floor(randomNumber1) + 1;
 7 | 
 8 |     var randomDiceImage = "images/dice" + randomNumber1 + ".png";
 9 | 
10 |     document.querySelectorAll("img")[0].setAttribute("src", randomDiceImage);
11 | 
12 |     var randomNumber2 = Math.random() * 6;
13 |     randomNumber2 = Math.floor(randomNumber2) + 1;
14 | 
15 |     var randomDiceImage2 = "images/dice" + randomNumber2 + ".png";
16 | 
17 |     document.querySelectorAll("img")[1].setAttribute("src", randomDiceImage2);
18 | 
19 |     if (randomNumber1 > randomNumber2) {
20 |         text[0].innerHTML = "Player 1 Wins!";
21 |     } else if (randomNumber2 > randomNumber1) {
22 |         text[0].innerHTML = "Player 2 Wins!";
23 |     } else if (randomNumber1 === randomNumber2) {
24 |         text[0].innerHTML = "Draw!";
25 |     }
26 | });
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Dicee</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
 9 | 
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <h1>Play Now</h1>
16 | 
17 |         <div class="dice">
18 |             <p>Player 1</p>
19 |             <img class="img1" src="images/dice6.png">
20 |         </div>
21 | 
22 |         <div class="dice">
23 |             <p>Player 2</p>
24 |             <img class="img2" src="images/dice6.png">
25 |         </div>
26 |         <br>
27 |         <br>
28 |         <button class="click" id="new">
29 |         Click to Roll Dice
30 |       </button>
31 | 
32 |     </div>
33 | 
34 | 
35 | 
36 | 
37 |     <script src="index.js" type="text/javascript">
38 |     </script>
39 | 
40 | </body>
41 | 
42 | <footer>
43 |     🎲 Unik dahal 🎲
44 | </footer>
45 | 
46 | </html>
47 | 


--------------------------------------------------------------------------------