dice game using javascript

dicegame/dice.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Dicee</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
+
+  </head>
+  <body>
+
+    <div class="container">
+      <h1>Refresh Me</h1>
+
+      <div class="dice">
+        <p>Player 1</p>
+        <img class="img1" src="images/dice1.png">
+      </div>
+
+      <div class="dice">
+        <p>Player 2</p>
+        <img class="img2" src="images/dice6.png">
+      </div>
+
+    </div>
+
+
+<script src="index2.js"></script>
+  </body>
+
+  <footer>
+    🎲 Thanks to Aryan 🎲
+  </footer>
+</html>

dicegame/index2.js

@@ -0,0 +1,27 @@
+
+var rn1 = Math.floor(Math.random()*6) + 1;
+var randomdice = "dice" + rn1 + ".png";
+
+var randomimage = "images/" + randomdice;
+
+var image1 = document.querySelectorAll("img")[0];
+image1.setAttribute("src",randomimage);
+
+
+var rn2 = Math.floor(Math.random()*6) + 1;
+var randomdice2 = "dice" + rn2 + ".png";
+
+var randomimage2 = "images/" + randomdice2;
+
+var image2 = document.querySelectorAll("img")[1];
+image2.setAttribute("src",randomimage2);
+
+if(rn1>rn2){
+    document.querySelector("h1").innerHTML = "player 1 wins"
+}
+else if(rn2>rn1){
+    document.querySelector("h1").innerHTML = "player 2 wins"
+}
+else{
+    document.querySelector("h1").innerHTML = "DRAW"
+}

dicegame/styles.css

@@ -0,0 +1,41 @@
+.container {
+    width: 70%;
+    margin: auto;
+    text-align: center;
+  }
+
+  .dice {
+    text-align: center;
+    display: inline-block;
+
+  }
+
+  body {
+    background-color: #393E46;
+  }
+
+  h1 {
+    margin: 30px;
+    font-family: 'Lobster', cursive;
+    text-shadow: 5px 0 #232931;
+    font-size: 8rem;
+    color: #4ECCA3;
+  }
+
+  p {
+    font-size: 2rem;
+    color: #4ECCA3;
+    font-family: 'Indie Flower', cursive;
+  }
+
+  img {
+    width: 80%;
+  }
+
+  footer {
+    margin-top: 5%;
+    color: #EEEEEE;
+    text-align: center;
+    font-family: 'Indie Flower', cursive;
+
+  }