Penguins JS Lessons
Download Homework
Submission Google Form for Homework
Mathematical Expressions Homework
In order to learn this subject of programming well, you have to practice:
Popcorn hack 1: operations with variables
Popcorn hack 2: Make 2 variables
x
, andy
. Compute 3 different operations and log it into the console with console.log();
Final Task: Build a system of functions that represent different mathematical expressions. Each of these functions will perform a different mathematical operation(ex: add, subtract). Make at least 5 of these different functions.
Popcorn Hack 1 (Progress Check)
Part 1:
In the javascript node below, make 2 variables, num1
set to 6 and num2
set to 3, then write the equation (num1 * num2) + (num1 / 2)
.
The output should be 21.
Part 2:
Next, keeping the same variables, add a new variable called total
that is equal to the equation num1 / num2 + 2 ** 3
, and this time make the equation
(total + 15) - numb1 ** 2 / 4
Write this code below:
%% javascript
// Part 1
let num1 = 6;
let num2 = 3;
console.log((num1 * num2) + (num1 / 2)); // Output: 21
// Part 2 - I flipped the operations as its still the same answer
let total = num1 / num2 + 2 ** 3;
console.log((total + 15) - num1 ** 2 / 4);
<IPython.core.display.Javascript object>
Popcorn Hack 2 (Progress check):
Create 2 variables x
and y
. With the output area below, provide 3 different operators used with the 2 variables
(ex: let sum = x + y;
)
and fill in the output with a sentence that provides all three operators and their respective answer.
%% javascript
// Create variables
let x = 10;
let y = 5;
// Perform 3 different operations
let operation1 = x + y; // addition
let operation2 = x - y; // subtraction
let operation3 = x * y; // multiplication
// Output sentence with all three results - Copilot helped me with this line
console.log(`When we add x and y we get ${operation1}, subtracting gives ${operation2}, and multiplying gives ${operation3}.`);
<IPython.core.display.Javascript object>
Final Task:
- Make 5 different functions, each with different operators/expressions:
- Addition
- Subtraction
- Multiplication
- Exponential
- Modulus
-
Be able to use the functions as well as
document.getElementById
to make the buttons output the result. -
Have fun! Mess around with different variables with different values, and maybe see if you can make any complex equations like the ones you’re learning in your math class. The end objective is for you to be able to use and understand math expressions.
Example function:
function add(a, b)
{
return a + b;
}
Some ideas you can use:
- Multiply Function
- Square root function
- Cube root function
Now that you have seen the example, you will start writing your custom functions in the html code block below:
Make sure to follow each comment on where to write your code, don't modify any existing code.
%%html
<h2>Function Outputs:</h2>
<!-- Buttons for each operation -->
<button type="button" onclick="Add(4,5)">Addition</button>
<div id="functionOutput1"></div>
<br>
<button type="button" onclick="Subtract(10,3)">Subtraction</button>
<div id="functionOutput2"></div>
<br>
<button type="button" onclick="Multiply(6,7)">Multiplication</button>
<div id="functionOutput3"></div>
<br>
<button type="button" onclick="Exponential(3,4)">Exponential</button>
<div id="functionOutput4"></div>
<br>
<button type="button" onclick="Modulus(29,5)">Modulus</button>
<div id="functionOutput5"></div>
<br>
<script>
// Function 1 Addition
function Add(a, b) {
let result = a + b;
document.getElementById("functionOutput1").innerText = `Addition Result: ${result}`;
}
// Function 2 Subtraction
function Subtract(a, b) {
let result = a - b;
document.getElementById("functionOutput2").innerText = `Subtraction Result: ${result}`;
}
// Function 3 Multiplication
function Multiply(a, b) {
let result = a * b;
document.getElementById("functionOutput3").innerText = `Multiplication Result: ${result}`;
}
// Function 4 Exponential
function Exponential(a, b) {
let result = a ** b;
document.getElementById("functionOutput4").innerText = `Exponential Result: ${result}`;
}
// Function 5 Modulus
function Modulus(a, b) {
let result = a % b;
document.getElementById("functionOutput5").innerText = `Modulus Result: ${result}`;
}
</script>
Function Outputs:
Grading
Popcorn Hack 1: Completion gives 0.2 points.
Popcorn Hack 2: Completion gives 0.3 points.
Final Task: Completion gives 0.5 points. Max of 0.02 extra points from extra work relevant to the subject or finishing assignment in a way that shows exceptional comprehension of the lesson.
Make sure to submit your homework deployed link onto the global homework submission google sheet