2

Author: kilsw1ch

carrom.css

@@ -7,12 +7,15 @@ body{
     font-size: 4rem;
 }
 
-/* .material-icons{
-    font-size: 50px;
-} */
-
 .player1{
 
+    /* input{
+        color: #000;
+        background: transparent;
+        border: none;
+        font-size: 4rem;
+    } */
+
     position:absolute;
     width: 50%;
     height: 46%;
@@ -51,18 +54,18 @@ body{
     text-align: center;
 }
 
-p{
-    margin-top:10%;
-}
+/* input{
 
-input{
-
-    /* margin-top:10%; */
+    margin-top:10%;
 
-}
+} */
 
 .player1, .player2, .player3, .player4{
 
+    p{
+        margin-top:10%;
+    }
+
     span{
         display: inline-block;
         margin-top:35%;
@@ -139,7 +142,7 @@ input{
     width: 100%;
     background-color: #999;
 
-    .resetbtn, .newbtn{
+    .resetbtn, .newbtn, .statsbtn{
 
         margin:auto;
 
@@ -151,4 +154,26 @@ input{
             font-size: 4rem;
         }
     }
+}
+
+.confirmwindow{
+
+    visibility: hidden;
+    position: absolute;
+    top: 40%;
+    left: 15%;
+    text-align: center;
+    background-color: #000;
+    border-radius: 1%;
+    color: #fff;
+    width: 70%;
+    height: 20%;
+
+    button{
+
+        border: none;
+        font-size: 3rem;
+        padding: 15px 25px;
+        border-radius: 5%;
+    }
 }

carrom.js

@@ -33,9 +33,15 @@ const p4rani = document.getElementById('p4rani')
 const total=document.getElementById('displayedtotal');
 let totalscore = 19;
 
-//reset
+//bottombar
 const reset=document.getElementById('resetbtn');
 
+const newbtn=document.getElementById('newbtn');
+const confirmwindow=document.getElementById('confirmwindow');
+const nobtn=document.getElementById('nobtn');
+const yesbtn=document.getElementById('yesbtn');
+
+
 {//inc logic
 p1.addEventListener('click', function() {
 
@@ -179,86 +185,102 @@ p4dec.addEventListener('click', function(event){
 {//rani logic
 p1rani.addEventListener('click', function(event){
 
-    event.stopPropagation();
+    if(p1score<9){
 
-    this.disabled=true;
-    p2rani.disabled=true;
-    p3rani.disabled=true;
-    p4rani.disabled=true;
+        event.stopPropagation();
 
-    this.style.setProperty("background-color", "#999");
-    p2rani.style.setProperty("background-color", "#999");
-    p3rani.style.setProperty("background-color", "#999");
-    p4rani.style.setProperty("background-color", "#999");
+        this.disabled=true;
+        p2rani.disabled=true;
+        p3rani.disabled=true;
+        p4rani.disabled=true;
 
-    p1score++;
-    p1scoreDisplay.textContent=p1score;
+        p2rani.style.setProperty("background-color", "#999");
+        p3rani.style.setProperty("background-color", "#999");
+        p4rani.style.setProperty("background-color", "#999");
 
-    totalscore--;
-    total.innerText=totalscore;
+        p1score=p1score+2;
+        p1scoreDisplay.textContent=p1score;
+
+        totalscore=totalscore-2;
+        total.innerText=totalscore;
+    }
+
+    else event.stopPropagation();
 })
 
 p2rani.addEventListener('click', function(event){
 
-    event.stopPropagation();
+    if(p2score<9){
 
-    this.disabled=true;
-    p1rani.disabled=true;
-    p3rani.disabled=true;
-    p4rani.disabled=true;
+        event.stopPropagation();
 
-    this.style.setProperty("background-color", "#999");
-    p1rani.style.setProperty("background-color", "#999");
-    p3rani.style.setProperty("background-color", "#999");
-    p4rani.style.setProperty("background-color", "#999");
+        this.disabled=true;
+        p1rani.disabled=true;
+        p3rani.disabled=true;
+        p4rani.disabled=true;
 
-    p2score++;
-    p2scoreDisplay.textContent=p2score;
+        p1rani.style.setProperty("background-color", "#999");
+        p3rani.style.setProperty("background-color", "#999");
+        p4rani.style.setProperty("background-color", "#999");
 
-    totalscore--;
-    total.innerText=totalscore;
+        p2score=p2score+2;
+        p2scoreDisplay.textContent=p2score;
+
+        totalscore=totalscore-2;
+        total.innerText=totalscore;
+    }
+
+    else event.stopPropagation();
 })
 
 p3rani.addEventListener('click', function(event){
 
-    event.stopPropagation();
+    if(p3score<9){
 
-    this.disabled=true;
-    p1rani.disabled=true;
-    p2rani.disabled=true;
-    p4rani.disabled=true;
+        event.stopPropagation();
 
-    this.style.setProperty("background-color", "#999");
-    p2rani.style.setProperty("background-color", "#999");
-    p1rani.style.setProperty("background-color", "#999");
-    p4rani.style.setProperty("background-color", "#999");
+        this.disabled=true;
+        p1rani.disabled=true;
+        p2rani.disabled=true;
+        p4rani.disabled=true;
 
-    p3score++;
-    p3scoreDisplay.textContent=p3score;
+        p2rani.style.setProperty("background-color", "#999");
+        p1rani.style.setProperty("background-color", "#999");
+        p4rani.style.setProperty("background-color", "#999");
 
-    totalscore--;
-    total.innerText=totalscore;
+        p3score=p3score+2;
+        p3scoreDisplay.textContent=p3score;
+
+        totalscore=totalscore-2;
+        total.innerText=totalscore;
+    }
+
+    else event.stopPropagation();
 })
 
 p4rani.addEventListener('click', function(event){
 
-    event.stopPropagation();
+    if(p4score<9){
 
-    this.disabled=true;
-    p1rani.disabled=true;
-    p2rani.disabled=true;
-    p3rani.disabled=true;
+        event.stopPropagation();
 
-    this.style.setProperty("background-color", "#999");
-    p2rani.style.setProperty("background-color", "#999");
-    p3rani.style.setProperty("background-color", "#999");
-    p1rani.style.setProperty("background-color", "#999");
+        this.disabled=true;
+        p1rani.disabled=true;
+        p2rani.disabled=true;
+        p3rani.disabled=true;
 
-    p4score++;
-    p4scoreDisplay.textContent=p4score;
+        p2rani.style.setProperty("background-color", "#999");
+        p3rani.style.setProperty("background-color", "#999");
+        p1rani.style.setProperty("background-color", "#999");
 
-    totalscore--;
-    total.innerText=totalscore;
+        p4score=p4score+2;
+        p4scoreDisplay.textContent=p4score;
+
+        totalscore=totalscore-2;
+        total.innerText=totalscore;
+    }
+
+    else event.stopPropagation();
 })
 }
 
@@ -289,4 +311,26 @@ reset.addEventListener('click', function(){
 
     total.innerText=totalscore;
 })
+}
+
+{//newbtn logic
+newbtn.addEventListener('click', function(){
+
+    confirmwindow.style.visibility = 'visible';
+})
+}
+
+{//nobtn logic
+nobtn.addEventListener('click', function(){
+
+    confirmwindow.style.visibility = 'hidden';
+})
+}
+
+{//yesbtn logic
+yesbtn.addEventListener('click', function(){
+
+    reset.click();
+    confirmwindow.style.visibility = 'hidden';
+})   
 }

index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -47,11 +48,20 @@
 
     <div class="bottombar">
 
+        <span class="statsbtn" id="statsbtn"><span class="material-icons">bar_chart</span></span>
+
         <span class="resetbtn" id="resetbtn"><span class="material-icons">replay</span></span>
 
         <span class="newbtn" id="newbtn"><span class="material-icons">add</span></span>
     </div>
 
+    <div class="confirmwindow" id="confirmwindow">
+
+        <p style="padding-top: 5%;">Start a new game?</p>
+        <button id="nobtn" style="position: absolute; top: 60%; left: 16%;">Cancel</button>
+        <button id="yesbtn" style="position: absolute; top: 60%; right: 16%;">Yes</button>
+    </div>
+
 </body>
 
 <script src="carrom.js"></script>