Merge pull request #1136 from AmethystDev2713/PopTheBubbles-AmethystDev2713-branch

NitkarshChourasia · web-flow · commit 22577c714c5b · 2024-05-17T14:09:55.000+05:30
Add a project called "Pop The Bubbles"
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>
diff --git a/PopTheBubbles/AmethystDev2713/README.md b/PopTheBubbles/AmethystDev2713/README.md
@@ -0,0 +1,5 @@
+# Pop The Bubbles!
+
+A fun little JavaScript demo. 5 bubbles will spawn every second, and you can click on one to pop it. Can you pop them all?
+
+![Screenshot](https://raw.githubusercontent.com/AmethystDev2713/javascript-mini-projects/PopTheBubbles-AmethystDev2713-branch/PopTheBubbles/AmethystDev2713/image.png)
diff --git a/PopTheBubbles/AmethystDev2713/image.png b/PopTheBubbles/AmethystDev2713/image.png
