├── README.md ├── dicee.html ├── images ├── dice1.png ├── dice2.png ├── dice3.png ├── dice4.png ├── dice5.png └── dice6.png ├── index.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # dicee-project 2 | 3 | ![This is an image]![Screenshot_1](https://user-images.githubusercontent.com/107684179/185781386-33403845-6392-4a28-9b6e-3e599d8ae60a.png) 4 | -------------------------------------------------------------------------------- /dicee.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dicee 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Refresh Me

14 | 15 |
16 |

Player 1

17 | 18 |
19 | 20 |
21 |

Player 2

22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | -------------------------------------------------------------------------------- /images/dice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JasonLim1009/dicee-project/341d33f59a3c4200c5e9d929a3069bc62ec123f3/images/dice1.png -------------------------------------------------------------------------------- /images/dice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JasonLim1009/dicee-project/341d33f59a3c4200c5e9d929a3069bc62ec123f3/images/dice2.png -------------------------------------------------------------------------------- /images/dice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JasonLim1009/dicee-project/341d33f59a3c4200c5e9d929a3069bc62ec123f3/images/dice3.png -------------------------------------------------------------------------------- /images/dice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JasonLim1009/dicee-project/341d33f59a3c4200c5e9d929a3069bc62ec123f3/images/dice4.png -------------------------------------------------------------------------------- /images/dice5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JasonLim1009/dicee-project/341d33f59a3c4200c5e9d929a3069bc62ec123f3/images/dice5.png -------------------------------------------------------------------------------- /images/dice6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JasonLim1009/dicee-project/341d33f59a3c4200c5e9d929a3069bc62ec123f3/images/dice6.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | var randomNumber1 = Math.floor(Math.random() * 6) + 1; 3 | var randomDiceImage = 'dice' + randomNumber1 + '.png'; 4 | var randomImageSource = 'images/' + randomDiceImage; 5 | var image1 = document.querySelectorAll('img')[0]; 6 | image1.setAttribute('src', randomImageSource); 7 | 8 | 9 | var randomNumber2 = Math.floor(Math.random() * 6) + 1; 10 | var randomImageSource2 = 'images/dice' + randomNumber2 + '.png'; 11 | document.querySelectorAll('img')[1].setAttribute('src', randomImageSource2); 12 | 13 | if (randomNumber1 > randomNumber2){ 14 | document.querySelector('h1').innerHTML = '🏆Play 1 Wins!' 15 | } 16 | else if (randomNumber2 > randomNumber1){ 17 | document.querySelector('h1').innerHTML = 'Player 2 Wins!🏆' 18 | } 19 | else { 20 | document.querySelector('h1').innerHTML = 'Draw!'; 21 | } -------------------------------------------------------------------------------- /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 | 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 | --------------------------------------------------------------------------------