Add files via upload

saurav-chafle · Jun 28, 2024 · a868242 · a868242
1 parent 27c7c1b
commit a868242
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 0 deletions.
diff --git a/Scoring Board/score.css b/Scoring Board/score.css
@@ -0,0 +1,65 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+  }
+  body {
+    height: 100vh;
+    background-image: url("./images/ind_vs_pak.webp");
+    background-repeat: no-repeat;
+    background-size: cover;
+
+  }
+  .scoreboard {
+    background-color: black;
+    width: min(90%, 34em);
+    position: absolute;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    padding: 3em;
+    border-radius: 0.5em;
+    display: grid;
+    grid-template-columns: 2fr 1fr 2fr;
+    align-items: center;
+  }
+  .team {
+    text-align: center;
+    background-color: #353638;
+    padding: 2em;
+    border-radius: 0.5em;
+  }
+  button {
+    cursor: pointer;
+  }
+  #reset-btn {
+    background-color: transparent;
+    border: 3px solid white;
+    color: #07e387;
+    height: 5em;
+    width: 5em;
+    margin: auto;
+    border-radius: 0.5em;
+  }
+  .team h2 {
+    color: #dd9f33;
+  }
+  .team p {
+    color: #ffffff;
+    font-size: 3.75em;
+  }
+  .btn-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .team button {
+    background-color: #46dc69b6;
+    border: none;
+    outline: none;
+    padding: 0.3em 0.7em;
+    border-radius: 0.3em;
+    font-weight: 600;
+    font-size: 1.3em;
+  }
diff --git a/Scoring Board/score.html b/Scoring Board/score.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Scoreboard</title>
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="score.css" />
+  </head>
+  <body>
+    <div class="scoreboard">
+      <div class="team">
+        <h2>India</h2>
+        <p id="teamAScore">0</p>
+        <div class="btn-container">
+          <button onclick="incrementScore('teamA')">+</button>
+          <button onclick="decrementScore('teamA')">-</button>
+        </div>
+      </div>
+
+      <button id="reset-btn" onclick="resetScores()">Reset</button>
+
+      <div class="team">
+        <h2>Pakistan</h2>
+        <p id="teamBScore">0</p>
+        <div class="btn-container">
+          <button onclick="incrementScore('teamB')">+</button>
+          <button onclick="decrementScore('teamB')">-</button>
+        </div>
+      </div>
+    </div>
+    <!-- Script-->
+    <script src="score.js"></script>
+  </body>
+</html>
diff --git a/Scoring Board/score.js b/Scoring Board/score.js
@@ -0,0 +1,39 @@
+
+let teamAScore = 0;
+let teamBScore = 0;
+
+
+let teamAScoreValue = document.getElementById("teamAScore");
+let teamBScoreValue = document.getElementById("teamBScore");
+
+
+let incrementScore = (team) => {
+  if (team === "teamA") {
+    teamAScore++;
+    teamAScoreValue.textContent = teamAScore;
+  } else if (team === "teamB") {
+    teamBScore++;
+    teamBScoreValue.textContent = teamBScore;
+  }
+
+};
+
+
+let decrementScore = (team) => {
+  if (team === "teamA" && teamAScore > 0) {
+    teamAScore--;
+    teamAScoreValue.textContent = teamAScore;
+  } else if (team === "teamB" && teamBScore > 0) {
+    teamBScore--;
+    teamBScoreValue.textContent = teamBScore;
+  }
+};
+
+
+let resetScores = () => {
+  teamAScore = 0;
+  teamBScore = 0;
+  teamAScoreValue.textContent = teamAScore;
+  teamBScoreValue.textContent = teamBScore;
+};
+