Trinity-Developers-Club · jaditi930 · Oct 25, 2022
diff --git a/Stone Paper Scissors/index.html b/Stone Paper Scissors/index.html
@@ -0,0 +1,32 @@
+<!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>Stone Paper and Scissors</title>
+    <link rel="stylesheet" href="style.css">
+    <h1>Stone Paper and Scissors</h1>
+</head>
+<body>
+    <div class="container">
+    <input type="image" class="btn" id="stone" src="rock.png">
+    <input type="image" class="btn" id="paper" src="paper.png">
+    <input type="image" class="btn" id="scissor" src="scissors.png">
+    </div>
+    <div id="scorecard" class="center">
+        <button id="start" style="background-color:green;width:400px;" class="bt">Start New Game</button>
+        <h2 id="match">
+
+        </h2>
+        <h2 id="final">
+
+        </h2> 
+    </div>
+
+    </div>
+
+    <script src="index.js"></script>
+
+</body>
+</html>
diff --git a/Stone Paper Scissors/index.js b/Stone Paper Scissors/index.js
@@ -0,0 +1,71 @@
+choices = ["stone", "paper", "scissor"];
+let comp_score = 0;
+let human_score = 0;
+document.getElementById("start").addEventListener("click", startGame);
+function startGame() {
+  //Creating a Reset Button
+  let b = document.createElement("button");
+  b.classList.add("bt");
+  b.style.background = "red";
+  b.innerText = "Reset";
+  b.id = "reset";
+  b.addEventListener("click", reset);
+  let score = document.getElementById("scorecard");
+  if (score.hasChildNodes()) score.removeChild(score.children[0]);
+  const a = ["human", "comp"];
+  for (let e = 0; e < 2; e++) {
+    let h = document.createElement("div");
+    h.classList.add("display");
+    score.appendChild(h);
+    let p1 = document.createElement("h2");
+    p1.innerText = `${a[e]} Score`;
+    h.appendChild(p1);
+    let p2 = document.createElement("h2");
+    h.appendChild(p2);
+    p2.innerText = 0;
+    p2.id = `${a[e]}`;
+  }
+  score.appendChild(b);
+  document
+    .querySelectorAll(".btn")
+    .forEach((e) => e.addEventListener("click", update_score));
+}
+function update_score(evt) {
+  let id = evt.currentTarget.id;
+  let comp = choices[Math.floor(Math.random() * choices.length)];
+  let text = `${id}  VS  ${comp}`;
+  document.getElementById("match").innerText = text;
+  if (comp == "scissor" && id == "stone") human_score += 1;
+  else if (comp == "paper" && id == "stone") comp_score += 1;
+  else if (comp == "scissor" && id == "paper") comp_score += 1;
+  else if (comp == "stone" && id == "paper") human_score += 1;
+  else if (comp == "paper" && id == "scissor") human_score += 1;
+  else if (comp == "stone" && id == "scissor") comp_score += 1;
+  document.getElementById("human").innerText = human_score;
+  document.getElementById("comp").innerText = comp_score;
+  if (comp_score == 3 || human_score == 3) {
+    document.getElementById("final").innerText =
+      comp_score > human_score ? "You lose" : "You win";
+    let b = document.getElementById("reset");
+    b.style.background = "green";
+    b.innerText = "Start New Game";
+    document.getElementById("stone").removeEventListener("click", update_score);
+    document.getElementById("paper").removeEventListener("click", update_score);
+    document.getElementById("scissor").removeEventListener("click", update_score);
+    return;
+  }
+}
+function reset() {
+  comp_score = 0;
+  human_score = 0;
+  let b = document.getElementById("reset");
+  b.style.background = "red";
+  b.innerText = "Reset";
+  document.getElementById("final").innerText = "";
+  document.getElementById("match").innerText = "";
+  document.getElementById("human").innerText = human_score;
+  document.getElementById("comp").innerText = comp_score;
+  document.getElementById("stone").addEventListener("click", update_score);
+  document.getElementById("paper").addEventListener("click", update_score);
+  document.getElementById("scissor").addEventListener("click", update_score);
+}
diff --git a/Stone Paper Scissors/paper.png b/Stone Paper Scissors/paper.png
diff --git a/Stone Paper Scissors/rock.png b/Stone Paper Scissors/rock.png
diff --git a/Stone Paper Scissors/scissors.png b/Stone Paper Scissors/scissors.png
diff --git a/Stone Paper Scissors/style.css b/Stone Paper Scissors/style.css
@@ -0,0 +1,45 @@
+*
+{
+    color:white;
+}
+.container
+{
+    display:flex;
+    justify-content: space-evenly;
+    margin:30px;
+}
+.btn
+{
+    height:250px;
+    width:250px;
+    border-radius:45px;
+}
+.bt
+{
+    background-color: red;
+    height:70px;
+    width:200px;
+    font-size: larger;
+}
+h1{
+    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-size:80px;
+    text-align: center;
+    color: white;
+}
+body{
+    background-color: black;
+}
+h2{
+    color: white;
+    text-align: center;
+}
+.center
+{
+    text-align: center;
+}
+.display
+{
+     display:inline-block;
+     width:48%;
+}