🍿 POPCORN HACK NO. 1 🍿

NOTE: Do all this in the provided code cell below

Oh no! Billy Bob Joe just went to Asia for vacation!
However, he accidentally set the heating to 80 degrees Celsius, which is around 176 degrees Fahrenheight.

Help Billy Bob Joe by making a function to help with the conversion from F to C! (So that he doesn’t spontaneously combust from setting his thermometer to 978 degrees Fahrenheight or something)

  1. Define a function named toCelsius() that takes a parameter called “degrees_fh”

  2. Write logic to make the function return the converted number of degrees in Celsius

Use this image to help you:

  1. Call the function whenever the button is pressed with the values inputted by the user as input, and save the results to a variable.

  2. console.log() the variable each time after calculating it, and append it to the end of the DOM.

Side note: console.log() is a function that comes predefined in JavaScript! You’ve almost definitely used functions before, even if you didn’t know about them.

%%html



<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



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

    // _________________________


    // Log the result to console
    // _________________________

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

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

  })();

</script>

Farenheight to Celsius Converter

Your results will appear here.

🍿 POPCORN HACK NO. 2 🍿

By the time we reach this lesson, we should have covered Loops/Iteration. Write a function called findMax() that does the following:

  1. Takes one argument which is an array of integer numbers
  2. Make the function loop through the array and return the largest element
  3. Make the function write the results to DOM and to console:
  4. console.log(_______) writes to console
  5. output.innerText += "\n" + ______ writes to DOM
  6. Call the function three times with these arrays as input
    1. [1, 2, 3, 4, 4, 4, 5, 6, 8, 4, 1, 7]
    2. [1]
    3. [97883, 981, 81283, 987213, 1, -391]
%%html


<div id="phack2">Your results will appear here:</div>

<script>

    (() => {

        const output = document.getElementById("phack2");
     
        // ^^ DO NOT MODIFY ABOVE CODE ^^
        
        // Write all of your code here!

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

</script>
Your results will appear here

Homework

Now that you have completed your function lesson, you will be doing some homework to apply the concepts you learned.

Homework problem 1:

Make a function that uses recursion to calculate the Nth Fibonacci number, given N as a parameter.

You just need to write the code in fibonacci(). The rest of the code to handle input/output is already written for you.

%%html

<p>Fibonacci Number Calculator</p>

<input type="number" id="hw1input" placeholder="Enter the Nth number to find:">
<button id="hw1button">Calculate</button>
<div id="hw1output">Your results will appear here.</div>

<script>

(() => {

const button = document.getElementById("hw1input");
const input = document.getElementById("hw1input");
const output = document.getElementById("hw1input")

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

function fibonacci(n){
    // Write your code here!
}

// vv DO NOT MODIFY ANY BELOW CODE vv

let result;
let inpval;

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


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

    // Log the result to console
    console.log("Fibonacci Number #" + inpval + " is " + result);

    // Add the result to the end of DOM:
    output.innerText += "\n" + "Fibonacci Number #" + inpval + " is " + result

});

})();

</script>

Fibonacci Number Calculator

Your results will appear here.

Homework problem 2:

Make a function called decribe() that describes a person’s attributes. It should take parameters age, gender, job, height and output something along the lines of “Hello! I am [age] years old and [gender]. My job is [job] and I’m [height] feet tall.”

Y’know what? I don’t feel like writing the code to handle output, so I’ll leave that to you :). Take input from ageInput.value, e.g. let x = ageInput.value

After you’re done, call the function with values of your choosing any and write its output to DOM and to the console. Write to DOM using output.innerText = _______ or output.innerText += ____________.

%%html

<p>Person Describer</p>

<!--Input fields-->
<input type="number" id="hw2age" placeholder="Age">
<input type="text" id="hw2gender" placeholder="Gender">
<input type="text" id="hw2job" placeholder="J*b">
<input type="number" id="hw2height" placeholder="Height (inches)">

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


<script>

  (() => {

  const output = document.getElementById("hw2output");

  const ageInput = document.getElementById("hw2age");
  const genderInput = document.getElementById("hw2gender");
  const jobInput = document.getElementById("hw2job");
  const heightInput = document.getElementById("hw2height");


  // Write your function here. Don't modify any other code.
  // _______________________

  // Call your function with ageInput.value, genderInput.value, etc. as your inputs
  // _______________________

  // Write your output to the console here
  // _______________________

  // Write your output to DOM here
  // _______________________

  })();

</script>

Person Describer

Your results will appear here.

Submission

Submit the deployed homework on your site on the master grading spreadsheet next to your name.

E.g. If my name was “John Brown”, I would navigate to the Functions tab, find the cell saying “John Brown”, and put the link in the corresponding cell.

Requirements for homework:

  1. Popcorn hacks: 0.2 points each, for a total of 0.4 points
  2. Homework problems (1 and 2): 0.25 points each, for a total of 0.9 points
  3. Up to 0.03 extra points will be given to code that demonstrates exceptional creativity and comprehension. If you really want to get these .03 points, add a new creative feature to either popcorn hack or either homework problem!