Make some changes with the functionality of the app

index.css

@@ -4,28 +4,28 @@
     padding: 0px;
     border: 2px solid blue;
     border-radius: 5px;
-    width: 550px;
-    height: 600px;
+    width: 600px;
+    height: 670px;
     background: rgb(241, 183, 245);
     text-align: center;
 }
 
 #teamOne{
     /* border: 2px solid rgb(1, 0, 18); */
     border-bottom: 1px solid black;
-    width: 550px;
-    height: 270px;
+    width: 600px;
+    height: 320px;
 }
 
 #header{
     color: blue;
-    font-size: 40px;
+    font-size: 35px;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }
 
 .scores{
     color: black;
-    font-size: 90px;
+    font-size: 80px;
     font-weight: bolder;
 }
 
@@ -34,9 +34,9 @@ button{
     border: 1px solid rgb(101, 7, 208);
     border-radius: 3px;
     margin-top: -8px;
-    width: 50px;
-    height: 40px;
-    font-size: 25px;
+    width: 40px;
+    height: 30px;
+    font-size: 20px;
     font-weight: bolder;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
@@ -72,4 +72,17 @@ button:hover{
 }
 .losing{
     color: darkred;
+}
+
+#home-delete-btn, #away-delete-btn {
+    color: red;
+    width: 60px;
+    height: 25px;
+    font-size: 15px;
+    text-transform: uppercase;
+}
+
+#home-delete-btn:hover, #away-delete-btn:hover {
+    background: black;
+    color: white;
 }

index.html

@@ -14,24 +14,25 @@ <h1 id="header"> HOME TEAM </h1>
             <div class="scores" id="home-score"> 0 </div><br>
             <button id="homeBtnOne"> +1 </button>
             <button id="homeBtnTwo"> +2 </button>
-            <button id="homeBtnThree"> +3 </button>
+            <button id="homeBtnThree"> +3 </button><br><br>
+    <!-- create a function that will delete one form the score when click -->
+            <button type="button" id="home-delete-btn"> Delete </button>
         </div>
-        <!-- button to delete 1 from the scores when click -->
-        <!-- <button id="delete-bnt" onclick="deleteBtn()"> Delete </button> -->
 
         <div class="teamTwo">
             <h1 id="header"> AWAY TEAM </h1>
             <div class="scores" id="away-score"> 0 </div><br>
             <button id="awayBtnOne"> +1 </button>
             <button id="awayBtnTwo"> +2 </button>
-            <button id="awayBtnThree"> +3 </button>
-        </div>
-            <br>
+            <button id="awayBtnThree"> +3 </button><br><br>
+    <!-- create a function that will delete one form the score when click -->
+            <button type="button" id="away-delete-btn"> Delete </button>
+        </div><br>
+    <!-- Create the RESET button that will reset the entire scores for a new scores-->
     <div id="resert-button">
         <button id="resert-bnt" onclick="resert()"> Reset </button>
     </div>
     </div>
-    <!-- <button id="resert-bnt" onclick="resert()"> Resert </button> -->
     <script src="index.js"></script>
 </body>
 </html>

index.js

@@ -1,22 +1,20 @@
 
-// function status(){
-//     if(currentHomeScore > currentAwayScore){
-//         currentHomeScore.classList.add(winning);
-//         currentAwayScore.classList.add(loser);
-//     }else if (currentAwayScore > currentHomeScore) {
-//         currentAwayScore.classList.add(winning)
-//         currentHomeScore.classList.add(loser)
-//     } else {
-
-//     }
-// }
+function scoreStatus(){
+    if(currentHomeScore > currentAwayScore){
+        homeScore.classList.add("winning");
+    }else if (currentAwayScore > currentHomeScore) {
+        awayScore.classList.add("winning");
+    } else {
+        homeScore.classList.remove("winning");
+        awayScore.classList.remove("winning");
+    }
+}
 
 let currentHomeScore = 0;
 
 const addHomeBtnOne = document.getElementById("homeBtnOne");
 const addHomeBtnTwo = document.getElementById("homeBtnTwo");
 const addHomeBtnThree = document.getElementById("homeBtnThree");
-
 // home score
 let homeScore = document.getElementById("home-score");
 
@@ -34,27 +32,25 @@ function addThree() {
     currentHomeScore += 3;
 }
 
-
 addHomeBtnOne.addEventListener("click", function() {
     addOne()
     homeScore.innerText = currentHomeScore;
+    scoreStatus()
 })
 
 
 addHomeBtnTwo.addEventListener("click", function() {
     addTwo()
     homeScore.innerText = currentHomeScore;
+    scoreStatus()
 })
 
 addHomeBtnThree.addEventListener("click", function() {
     addThree()
     homeScore.innerText = currentHomeScore;
+    scoreStatus()
 });
 
-// function to minus 1 form the score
-// function deleteBtn(){
-//     currentHomeScore -= 1;
-// }
 
 
 let currentAwayScore = 0;
@@ -82,16 +78,19 @@ function addAwayThree() {
 addAwayBtnOne.addEventListener("click", function() {
     addAwayOne()
     awayScore.innerText = currentAwayScore;
+    scoreStatus()
 })
 
 addAwayBtnTwo.addEventListener("click", function() {
     addAwayTwo()
     awayScore.innerText = currentAwayScore;
+    scoreStatus()
 })
 
 addAwayBtnThree.addEventListener("click", function() {
     addAwayThree()
     awayScore.innerText = currentAwayScore;
+    scoreStatus()
 });
 
 function resert() {
@@ -100,3 +99,21 @@ function resert() {
     homeScore.innerHTML = currentHomeScore;
     awayScore.innerHTML = currentAwayScore;
 }
+
+let homeDeleteBtn = document.getElementById("home-delete-btn");
+let awayDeleteBtn = document.getElementById("away-delete-btn");
+
+function deleteOne() {
+    currentHomeScore -= 1;
+    currentAwayScore -= 1;
+}
+homeDeleteBtn.addEventListener("click", function() {
+    deleteOne()
+    homeScore.innerText = currentHomeScore;
+})
+
+awayDeleteBtn.addEventListener("click", function() {
+    deleteOne()
+    awayScore.innerText = currentAwayScore;
+})
+