Begin Your Coding Adventure!

// Make a balloon that grows until it pops!
function startBalloonGame() {
  let balloon = document.getElementById("balloon");
  balloon.style.display = "block";
  let size = 40;
  let clicks = 0;

  // Make the balloon clickable
  balloon.onclick = function() {
    clicks++;
    size = size + 10;
    balloon.style.width = size + "px";
    balloon.style.height = size * 1.5 + "px";

    // Check if balloon should pop
    if (size > 100) {
      balloon.style.display = "none";
      showMessage("POP! 💥 It took you " + clicks + " clicks!");
    } else {
      showMessage("Keep clicking! Size: " + size);
    }
  };

  showMessage("Click the balloon to inflate it!");
} function showMessage(message) {
  document.querySelector(".output-area").innerHTML = message;
}

// Create a night sky full of stars!
function createStars() {
  const starField = document.querySelector(".output-area");
  starField.innerHTML = "";
  starField.style.backgroundColor = "#001133";
  starField.style.height = "150px";
  starField.style.position = "relative";
  starField.style.overflow = "hidden";

  // How many stars to create
  const numberOfStars = 20;

  // Create each star
  for (let i = 0; i < numberOfStars; i++) {
    createStar(starField);
  }
  showMessage("Look at your night sky! 🌃");
} function createStar(container) {
  const star = document.createElement("div");
  // Random position
  const x = Math.floor(Math.random() * 100);
  const y = Math.floor(Math.random() * 100);
  // Random size
  const size = Math.floor(Math.random() * 4) + 2;

  // Style the star
  star.style.position = "absolute";
  star.style.left = x + "%";
  star.style.top = y + "%";
  star.style.width = size + "px";
  star.style.height = size + "px";
  star.style.backgroundColor = "#ffffff";
  star.style.borderRadius = "50%";
  star.style.boxShadow = "0 0 " + size + "px #ffffff";
  star.style.animation = "twinkle " + (Math.random() * 5 + 1) + "s infinite";

  container.appendChild(star);
} function showMessage(message) {
  const messageDiv = document.createElement("div");
  messageDiv.innerHTML = message;
  messageDiv.style.position = "absolute";
  messageDiv.style.bottom = "10px";
  messageDiv.style.left = "10px";
  messageDiv.style.color = "white";
  messageDiv.style.textShadow = "1px 1px 2px black";
  document.querySelector(".output-area").appendChild(messageDiv);
}