Functions Popcorn Hacks Solutions

🍿 POPCORN HACK NO. 1 🍿
🍿 POPCORN HACK NO. 2 🍿

🍿 POPCORN HACK NO. 1 🍿

Solution:

%%html

<html>
<body>

    <p>Farenheight to Celsius Converter</p>

    <input type="number" id="inputField" placeholder="Enter degrees (F)">
    <button id="calculateButton">Calculate</button>

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

    <script>

    (() => {

    const button = document.getElementById("calculateButton");
    const input = document.getElementById("inputField");
    const output = document.getElementById("output1");

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

    // Define your function out here

    function toCelsius(degrees_fh){
        return (degrees_fh - 32) / 1.8
    }

    let result;
    let inpval;

    button.addEventListener("click", () => {
  
        /* 
        Call your toCelsius() function, using the user's input from input.value.
        Save the result to a variable.
        
        Note that input.value returns a string. You will need to turn it into a
        number using Number(), and then feed that number to your function.

        */ 

        inpval = Number(input.value);
        result = toCelsius(inpval);


        // Log the result to console
        console.log(inpval + " F = " + result + "C");

        // Add the result to the end of DOM:
        output.innerText += "\n" + inpval + " F = " + result + "C"

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

    })();

  </script>

</body>
</html>

Farenheight to Celsius Converter

Your results will appear here.

🍿 POPCORN HACK NO. 2 🍿

Solution:

// 1. Declare global variable
var myVar = "I am global";

function scopeTest() {
    // 2a. Declare function-local variable
    let myVar = "I am local";

    if (true) {
        // 2b. Declare block-scoped variable
        let blockVar = "I am block-scoped";

        // 2c. Declare function-scoped variable with var
        var funcVar = "I am function-scoped";

        // 2d. Print variables inside block
        console.log("Inside block:", myVar, blockVar, funcVar);
    }

    // 2e. Print variables inside function but outside block
    console.log("Inside function:", myVar, /* blockVar won't exist here */ typeof blockVar !== 'undefined' ? blockVar : 'undefined', funcVar);
}

// 3. Call the function
scopeTest();

// 4. Print variables outside the function
// Note that the other variables cannot be printed out here
console.log("Outside function:", myVar, typeof blockVar !== 'undefined' ? blockVar : 'undefined', typeof funcVar !== 'undefined' ? funcVar : 'undefined');

Here is the code in an interactive code cell:

%%html

<html>
<body>

    <button id="button2">Output</button>

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

    <script>

    (() => {

    const output = document.getElementById("scope_output2");
    const button = document.getElementById("button2");

    button.addEventListener("click", () => {
  
        // 1. Declare global variable
        var myVar = "I am global";

        function scopeTest() {
            // 2a. Declare function-local variable
            let myVar = "I am local";

            if (true) {
                // 2b. Declare block-scoped variable
                let blockVar = "I am block-scoped";

                // 2c. Declare function-scoped variable with var
                var funcVar = "I am function-scoped";

                // 2d. Print variables inside block
                console.log("Inside block:", myVar, blockVar, funcVar);
            }

            // 2e. Print variables inside function but outside block
            let innermessage = "Inside function: myVar = " + myVar + ", funcVar = " + funcVar + ", blockVar cannot be accessed"
            console.log(innermessage);
            output.innerText += "\n" + innermessage

        }

        // 3. Call the function
        scopeTest();

        // 4. Print variables outside the function
        // Note that the other variables cannot be printed out here
        let outermessage = "Outside function: myVar = " + myVar + ", blockVar and funcVar cannot be accessed"
        console.log(outermessage);
        output.innerText += "\n" + outermessage


    });

    })();

  </script>

</body>
</html>

Your results will appear here.