5

Author: kilsw1ch

carrom.css

@@ -9,46 +9,41 @@ body{
 
 .player1{
 
-    position:absolute;
     width: 50%;
     height: 46%;
     background-color: #fdfd96;
-    text-align: center;
 }
 
 .player2{
 
-    position:absolute;
     left:50%;
     width: 50%;
     height: 46%;
     background-color: #FFB3BA;
-    text-align: center;
 }
 
 .player3{
 
-    position:absolute;
     top:46%;
     width: 50%;
     height: 46%;
     background-color: #B8E2B8;
-    text-align: center;
 }
 
 .player4{
 
-    position:absolute;
     top:46%;
     left:50%;
     width: 50%;
     height: 46%;
     background-color: #A7C6ED;
-    text-align: center;
 }
 
 .player1, .player2, .player3, .player4{
 
+    position:absolute;
+    text-align: center;
+
     p{
         margin-top:10%;
     }
@@ -73,10 +68,18 @@ body{
         background-color: #000;
 
         font-size: 5rem;
+        line-height: 0;
         color: #fff;
         text-align: center;
 
         padding: 10px;
+
+        span{
+            position: absolute;
+            font-size: 4rem;
+            bottom: 25px;
+            left: 29px;
+        }
     }
 
     .ranibtn{

carrom.js

@@ -394,10 +394,10 @@ yesbtn.onclick=function(){
     p3totalscore=p3totalscore+p3score;
     p4totalscore=p4totalscore+p4score;
 
-    p1avgscore=p1totalscore/gamecounter;
-    p2avgscore=p2totalscore/gamecounter;
-    p3avgscore=p3totalscore/gamecounter;
-    p4avgscore=p4totalscore/gamecounter;
+    p1avgscore=(p1totalscore/gamecounter).toFixed(2);
+    p2avgscore=(p2totalscore/gamecounter).toFixed(2);
+    p3avgscore=(p3totalscore/gamecounter).toFixed(2);
+    p4avgscore=(p4totalscore/gamecounter).toFixed(2);
 
     p1total.textContent=p1totalscore;
     p2total.textContent=p2totalscore;

index.html

@@ -17,29 +17,29 @@
 
         <p>baba</p>
         <span id="p1score">0</span>
-        <button class="decbtn" id="p1dec">-</button>
-        <button class="ranibtn" id="p1rani"><span class="material-symbols-outlined">poker_chip</span></button>
+        <button class="decbtn" id="p1dec"><span class="material-icons">remove</span></button>
+        <button class="ranibtn" id="p1rani"><span class="material-symbols-outlined">crown</span></button>
     </div>
 
     <div class="player2" id="player2">
         <p>dada</p>
         <span id="p2score">0</span>
-        <button class="decbtn" id="p2dec">-</button>
-        <button class="ranibtn" id="p2rani"><span class="material-symbols-outlined">poker_chip</span></button>
+        <button class="decbtn" id="p2dec"><span class="material-icons">remove</span></button>
+        <button class="ranibtn" id="p2rani"><span class="material-symbols-outlined">crown</span></button>
     </div>
 
     <div class="player3" id="player3">
         <p>rohan</p>
         <span id="p3score">0</span>
-        <button class="decbtn" id="p3dec">-</button>
-        <button class="ranibtn" id="p3rani"><span class="material-symbols-outlined">poker_chip</span></button>
+        <button class="decbtn" id="p3dec"><span class="material-icons">remove</span></button>
+        <button class="ranibtn" id="p3rani"><span class="material-symbols-outlined">crown</span></button>
     </div>
 
     <div class="player4" id="player4">
         <p>ma</p>
         <span id="p4score">0</span>
-        <button class="decbtn" id="p4dec">-</button>
-        <button class="ranibtn" id="p4rani"><span class="material-symbols-outlined">poker_chip</span></button>
+        <button class="decbtn" id="p4dec"><span class="material-icons">remove</span></button>
+        <button class="ranibtn" id="p4rani"><span class="material-symbols-outlined">crown</span></button>
     </div>
 
     <div class="totaldiv">
@@ -96,13 +96,13 @@
 
             <p id="gamesplayed" style="position: absolute; top: 45%; left: 5%;">Games played : 0</p>
 
-            <!-- <table id="gametable">
+            <table id="gametable">
 
                 <tr id="g1stat">
-                    <td style="background-color: #fdfd96"></td>
-                    <td style="background-color: #FFB3BA"></td>
-                    <td style="background-color: #B8E2B8"></td>
-                    <td style="background-color: #A7C6ED"></td>
+                    <td style="background-color: #fdfd96">1</td>
+                    <td style="background-color: #FFB3BA">2</td>
+                    <td style="background-color: #B8E2B8">3</td>
+                    <td style="background-color: #A7C6ED">4</td>
                 </tr>
 
                 <tr id="g2stat">
@@ -146,7 +146,7 @@
                     <td style="background-color: #B8E2B8"></td>
                     <td style="background-color: #A7C6ED"></td>
                 </tr>
-            </table> -->
+            </table>
         </div>
     </div>