JS Functions Homework
These are the homework problems and popcorn hacks.
- 🍿 POPCORN HACK NO. 1 🍿
- 🍿 POPCORN HACK NO. 2 🍿
- Homework
🍿 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)
-
Define a function named toCelsius() that takes a parameter called “degrees_fh”
-
Write logic to make the function return the converted number of degrees in Celsius
Use this image to help you:
-
Call the function whenever the button is pressed with the values inputted by the user as input, and save the results to a variable.
-
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
<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
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>
</body>
</html>
Farenheight to Celsius Converter
🍿 POPCORN HACK NO. 2 🍿
Let’s practice using scope!
- Create a global variable called myVar and assign it the string “I am global”.
-
Write a function called scopeTest that: a. Declares a variable myVar inside the function with the value “I am local”. b. Declares a variable blockVar inside an if block with the value “I am block-scoped”. c. Declares a variable funcVar inside the if block with var and value “I am function-scoped”. d. Prints inside the block all three variables (myVar, blockVar, funcVar). e. Prints inside the function but outside the block all three variables.
- Outside the function, try printing all three variables.
Fill in this code:
// 1. Declare global variable
// __________________________
function scopeTest() {
// 2a. Declare function-local variable
// __________________________
if (true) {
// 2b. Declare block-scoped variable
// __________________________
// 2c. Declare function-scoped variable with var
// __________________________
// 2d. Print variables inside block
// console.log("Inside block:", __________________________);
}
// 2e. Print variables inside function but outside block
// console.log("Inside function:", __________________________);
}
// 3. Call the function
// __________________________
// 4. Print variables outside the function
// console.log("Outside function:", __________________________);
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
<html>
<body>
<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>
</body>
</html>
Fibonacci Number Calculator
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,
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
<html>
<body>
<p>Person Describer</p>
<div id="hw2output">Your results will appear here.</div>
<!--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)">
<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>
</body>
</html>
Person Describer
Homework problem 3:
Make a function that takes an array and chooses a random string from the array to be outputted. Your array must have at least 5 different objects, preferably in a specific category. Ex. The array could be fruits and examples would be apple, banana, orange, and so on.
You don’t need to do dynamic input for this problem. You can have a fixed input.
You’re allowed to use Google to research how to randomly select an object from an array.
%%html
<html>
<body>
<p>Random Item Function</p>
<div id="hw3output">Your results will appear here.</div>
<script>
(() => {
const output = document.getElementById("hw3output");
// Write your code here. Don't modify any other code.
})();
</script>
</body>
</html>
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]_funcs_hw.ipynb
Example: JohnBrown_funcs_hw.ipynb
Submit the Google Form at https://forms.gle/jzwrxptc15Ed8nbw6 by downloading this file and uploading it on the form.
Requirements for homework:
- Questions 1, 2, and, 3 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.