adding score keeping web app

chopraanjali · Dec 15, 2023 · 8996c64 · 8996c64
commit 8996c64
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,58 @@
+const p1 = {
+    score: 0,
+    button: document.querySelector('#p1Button'),
+    display: document.querySelector('#p1ScoreDisplay')
+}
+
+const p2 = {
+    score: 0,
+    button: document.querySelector('#p2Button'),
+    display: document.querySelector('#p2ScoreDisplay')
+}
+
+const resetButton = document.querySelector('#reset');
+const winningScoreSelect = document.querySelector('#winningScore');
+
+let winningScore = 3;
+let isGameOver = false;
+
+function updateScores(player, opponent) {
+    if (!isGameOver) {
+        player.score += 1;
+        if (player.score === winningScore) {
+            isGameOver = true;
+            player.display.classList.add('has-text-success');
+            opponent.display.classList.add('has-text-danger');
+            player.button.disabled = true;
+            opponent.button.disabled = true;
+
+        }
+        player.display.textContent = player.score;
+    }
+}
+
+winningScoreSelect.addEventListener('change', function () {
+    winningScore = parseInt(this.value);
+    reset();
+})
+
+p1.button.addEventListener('click', function () {
+    updateScores(p1, p2)
+})
+
+p2.button.addEventListener('click', function () {
+    updateScores(p2, p1)
+})
+
+resetButton.addEventListener('click', reset)
+
+function reset() {
+    isGameOver = false;
+    for (let p of [p1, p2]) {
+        p.score = 0;
+        p.display.textContent = 0;
+        p.display.classList.remove('has-text-success', 'has-text-danger');
+        p.button.disabled = false;
+    }
+}
+
diff --git a/index.html b/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Score Keeper</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <style>
+        .winner {
+            color: green;
+        }
+
+        .loser {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="section">
+        <div id="allContentContainer" class="container">
+            <div class="column">
+                <div class="column is-half is-offset-one-quarter">
+                    <div class="card">
+                        <div class="card-image is-2by1">
+                            <figure class="image">
+                                <img src="https://images.unsplash.com/photo-1534158914592-062992fbe900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3784&q=80"
+                                    alt="ping pong racket on a table">
+                            </figure>
+                        </div>
+
+                        <header class="card-header">
+
+
+                            <p class="card-header-title">
+
+                                Ping Pong Score Keeper
+
+                            </p>
+                        </header>
+
+                        <div class="card-content">
+                            <div class="content">
+                                <h1 class="title is-1"> <span id="p1ScoreDisplay">0</span> to <span
+                                        id='p2ScoreDisplay'>0</span></h1>
+                                <p class="subtitle">
+                                    Use the buttons below to keep score
+                                </p>
+
+                                <label for="winningScore" class="label is-medium is-inline is-center">Playing To</label>
+                                <div class="select is-rounded">
+                                    <select name="" id="winningScore">
+                                        <option value="3">3</option>
+                                        <option value="4">4</option>
+                                        <option value="5">5</option>
+                                        <option value="6">6</option>
+                                        <option value="7">7</option>
+                                        <option value="8">8</option>
+                                        <option value="9">9</option>
+                                        <option value="10">10</option>
+                                        <option value="11">11</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <footer class="card-footer">
+                            <button id="p1Button" class="is-primary button card-footer-item is-large">+1 Player
+                                1</button>
+                            <button id="p2Button" class="is-info button card-footer-item is-large">+1 Player 2</button>
+                            <button id="reset" class="is-danger button card-footer-item is-large">Reset</button>
+                        </footer>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <script src="app.js"></script>
+</body>
+
+</html>