POPCORN HACK 1 A short program about variables

%%html

<div>
  <h3>Program Output</h3>
  <p id="ph1Output">Results will appear here:</p>
</div>

<script>
(() => {

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

  // Step 1: Make some variables
  let myName = "Sam";
  let age = 10;

  // Step 2: Print a message
  writeOutput("Hi, my name is " + myName);
  writeOutput("I am " + age + " years old.");

  // Step 3: Unfinished part
  // TODO: Make a new variable called "nextYearAge"
  // that is the age plus 1
  let nextYearAge  = age + 1;

  // TODO: Print out the result
  // Example: "Next year I will be 11 years old."
  // console.log( ??? )   // <-- finish this line!
  writeOutput("Next year I will be " + nextYearAge + " years old.");

})();

</script>

Program Output

Results will appear here:

POPCORN HACK 2 A short program about classes

%%html

<div>
  <h3>Popcorn Hack 2 Output</h3>
  <p id="ph2Output">Results will appear here:</p>
  <input type="text" id="animalName" placeholder="Animal Name">
  <input type="text" id="animalKind" placeholder="Animal Kind">
  <input type="text" id="animalSound" placeholder="Animal Sound">

  <button id="addAnimalButton">Add Animal</button>
</div>



<script>
(() => {

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

  // Step 1: Define the Animal class
  class Animal {
    // Initialize each animal with a name, sound, and type
    constructor(name, sound, kind) {
      this.name = name;
      this.sound = sound;
      this.kind = kind;
    }

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

    // Bonus method: describe the animal
    describe() {
      writeOutput(`${this.name} is a ${this.kind} and is very friendly!`);
    }
  }

  // Step 2: Create a list to hold all the animals in the zoo
  let zoo = [];

  // Step 3: Add animals to the zoo
  // TODO: Create at least 3 animals and push them into the zoo array
  // Example:
  // zoo.push(new Animal("Buddy", "Woof", "Dog"));
  // zoo.push(new Animal("Mittens", "Meow", "Cat"));
  // zoo.push(new Animal("Polly", "Squawk", "Parrot"));

  zoo.push(new Animal("Nemo", "Blub", "Fish"));
  zoo.push(new Animal("Thumper", "Sniff", "Rabbit"));
  zoo.push(new Animal("Leo", "Roar", "Lion"));

  // Step 4: Loop through all animals and make them speak
  // TODO: Use a for loop (or forEach) to call speak() on each animal
  zoo.forEach(animal => {
    animal.speak();
    // Step 5: Optional bonus: Call describe() too
    animal.describe();
  });


  // ok so im not using prompt() below because im cool and swag
  // so instead im using HTML input fields and a button to add animals

  // Step 5 Bonus: Let the user add a new animal (works in browser)
  // Uncomment if running in browser with prompt()
  // let name = prompt("Enter the animal's name:");
  // let sound = prompt("Enter the sound it makes:");
  // let kind = prompt("Enter the kind of animal:");
  // let newAnimal = new Animal(name, sound, kind);
  // zoo.push(newAnimal);
  // newAnimal.speak();
  // newAnimal.describe();


  const addButton = document.getElementById("addAnimalButton");

  addButton.addEventListener("click", () => {

    let name = document.getElementById("animalName").value;
    let sound = document.getElementById("animalSound").value;
    let kind = document.getElementById("animalKind").value;

    if (name === "" || sound === "" || kind === "") {
      alert("Please fill in all the fields!!");
    } else {  
      let newAnimal = new Animal(name, sound, kind);
      zoo.push(newAnimal);
      writeOutput(`Added new animal: ${name}, the ${kind}, who says ${sound}.`);
      newAnimal.speak();
      newAnimal.describe();

      document.getElementById("animalName").value = "";
      document.getElementById("animalSound").value = "";
      document.getElementById("animalKind").value = "";
    }
  
  });
})();

</script>

Popcorn Hack 2 Output

Results will appear here:

Homework

%%html

<div>
  <h3>Rock Paper Scissors Game</h3>
  <!-- replace prompt()s with <input> elements -->

  <button id="rockButton">Rock</button>
  <button id="paperButton">Paper</button>
  <button id="scissorsButton">Scissors</button>
  <button id="playButton">Play</button>


  <p id="rpsOutput">Results will appear here:</p>

</div>

<style>
  .selected {
    background-color: #4CAF50;
    color: white;
  }
</style>


<script>
(() => {

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

  const choices = ["rock", "paper", "scissors"];
  let userChoice = null;

  const rockButton = document.getElementById("rockButton");
  const paperButton = document.getElementById("paperButton");
  const scissorsButton = document.getElementById("scissorsButton");
  const playButton = document.getElementById("playButton");

  // function to clear selection by deleecting the css class from all buttons
  function clearSelection() {
    rockButton.classList.remove("selected");
    paperButton.classList.remove("selected");
    scissorsButton.classList.remove("selected");
  }

  rockButton.addEventListener("click", () => {
    clearSelection();
    rockButton.classList.add("selected");
    userChoice = "rock";
  });

  paperButton.addEventListener("click", () => {
    clearSelection();
    paperButton.classList.add("selected");
    userChoice = "paper";
  });

  scissorsButton.addEventListener("click", () => {
    clearSelection();
    scissorsButton.classList.add("selected");
    userChoice = "scissors";
  });

  playButton.addEventListener("click", () => {
    if (!userChoice) {
      alert("Please choose rock, paper, or scissors first!");
      return;
    }

    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
    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!");
    } else {
      writeOutput("You lose!");
    }

  });

})();
</script>

Rock Paper Scissors Game

Results will appear here:

Submission!

https://forms.gle/2aPP6CXFdQnNaE7GA