Add The Project

thinkswell · May 16, 2024 · db48757 · db48757
1 parent 4a0c96d
commit db48757
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/PopTheBubbles/AmethystDev2713/Pop The Bubbles.html b/PopTheBubbles/AmethystDev2713/Pop The Bubbles.html
@@ -0,0 +1,35 @@
+<html>
+    <head>
+        <title>Pop The Bubbles!</title>
+        <meta charset="UTF-8"/>
+        <script>
+            var layer = 0;
+            var count = 0;
+            setInterval(function() {
+                var newBubble = document.createElement("div");
+                newBubble.style.position = "absolute";
+                newBubble.style.marginLeft = (Math.floor(Math.random() * (window.innerWidth)) + 1) + "px";
+                newBubble.style.marginTop = (Math.floor(Math.random() * (window.innerHeight)) + 1) + "px";
+                newBubble.style.height = "24px";
+                newBubble.style.width = "24px";
+                newBubble.style.border = "1px solid DodgerBlue";
+                newBubble.style.borderRadius = "24px";
+                newBubble.style.backgroundColor = "DodgerBlue";
+                layer += 1;
+                newBubble.style.zIndex = layer;
+                document.body.appendChild(newBubble);
+                count += 1;
+                document.getElementById("count").innerHTML = count;
+		newBubble.onclick = function() {
+			newBubble.innerHTML = "POP!";
+			newBubble.style.border = "none";
+			newBubble.style.backgroundColor = "";
+			count -= 1;
+		}
+            }, 200);
+        </script>
+    </head>
+    <body style="position: relative;">
+        <div>Bubbles! There are currently <span id="count">0</span> bubbles on the screen. Click a bubble to pop it</div>
+    </body>
+</html>