POPCORN HACK 1 A short program about variables

%%html

<div>
  <h3>🎉 Variable Program Output</h3>
  <pre id="varOutput">Results will appear below:</pre>
</div>

<script>
(() => {

  function writeOutput(msg) {
    console.log(msg);
    document.getElementById("varOutput").innerText += "\n" + msg;
  }

  let myName = "Pranay";
  let age = 14;

  writeOutput("Hey there! I'm " + myName + ".");
  writeOutput("Right now, I'm " + age + " years old.");

  let nextYearAge = age + 1;

  writeOutput("This year, I’ll be " + nextYearAge + " years old — can’t wait!");

  writeOutput("Fun fact: " + myName + " is learning JavaScript and crushing it 🚀");

})();
</script>

🎉 Variable Program Output

Results will appear below:

POPCORN HACK 2 A short program about classes

%%html

<div>
  <h3>🐾 Popcorn Hack 2 — Interactive Zoo</h3>
  <p>Click a button to hear from an animal!</p>
  <button id="dogBtn">🐶 Talk to Bolt</button>
  <button id="catBtn">🐱 Talk to Whiskers</button>
  <button id="parrotBtn">🦜 Talk to Kiwi</button>
  <pre id="ph2Output">Results will appear below:</pre>
</div>

<script>
(() => {

  function writeOutput(msg) {
    console.log(msg);
    document.getElementById("ph2Output").innerText += "\n" + msg;
  }

  class Animal {
    constructor(name, sound, kind) {
      this.name = name;
      this.sound = sound;
      this.kind = kind;
    }

    speak() {
      writeOutput(`${this.name} the ${this.kind} says "${this.sound}!"`);
    }

    describe() {
      writeOutput(`${this.name} is a ${this.kind} and is super friendly 🐾`);
    }
  }

  const bolt = new Animal("Bolt", "Woof", "Dog");
  const whiskers = new Animal("Whiskers", "Meow", "Cat");
  const kiwi = new Animal("Kiwi", "Squawk", "Parrot");

  document.getElementById("dogBtn").addEventListener("click", () => {
    writeOutput("\n🐶 You clicked Bolt!");
    bolt.speak();
    bolt.describe();
  });

  document.getElementById("catBtn").addEventListener("click", () => {
    writeOutput("\n🐱 You clicked Whiskers!");
    whiskers.speak();
    whiskers.describe();
  });

  document.getElementById("parrotBtn").addEventListener("click", () => {
    writeOutput("\n🦜 You clicked Kiwi!");
    kiwi.speak();
    kiwi.describe();
  });

})();
</script>

🐾 Popcorn Hack 2 — Interactive Zoo

Click a button to hear from an animal!

Results will appear below:

Homework

%%html

<div>
  <h3>✊🖐️✌️ Rock Paper Scissors Game</h3>
  <p>Click your choice to play against the computer!</p>

  <button id="rockBtn">✊ Rock</button>
  <button id="paperBtn">🖐️ Paper</button>
  <button id="scissorsBtn">✌️ Scissors</button>
  <button id="clearBtn">🧹 Clear Output</button>

  <pre id="rpsOutput">Results will appear below:</pre>
</div>

<script>
(() => {

  function writeOutput(msg) {
    console.log(msg);
    document.getElementById("rpsOutput").innerText += "\n" + msg;
  }

  const choices = ["rock", "paper", "scissors"];

  function playRound(userChoice) {
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
    writeOutput("\n🧍 You chose: " + userChoice);
    writeOutput("💻 Computer chose: " + computerChoice);

    if (userChoice === computerChoice) {
      writeOutput("🤝 It's a tie!");
    } else if (
      (userChoice === "rock" && computerChoice === "scissors") ||
      (userChoice === "scissors" && computerChoice === "paper") ||
      (userChoice === "paper" && computerChoice === "rock")
    ) {
      writeOutput("🏆 You win this round!");
    } else {
      writeOutput("😢 You lose this round!");
    }
  }

  document.getElementById("rockBtn").addEventListener("click", () => playRound("rock"));
  document.getElementById("paperBtn").addEventListener("click", () => playRound("paper"));
  document.getElementById("scissorsBtn").addEventListener("click", () => playRound("scissors"));

  document.getElementById("clearBtn").addEventListener("click", () => {
    document.getElementById("rpsOutput").innerText = "Results will appear below:";
  });

})();
</script>

✊🖐️✌️ Rock Paper Scissors Game

Click your choice to play against the computer!

Results will appear below:

Submission!

https://forms.gle/2aPP6CXFdQnNaE7GA