QOL improvements

learning-thing · Jul 7, 2024 · 65aba82 · 65aba82
1 parent de633d5
commit 65aba82
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/index.css b/index.css
@@ -8,7 +8,7 @@
     transition-duration: .4s;
 }
 
-#clickme {
+.prettybtn {
     font-family: sans-serif;
     transition-duration: 1s;
     background-color: black;
@@ -46,7 +46,8 @@ body {
     pointer-events: none;
     width: 10px;
     height: 10px;
-    background-color: aqua;
+    background-color: transparent;
+    border-radius: 5px;
 }
 
 @keyframes fall {

diff --git a/index.html b/index.html
@@ -7,10 +7,12 @@
     </head>
     <body>
         <div id="root">
+            <h3 id="LastKat"></h3>
             <div id="progbar" style="width: 12%;">Progress: 0%</div>
             <div id="confetti"></div>
             <h1 id="title">OnlyKats</h1>
-            <button onclick="ClickMeFunc()" id="clickme">Click Me</button>
+            <button onclick="ClickMeFunc()" id="clickme" class="prettybtn">Click Me</button>
+            <button onclick="ResetClicks()" id="resetbtn" class="prettybtn">Reset Score</button>
         </div>
     </body>
     <script src="index.js"></script>

diff --git a/index.js b/index.js
@@ -1,10 +1,17 @@
-var x = Number(document.cookie.valueOf("clicks").split("=")[1]);
-var clickCount = x;
+if (document.cookie.length > 1) {
+    var x = Number(document.cookie.valueOf("clicks").split("=")[1])-1;
+    var clickCount = x;
+} else {
+    var x = 0;
+    var clickCount = 0;
+}
 
 console.log(document.cookie.valueOf("clicks"));
 console.log(Number(document.cookie.valueOf("clicks").split("=")[1]));
 console.log(x);
 
+document.getElementById("LastKat").innerHTML = "Last Kat level: " + (clickCount);
+
 function ClickMeFunc() {
     clickCount++;
     if (clickCount == 1) {
@@ -30,18 +37,37 @@ function ClickMeFunc() {
     document.getElementById("progbar").innerHTML = "Progress: " + (clickCount) + "%";
 
     if (clickCount > 12) {
-        document.getElementById("progbar").style.width = (12+clickCount) + "%";
+        document.getElementById("progbar").style.width = (clickCount) + "%";
     }
     if (clickCount == 100) {
-        document.cookie = "clicks=10;";
         winner();
     }
+
 }
 
+window.onbeforeunload = closingCode;
+function closingCode(){
+document.cookie = "clicks="+(clickCount+1)+";";
+   return null;
+}
 
 function winner() {
     alert("You're a Winner!");
     console.log("Winner!");
 }
 
+function ResetClicks() {
+    clickCount = 0;
+    x=0;
+    document.cookie = "clicks="+clickCount+";";
+    document.getElementById("clickme").innerHTML = "Click Me";
+    document.getElementById("progbar").style.width = "12%";
+    document.getElementById("progbar").innerHTML = "Progress: 0%";
+    document.getElementById("title").innerHTML = "Kat Level: 1";
+    document.getElementById("title").style.marginLeft = "0px";
+    document.getElementById("clickme").style.marginLeft = "0px";
+    document.getElementById("LastKat").innerHTML = "Last Kat level: 0";
+
+}
+
 //#initmethod();