Added Dice Game

3 years ago · cb9be61231
parent 9954b6a066
commit cb9be61231
10 changed files with 114 additions and 0 deletions
--- a/10-dice-game/images/Manishimg.jpg
+++ b/10-dice-game/images/Manishimg.jpg
--- a/10-dice-game/images/dice1.png
+++ b/10-dice-game/images/dice1.png
--- a/10-dice-game/images/dice2.png
+++ b/10-dice-game/images/dice2.png
--- a/10-dice-game/images/dice3.png
+++ b/10-dice-game/images/dice3.png
--- a/10-dice-game/images/dice4.png
+++ b/10-dice-game/images/dice4.png
--- a/10-dice-game/images/dice5.png
+++ b/10-dice-game/images/dice5.png
--- a/10-dice-game/images/dice6.png
+++ b/10-dice-game/images/dice6.png
--- a/10-dice-game/index.html
+++ b/10-dice-game/index.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dice Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <nav>
+        <ul><li>
+            DICE GAME!
+        </li></ul>
+    </nav>
+    <div class="head">
+        <h1>Refresh Me</h1>
+    </div>
+    <div class="container">
+        <div class="dice">
+            <img src="images\dice6.png" alt="">
+            <h1 >Player 1</h1>
+        </div>
+        
+        <div class="dice">
+            <img src="images\dice6.png" alt="">
+            <h1 >Player 2</h1>
+        </div>
+   
+
+    </div>
+    <script src="script.js" charset="utf-8"></script>
+</body>
+
+</html>
--- a/10-dice-game/script.js
+++ b/10-dice-game/script.js
@ -0,0 +1,26 @@
+var randomNum1 = Math.floor(Math.random()*6) + 1;
+
+var diceImg1 = "images/dice" + randomNum1 + ".png";
+
+var image1 = document.querySelectorAll("img")[0];
+
+image1.setAttribute("src",diceImg1);
+
+var randomNum2 = Math.floor(Math.random()*6) + 1;
+
+var diceImg2 = "images/dice" + randomNum2 + ".png";
+
+var image2 = document.querySelectorAll("img")[1];
+
+image2.setAttribute("src",diceImg2);
+
+if(randomNum1 > randomNum2){
+    document.querySelector("h1").innerHTML = "Player 1 Wins";
+}
+
+else if(randomNum2 > randomNum1){
+    document.querySelector("h1").innerHTML = "Player 2 Wins";
+}
+else{
+    document.querySelector("h1").innerHTML = "Draw!";
+}
--- a/10-dice-game/style.css
+++ b/10-dice-game/style.css
@ -0,0 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&family=Silkscreen&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    background-color: rgb(5, 2, 2);
+}
+nav {
+    color: black;
+    display: flex;
+    height: 75px;
+    padding: 0 15px;
+    font-family: 'Anton', sans-serif;
+    font-weight: bold;
+    font-size: 35px;
+    align-items: center;
+    background: linear-gradient(to right, #66f35c,#9f18ff);
+    -webkit-text-fill-color:rgb(0, 0, 0);
+    
+}
+nav ul{
+    list-style-type: none;   
+}
+
+.head {
+    font-size: 50px;
+    font-family: 'Silkscreen', cursive;
+    font-weight: bold;
+    padding: 30px 30px;
+    display: flex;
+    justify-content: center;
+    background: linear-gradient(to right, #f5ff36,#ff181c);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+   
+}
+.container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container img{
+    width: 15vw;
+    height: auto;
+}
+.container div h1{
+    font-size: 25px;
+    font-family: 'Silkscreen', cursive;
+    color: #ff181c;
+    margin-left: 35px;
+}