First Commit

ravi-varma-ankam · Aug 4, 2021 · a387f33 · a387f33
commit a387f33
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Dice_images/dice1.png b/Dice_images/dice1.png
diff --git a/Dice_images/dice2.png b/Dice_images/dice2.png
diff --git a/Dice_images/dice3.png b/Dice_images/dice3.png
diff --git a/Dice_images/dice4.png b/Dice_images/dice4.png
diff --git a/Dice_images/dice5.png b/Dice_images/dice5.png
diff --git a/Dice_images/dice6.png b/Dice_images/dice6.png
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Dice Game</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster"
+      rel="stylesheet"
+    />
+
+    <script src="index.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Dice Game</h1>
+
+      <div class="dice">
+        <p>Player 1</p>
+        <img />
+      </div>
+
+      <div class="dice">
+        <p>Player 2</p>
+        <img />
+      </div>
+
+      <div class="score">
+        <p class="s">Score 1</p>
+        <p class="s">Score 2</p>
+      </div>
+
+      <!-- <div>
+        <button type="button" class="btn" onclick="playAgain()">Play Again</button>
+      </div> -->
+
+      <button  type="button" class="btn" style="vertical-align: middle" onclick="playAgain()">
+        <span>Play Again </span> 
+      </button>
+    </div>
+
+    <!--Java Script-->
+    <script src="index.js"></script>
+  </body>
+
+  <footer>🎲 Dice Challenge 🎲 by Ravi Varma Ankam</footer>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,83 @@
+/*Write Js so that after refreshing webpage player with highest die roll is declared winner.
+Check the video in the drive folder to see how your website should function.*/
+
+player1=prompt('Enter the name of Player 1');
+player2=prompt('Enter the name of Player 2');
+
+var score1=0;
+var score2=0;
+
+document.querySelectorAll('p')[0].innerHTML = player1;
+document.querySelectorAll('p')[1].innerHTML = player2;
+
+
+window.onload = function(){
+    //firstdice
+    const randomFirstNumber = Math.floor(Math.random() * 6) + 1;
+    const randomFirstDiceImage = 'Dice_images/dice' + randomFirstNumber + '.png';
+
+    document.querySelectorAll('img')[0].setAttribute('src', randomFirstDiceImage);
+
+
+    //second dice
+
+    const randomSecondNumber = Math.floor(Math.random() * 6) + 1;
+    const randomSecondDiceImage = 'Dice_images/dice' + randomSecondNumber + '.png';
+
+    document.querySelectorAll('img')[1].setAttribute('src', randomSecondDiceImage);
+
+
+    if (randomFirstNumber > randomSecondNumber) {
+        document.querySelector('h1')[1].innerHTML = "The Winner is " + player1;
+        score1 = score1+1;
+        // updatescore();
+    }
+    else if (randomFirstNumber < randomSecondNumber) {
+        document.querySelector('h1')[1].innerHTML = "The Winner is " + player2;
+        score2 = score2+1;
+        // updatescore();
+    }
+    else {
+        document.querySelector('h1').innerHTML = "Match Draw";
+    }
+
+    updatescore();
+}
+
+
+function updatescore(){
+document.querySelectorAll('p')[2].innerHTML = "Score of " + player1 + " is : " + Number(score1);
+document.querySelectorAll('p')[3].innerHTML = "Score of " + player2 + " is : " + Number(score2);
+}
+
+function playAgain(){
+    const randomFirstNumber = Math.floor(Math.random() * 6) + 1;
+    const randomFirstDiceImage = 'Dice_images/dice' + randomFirstNumber + '.png';
+
+    document.querySelectorAll('img')[0].setAttribute('src', randomFirstDiceImage);
+
+
+    //second dice
+    const randomSecondNumber = Math.floor(Math.random() * 6) + 1;
+    const randomSecondDiceImage = 'Dice_images/dice' + randomSecondNumber + '.png';
+
+    document.querySelectorAll('img')[1].setAttribute('src', randomSecondDiceImage);
+
+
+    if (randomFirstNumber > randomSecondNumber) {
+        document.querySelector('h1').innerHTML = "The Winner is " + player1;
+        score1 = score1+1;
+
+    }
+    else if (randomFirstNumber < randomSecondNumber) {
+        document.querySelector('h1').innerHTML = "The Winner is " + player2;
+        score2 = score2+1;
+
+    }
+    else {
+        document.querySelector('h1').innerHTML = "Match Draw";
+    }
+    updatescore();
+}
+
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,86 @@
+.container {
+  width: 60%;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.dice {
+  text-align: center;
+  display: inline-block;
+}
+
+body {
+  background-color: #393e46;
+}
+
+h1 {
+  margin: 0px;
+  font-family:cursive;
+  text-shadow: 5px 0 #232931;
+  font-size: 40px;
+  color: #4ecca3;
+}
+
+p {
+  font-size: 20px;
+  color: #4ecca3;
+  font-family:  cursive;
+}
+
+img {
+  width: 60%;
+}
+
+footer {
+  margin-top: 2%;
+  color: #eeeeee;
+  text-align: center;
+  font-family:  cursive;
+}
+/* 
+.s{
+  display: inline-flex;
+  float: left;
+} */
+
+.btn {
+  font-family: cursive;
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #8b2708;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 20px;
+  padding: 10px;
+  width: 150px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.btn span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.btn span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.btn:hover span {
+  padding-right: 25px;
+}
+
+.btn:hover span:after {
+  opacity: 1;
+  right: 0;
+}