bananu7/bubbles.html

## bubbles.html
<html>
    <head>
        <style>
            body { background-color: #29a; }
            .bubble {
                border-radius: 50%;
                border: 3px solid black;

                width: 50px;
                height: 50px;

                position: absolute;

                transform: translateX(-50%);
                transform: translateY(-50%);
            }

            .white { background-color: white; }
            .blue { background-color: #13a; }
            .pink { background-color: #d16; }

        </style>
    </head>
    <body>
        <script>
            function addBubble(color, x,y) {
                const bubble = document.createElement('div');

                bubble.classList.toggle("bubble");
                bubble.classList.toggle("smol");
                bubble.classList.toggle(color);

                bubble.style.left = x + "px";
                bubble.style.top = y + "px";

                document.body.appendChild(bubble);

                bubble.addEventListener("mouseover", () => {
                    if (bubble.classList.contains("white"))
                        bubble.classList.replace("white", "blue");
                    else if (bubble.classList.contains("blue"))
                        bubble.classList.replace("blue", "pink");
                    else if (bubble.classList.contains("pink"))
                        bubble.classList.replace("pink", "white");
                });
            }

            function addRandomBubble() {

                const x = Math.random() * (document.body.clientWidth-200) + 75;
                const y = Math.random() * (document.body.clientHeight-200) + 100;

                const colors = ["white", "blue", "pink"];
                const color = colors[Math.floor(Math.random()*colors.length)];

                addBubble(color, x, y);
            }

            for (let i = 0; i < 300; i++)
                addRandomBubble();

            console.log(document.body.clientWidth)
            //setInterval(addRandomBubble, 100);
            document.body.addEventListener("click", addRandomBubble);
        </script>
    </body>
</html
	<html>
	<head>
	<style>
	body { background-color: #29a; }
	.bubble {
	border-radius: 50%;
	border: 3px solid black;

	width: 50px;
	height: 50px;

	position: absolute;

	transform: translateX(-50%);
	transform: translateY(-50%);
	}

	.white { background-color: white; }
	.blue { background-color: #13a; }
	.pink { background-color: #d16; }

	</style>
	</head>
	<body>
	<script>
	function addBubble(color, x,y) {
	const bubble = document.createElement('div');

	bubble.classList.toggle("bubble");
	bubble.classList.toggle("smol");
	bubble.classList.toggle(color);

	bubble.style.left = x + "px";
	bubble.style.top = y + "px";

	document.body.appendChild(bubble);

	bubble.addEventListener("mouseover", () => {
	if (bubble.classList.contains("white"))
	bubble.classList.replace("white", "blue");
	else if (bubble.classList.contains("blue"))
	bubble.classList.replace("blue", "pink");
	else if (bubble.classList.contains("pink"))
	bubble.classList.replace("pink", "white");
	});
	}

	function addRandomBubble() {

	const x = Math.random() * (document.body.clientWidth-200) + 75;
	const y = Math.random() * (document.body.clientHeight-200) + 100;

	const colors = ["white", "blue", "pink"];
	const color = colors[Math.floor(Math.random()*colors.length)];

	addBubble(color, x, y);
	}

	for (let i = 0; i < 300; i++)
	addRandomBubble();

	console.log(document.body.clientWidth)
	//setInterval(addRandomBubble, 100);
	document.body.addEventListener("click", addRandomBubble);
	</script>
	</body>
	</html