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

Let’s start diving into some of the questions.

Instructions

Below instructions refer to this code cell:

%%html

<html>

<body>
  <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";

      // Change vars here
      name = "Bessie";
      //age = 2;   // What happens if you uncomment this line ???
      city = "Anishiapolis";

      document.getElementById("output1").innerText = name + " is " + age + " years old and lives in " + city + ".";
      console.log(name + " is " + age + " years old and lives in " + city + ".")

    })();
  </script>
</body>

</html>

Popcorn Hack 1 Output

Now, do the below with this code.

Adjust var declarations, names, values, etc. Mess around with it and observe any changes/errors.
Think and/or discuss with your table: what changes did you notice?

Now let’s make some changes :)

Uncomment the line saying age = 2; and look at your console. What do you notice?
Add a new variable called hobby with the value of “painting” and update the DOM output and console output to say:
“[NAME] is [AGE] years old, lives in [CITY], and loves [HOBBY]”
There’s a keyword called typeof in JavaScript. Use this keyword to also display the data types of the variables. Example: typeof "John" gives "string" and typeof 3.14 gives "number"

for 3 - ts doesnt work and give an error

// Step 1: Create variables
let favoriteSnack = "Popcorn";
let favoriteDrink = "Lemonade";
let movie = "Inception";

console.log("My favorite snack is " + favoriteSnack + " and I love to drink " + favoriteDrink + " while watching " + movie + ".");

// Step 2: Update the variables
favoriteSnack = "Chips";
favoriteDrink = "Iced Tea";
movie = "Avengers";

console.log("Now my favorite snack is " + favoriteSnack + " and I like to drink " + favoriteDrink + " while watching " + movie + ".");

My favorite snack is Popcorn and I love to drink Lemonade while watching Inception.
Now my favorite snack is Chips and I like to drink Iced Tea while watching Avengers.

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

Follow the below instructions.

Go to the code cell below this text.
Using the correct JS variable naming convention, declare a Magic Number variable with the value returned by input.value to get a user response.
Convert it to a Number data type using Number(). Example: let x = Number(x); turns x into a Number. This is because prompt() always returns Strings.
Create variables doubled, squared, and tripled that contain the doubled, squared, and tripled values of the magic number.
Display the results in DOM and the console by changing output.innerText and using console.log().

%%html

<p>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>
  (() => {

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

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

      // ^^ DO NOT MODIFY ANY ABOVE CODE ^^

      // Set the Magic Number variable to input.value
      let magicNumber = input.value;


      // Convert the input to a number using Number()
      magicNumber = Number(magicNumber);

      // Calculate doubled, squared, and half
      let doubled = magicNumber * 2;
      let squared = magicNumber * magicNumber;
      let tripled = magicNumber * 3;
      // Display results in the DOM and console
      output.innerText = `Doubled: ${doubled}, Squared: ${squared}, Tripled: ${tripled}`;
      console.log(`Magic Number: ${magicNumber}`);
      console.log(`Doubled: ${doubled}`);
      console.log(`Squared: ${squared}`);
      console.log(`Tripled: ${tripled}`);
      // vv DO NOT MODIFY ANY BELOW CODE vv
    });

  })();

</script>

Click the button after entering your magic number!

Your results will appear here.

Variables Homework (Show what you know!)

Homework Problems: Understanding JavaScript Variables

There is a code block below the image saying “Have Fun!” Write your code in there.

Part A - Creating Variables

Create a variable called name and store your first name in it. Print it in the console and to DOM.
Create two variables age and city. Print them in a single sentence like: - “I am 15 years old and I live in New York.”
Create a variable isStudent (true/false). Print it.

Part B – Numbers & Strings

Create two number variables num1 = 10 and num2 = 5. Print their sum, difference, product, and quotient.
Make a variable favoriteFood and print: My favorite food is __.”

Part C – Practice Problems

Swap the values of two variables: x = 7 and y = 3.
Create a variable fullName by joining two strings: “FirstName” and “LastName”.
Convert temperature C = 25 into Fahrenheit using F = (C * 9/5) + 32.
Create a variable score = 85.
- Print “Pass” if score >= 50, else “Fail”.
Write a program that asks for your name and age (use prompt) and prints: “Hello , you are years old."
Make a project that uses 5 variables to run. It can do anything yuou want, have fun and good luck!

Extra credit (optional): Instead of hard coding the variable for number 9 to 85, make the variable a random number from 1-100.

An image of have fun

%%html

<html>

<body>
  <h2>Homework Output</h2>
  <div id="output"></div>

  <script>
    document.getElementById("output").innerText = ""; // Clear output
    (() => {

      // Write your JS Code here!!

      document.getElementById("output").innertext += "\n" + "Hello World"
      // Example:

      // This writes "Hello World" to a new line in DOM.

      // Part A
      let message = "Aryan";
      document.getElementById("output").innerText += "\n" + message;
      console.log(message);
      // Part B
      let num1 = 4;
      let num2 = 10;
      let sum = num1 + num2;
      document.getElementById("output").innerText += "\n" + sum;
      console.log(sum);
      // Part C
      let name = "Aryan";
      let age = 14;
      let city = "Califfornia";
      let introduction = "My name is " + name + ", I am " + age + " years old and I live in " + city + ".";
      document.getElementById("output").innerText += "\n" + introduction;
      console.log(introduction);

    })();
  </script>
</body>

</html>