<div style="font-weight:bold; text-decoration:underline;">Popcorn Hack 1 SOLUTIONS🍿😈</div>

%%html

<h2>Popcorn Hack 1 Output</h2>
<div id="output1"></div>

<script>
  (() => {

      let name = "Alex";
      const age = 25;

      // In practice, you shouldn't use var. This is just for the purposes of teaching :)
      var city = "New York"; 
      let hobby = "painting";

      // Change vars here
      name = "Bessie";
      //age = 2;   // Uncommenting this line raised an ERROR as you can't redefine constants
      city = "Anishiapolis";

      // Message variable not required
      let message = name + " is " + age + " years old, lives in " + city + ", and likes " + hobby + "." 
      document.getElementById("output1").innerText = message;
      console.log(message);

      // Step 7: say data types
      let typesMessage = "name is a " + typeof name + ", age is a " + typeof age + ", city is a " + typeof city + ", and hobby is a " + typeof hobby + ".";
      document.getElementById("output1").innerText += "\n" + typesMessage;
      console.log(typesMessage);
  })();
</script>

Popcorn Hack 1 Output

Presented by the

TINKERERS

<div style="font-weight:bold; text-decoration:underline;">Popcorn Hack 2 SOLUTIONS🍿😈</div>

%%html

<p>Solution: Click the button after entering your magic number!</p>

<input type="number" id="magicInput" placeholder="Enter magic number">
<button id="magicButton">Calculate</button>

<div id="output2">Your results will appear here.</div>

<script>
(() => { // allows Jupyter use of "const" and "let" without polluting global namespace

    const button = document.getElementById("magicButton");
    const input = document.getElementById("magicInput");
    const output = document.getElementById("output2");

    button.addEventListener("click", () => {
        // ^^ DO NOT MODIFY ANY ABOVE CODE ^^

        // Obtain HTML input and convert to number using javaScript's Number() function
        let magicNumber = Number(input.value); 

        // Calculate doubled, squared, and tripled
        let doubled = magicNumber * 2;
        let squared = magicNumber * magicNumber;
        let tripled = magicNumber * 3;

        // Display results in the DOM and console
        let message = "Doubled: " + doubled + ", Squared: " + squared + ", Tripled: " + tripled

        output.innerText = message;
        console.log(message);

    // vv DO NOT MODIFY ANY BELOW CODE vv
    });

})();

</script>

Solution: Click the button after entering your magic number!

Your results will appear here.