score_tracker

MuzafferKocak · Feb 28, 2024 · d8bf461 · d8bf461
1 parent 9cccfe2
commit d8bf461
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 0 deletions.
diff --git a/HomeWorks/WorkShop/Score_Tracker/img/CLARUSWAY_LOGO.png b/HomeWorks/WorkShop/Score_Tracker/img/CLARUSWAY_LOGO.png
diff --git a/HomeWorks/WorkShop/Score_Tracker/img/teble-tennis.gif b/HomeWorks/WorkShop/Score_Tracker/img/teble-tennis.gif
diff --git a/HomeWorks/WorkShop/Score_Tracker/index.html b/HomeWorks/WorkShop/Score_Tracker/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Score Tracker</title>
+</head>
+<body>
+    <div class="wrapper">
+        <h1></h1>
+        <img src="./img/teble-tennis.gif" alt="" />
+        <div class="title">
+          <h2>Scores</h2>
+          <p><span class="js-fplayercount">0</span> to <span class="js-splayercount">0</span></p>
+          <p>scores <input type="number" class="js-input" value="0"/></p>
+          <div class="buttons">
+            <button class="js-firstButton">+1 for player1</button>
+            <button class="js-secondButton">+1 for player2</button>
+            <button class="js-thirdButton">reset</button>
+          </div>
+        </div>
+      </div>
+
+      <script src="./index.js"></script>
+</body>
+</html>
diff --git a/HomeWorks/WorkShop/Score_Tracker/index.js b/HomeWorks/WorkShop/Score_Tracker/index.js
@@ -0,0 +1,39 @@
+const selectors = {
+    firstButton: document.querySelector(".js-firstButton"),
+    secondButton: document.querySelector(".js-secondButton"),
+    thirdButton: document.querySelector(".js-thirdButton"),
+    firstplayercount: document.querySelector(".js-fplayercount"),
+    secondplayercount: document.querySelector(".js-splayercount"),
+    wininput: document.querySelector(".js-input"),
+    total: 0,
+  };
+
+  selectors.firstButton.addEventListener("click", () => {
+    selectors.firstplayercount.innerHTML++;
+    if (selectors.wininput.value == selectors.firstplayercount.innerHTML) {
+      selectors.firstplayercount.style.color = "green";
+      selectors.secondplayercount.style.color = "red";
+      selectors.firstButton.disabled = true;
+      selectors.secondButton.disabled = true;
+    }
+  });
+
+  selectors.secondButton.addEventListener("click", () => {
+    selectors.secondplayercount.innerHTML++;
+    if (selectors.wininput.value == selectors.secondplayercount.innerHTML) {
+      selectors.firstplayercount.style.color = "red";
+      selectors.secondplayercount.style.color = "green";
+      selectors.firstButton.disabled = true;
+      selectors.secondButton.disabled = true;
+    }
+  });
+
+  selectors.thirdButton.addEventListener("click", () => {
+    console.log("third button");
+    selectors.firstplayercount.innerHTML = 0;
+    selectors.secondplayercount.innerHTML = 0;
+    selectors.firstButton.disabled = false;
+    selectors.secondButton.disabled = false;
+    selectors.firstplayercount.style.color = "black";
+      selectors.secondplayercount.style.color = "black";
+  });
diff --git a/HomeWorks/WorkShop/Score_Tracker/style.css b/HomeWorks/WorkShop/Score_Tracker/style.css
@@ -0,0 +1,41 @@
+.wrapper {
+    width: 500px;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .wrapper img {
+    width: 100%;
+  }
+
+  button:first-child {
+    padding: 5px 0;
+    background-color: green;
+    color: white;
+    width: 150px;
+  }
+
+  button:first-child:disabled {
+      opacity: .5;
+  }
+
+  button:nth-child(2) {
+    padding: 5px 0;
+    background-color: blue;
+    color: white;
+    width: 150px;
+  }
+
+  button:nth-child(2):disabled {
+      opacity: .5;
+  }
+
+  button:last-child {
+    padding: 5px 0;
+    background-color: pink;
+    color: white;
+    width: 150px;
+  }