Remember score from now on!

learning-thing · Jul 7, 2024 · de633d5 · de633d5
1 parent 107ef04
commit de633d5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/index.css b/index.css
@@ -33,4 +33,27 @@ body {
     background-color: rgb(0, 0, 0);
     width: 10%;
     border-radius: 5px;
+    transition-duration: .5s;
+}
+
+#confetti {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    animation: fall .5s ease-in-out forwards;
+    pointer-events: none;
+    width: 10px;
+    height: 10px;
+    background-color: aqua;
+}
+
+@keyframes fall {
+    0% {
+        top: 0;
+    }
+    100% {
+        top: 100%;
+    }
 }
diff --git a/index.html b/index.html
@@ -7,7 +7,8 @@
     </head>
     <body>
         <div id="root">
-            <div id="progbar">Progress: 0%</div>
+            <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>
         </div>

diff --git a/index.js b/index.js
@@ -1,5 +1,9 @@
-var x = 1;
-var clickCount = 0;
+var x = Number(document.cookie.valueOf("clicks").split("=")[1]);
+var clickCount = x;
+
+console.log(document.cookie.valueOf("clicks"));
+console.log(Number(document.cookie.valueOf("clicks").split("=")[1]));
+console.log(x);
 
 function ClickMeFunc() {
     clickCount++;
@@ -19,21 +23,25 @@ function ClickMeFunc() {
     } else {
         x = 0;
     }
-    console.log("X is zero");
     document.getElementById("title").innerHTML = "Kat Level: "+(clickCount+1);
     document.getElementById("title").style.marginLeft = ((x+1)*20) + "px";
 
     document.getElementById("clickme").style.marginLeft = ((x+1)*20) + "px";
     document.getElementById("progbar").innerHTML = "Progress: " + (clickCount) + "%";
-    document.getElementById("progbar").style.width = (clickCount) + "%";
+
+    if (clickCount > 12) {
+        document.getElementById("progbar").style.width = (12+clickCount) + "%";
+    }
     if (clickCount == 100) {
+        document.cookie = "clicks=10;";
         winner();
     }
 }
 
 
 function winner() {
-    alert("Winner");
+    alert("You're a Winner!");
+    console.log("Winner!");
 }
 
 //#initmethod();