content

learning-thing · Jul 7, 2024 · 28ec21e · 28ec21e
1 parent a777214
commit 28ec21e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/index.css b/index.css
@@ -15,10 +15,22 @@
     color: white;
     border-radius: 10px;
     padding: 10px;
+}
 
+#root {
+    text-align: center;
 }
 
 body {
-
     background-color: rgba(82, 77, 129, 0.671);
+}
+
+
+#progbar {
+    font-family: sans-serif;
+    height: 20px;
+    color: white;
+    background-color: rgb(0, 0, 0);
+    width: 10%;
+    border-radius: 5px;
 }
diff --git a/index.html b/index.html
@@ -7,8 +7,9 @@
     </head>
     <body>
         <div id="root">
+            <div id="progbar">Progress: 0%</div>
             <h1 id="title">OnlyKats</h1>
-            <button onclick="initmethod()" id="clickme">Click Me</button>
+            <button onclick="ClickMeFunc()" id="clickme">Click Me</button>
         </div>
     </body>
     <script src="index.js"></script>

diff --git a/index.js b/index.js
@@ -1,20 +1,39 @@
 var x = 1;
 var clickCount = 0;
 
-function initmethod() {
+function ClickMeFunc() {
     clickCount++;
-    document.getElementById("clickme").innerHTML = "Click Me " + clickCount;
+    if (clickCount == 1) {
+        document.getElementById("clickme").innerHTML = "Clicked once";;
+    } else {
+        if (clickCount == 2) {
+            document.getElementById("clickme").innerHTML = "Clicked twice";
+        }
+    }
+    if (clickCount > 2) {
+        document.getElementById("clickme").innerHTML = "Clicked " + clickCount+ " times";
+    }
 
     if (x < 9) {
         x+=1;
-        console.log("X is zero");
-        document.getElementById("title").innerHTML = "Kat Level: "+(x+1);
-        document.getElementById("title").style.marginLeft = ((x+1)*20) + "px";
     } 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 == 9) {
+        winner();
+    }
 }
 
 
+function winner() {
+    alert("Winner");
+}
 
 //#initmethod();