js pre business logic

mr-hrr-harry · Mar 26, 2023 · b854bb3 · b854bb3
1 parent 1965578
commit b854bb3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,8 @@
     <title>Horror XO</title>
 
     <link rel="stylesheet" href="styles.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+
 </head>
 <body>
     <header id="hdr">
@@ -37,6 +39,9 @@ <h1>Horror XO</h1>
         Start
         <span id="turn"></span>
         </p>
+        <label id="refresh" onclick="reload()" style="display: none">
+            <i class='bx bx-refresh'></i>
+        </label>
 
     </Section>
 

diff --git a/script.js b/script.js
@@ -1,13 +1,16 @@
-
-let str = document.getElementById("tableSec");
+let tblSec = document.getElementById("tableSec");
 function start(){
-    str.removeAttribute("hidden");
+    tblSec.removeAttribute("hidden");
+    document.getElementById("refresh").removeAttribute("style");
     notor.removeAttribute("onclick");
     notor.innerHTML="Player turn";
     turn.textContent="X";
     return;
 }
 
+function reload(){
+    location.reload();
+}
 
 let mat=[[0,0,0],
          [0,0,0],
@@ -16,6 +19,8 @@ var flag=0, ctr=0;
 
 const notor = document.getElementById("notator");
 const turn = document.getElementById("turn");
+var end=0;
+
 function xORo(event){
 
 
@@ -28,15 +33,13 @@ function xORo(event){
 
     if(cell.innerHTML==""){
         if(flag==0){
-            cell.classList.add("xAttr");
             flag=1;
             ctr++;
             cell.innerHTML="X";
             mat[row][col]=1;
             turn.innerHTML="O's";
         }
         else{
-            cell.classList.add("oAttr");
             flag=0;
             ctr++;
             cell.innerHTML="O";
@@ -45,7 +48,7 @@ function xORo(event){
         }
     }
     else{
-        alert("Fill on empty boxes");
+        alert("You cant replace the filled boxes!");
         return;
     }
 
@@ -62,9 +65,9 @@ function xORo(event){
     }
 
     if(ctr==9){
-        alert("Oops! Match Draw 👻");
-        prompt("Do you like this game ?");
+        notor.innerHTML="Oops Match Draw!";
+
     }
 
     console.log(mat);
-}
+}
diff --git a/styles.css b/styles.css
@@ -97,10 +97,11 @@ td.xAttr{
 }
 
 #notator{
-    padding: 20px;;
-    margin-top: 30px;
+    padding: 20px;
+    margin: 30px 10px;
     min-width: 100px;
     display: inline-block;
+    position: relative;
 
     border: 3px solid #000;
     border-radius: 30px;
@@ -112,14 +113,23 @@ td.xAttr{
     transition: 0.3s ease-out;
     cursor: pointer;
 }
-#notator:hover{
-    margin-top: none;
-    transform: scale(1.001);
-    background: linear-gradient(135deg, #FFFF00, #CA2A2A);
+#notator:hover{ 
+    transform: scale(1.01);
+    background: linear-gradient(45deg, #FFFF00, #CA2A2A);
     box-shadow: 0 0 10px #000;
     font-size: 21px;
 }
 
+#refresh{
+    padding: 20px;
+    margin-left: 30px;
+    display: inline-block;
+
+    font-size: 20px;
+    font: 600;
+    cursor: pointer;
+}
+
 /* Footer */
 #ftr{
     border-radius: 20px;