<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

<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>

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"

<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
    // _________________________________


    // Convert the input to a number using Number()
    // _________________________________

    // Calculate doubled, squared, and half
    // _________________________________
    // _________________________________
    // _________________________________

    // Display results in the DOM and console
    // output.innerText = ______;
    // console.log(________);

  // 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

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

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

  // Write your JS Code here!!

  // Use document.getElementById("output").innertext += "\n" + [YOUR MESSAGE] to write to DOM.
  // Example:
  // document.getElementById("output").innerText += "\n" + "Hello World" 
  // This writes "Hello World" to a new line in DOM.

  // Use console.log() to write to the console.
  
  })();
</script>

Homework Output

Submission

You will submit the link to your homework on a web page in the below form.
If you are unable to get your homework accessible from the website, you can upload this Jupyter notebook to the form.

IMPORTANT: If uploading, please name this Jupyter notebook in this format: [FirstName][LastName]_vars_hw.ipynb Example: SamarthHande_hw.ipynb

https://forms.gle/UBDFErZpKpTApWap8

Requirements for homework:

Parts A, B, and C should be completed. You will get .3 points for each question completed.
Up to 0.03 extra points will be given to code that demonstrates exceptional creativity and comprehension.