From c142c6ccab1350321cdaf5547f4e523e335e7f03 Mon Sep 17 00:00:00 2001 From: andrercastillon Date: Mon, 13 Feb 2023 20:21:44 -0600 Subject: [PATCH 1/2] calc functions complete --- .vscode/settings.json | 3 +++ README.md | 28 ++++++++++++++-------------- index.html | 10 +++++----- main.js | 8 ++++---- 4 files changed, 26 insertions(+), 23 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..aef8443 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 5011731..a6587b3 100644 --- a/README.md +++ b/README.md @@ -2,25 +2,25 @@ Inside this repo you'll find HTML, CSS, and JS files that come together to build a calculator. It's a simple & ugly calculator but it works as is to add and subtract two numbers. You have some tasks to do to get it into a prettier and more functional calculator. -1. Fork and clone it to your local machine in whatever folder you've been working in so far, i.e. `devFolder` -1. Open up the `index.html` file and uncomment line 7 so your JavaScript is connected to your HTML. -1. Now read the comments on line 13, 18, and 26. Then look over the code to see if you understand what is being built. -1. Use live-server or something similar to serve it and see what's happening in the browser. -1. Play. Type in two numbers then choose "add" or "subtract" and hit "equal" to see the results. -1. Go back to the `index.html` file and look at line 14 and 16. Do you see the `onkeyup` Event Listeners? Follow the function they call into the `main.js` file and see if you can figure out what and how they're doing what they're doing. -1. Check out line 15 in the `main.js` file that tells you about the `parseInt()` function. This just makes sure our numbers are numbers and not text. -1. Do you see where and how the numbers you typed in the input fields are being saved? -1. If so, go back to the `index.html` file and find the `onclick` event listeners on the operation buttons. What functions are they calling in the `main.js` file? -1. How is this function working? Break it down. Ask a friend. Ask a tutor. Ask your instructor. Make sure you understand what is happening in this function before moving on. -1. After that, make sure each of your `button`s have the same `onclick` attribute as the `add` and `subtract` buttons. Just copy/paste into each. This will allow your operations to be used! -1. Go back to the web page view of the Calculator and see how it's working. Try adding, subtracting, multiplying, dividing, and modulusing to see what's missing so you can fix it. + + + + + + + + + + + + > *HINT: the comments throughout the code are left for you to read and learn from.* ## What's Missing? -1. Part 1: the multiply, divide, and modulus functions need to be built. Can you figure out how to build them and `console.log` their results? -1. Part 2: in the `equals` function at the bottom of the `main.js` file you'll see the first two cases call the `putResultInElement` function with their corresponding operation functions passed into it. But the next three don't. Can you fix that so that your results show up on the page and NOT the console? + + ### Push Yourself Further diff --git a/index.html b/index.html index 063ab98..9b33a97 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + Document @@ -13,14 +13,14 @@ - +
- - - + + +

diff --git a/main.js b/main.js index bf60c18..87b3ecd 100644 --- a/main.js +++ b/main.js @@ -64,13 +64,13 @@ const equals = () => { break; case "subtraction": putResultInElement(subtract(firstNum, secondNum)) break; - case "multiplication": multiply(firstNum, secondNum) + case "multiplication": putResultInElement(multiply(firstNum, secondNum)) break; - case "division": console.log(divide(firstNum, secondNum)) + case "division": putResultInElement(divide(firstNum, secondNum)) break; - case "modulus": console.log(modulus(firstNum, secondNum)) + case "modulus": putResultInElement(modulus(firstNum, secondNum)) break; - default: "Choose an operation" + default: alert("Choose an operation") } } From c70a74465e55cd42ce7d864d8c5ac061b8ce542a Mon Sep 17 00:00:00 2001 From: andrercastillon Date: Mon, 13 Feb 2023 20:34:50 -0600 Subject: [PATCH 2/2] final calc --- main.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/main.js b/main.js index 87b3ecd..a491fed 100644 --- a/main.js +++ b/main.js @@ -32,13 +32,19 @@ const subtract = (numA, numB) => { const multiply = (numA, numB) => { // * to get a product then return it // Open up the inspector tool in Chrome and select the Console tab to see what this functions is "logging out" to the console. - console.log(numA, numB) + const multiply = numA * numB + return multiply } -const divide = null -// / to get a quotient, +const divide = (numA, numB) => { + const divide = numA / numB + return divide +} -const modulus = null +const modulus = (numA, numB) => { + const modulus = numA % numB + return modulus +} // and % to get a remainder. // This function changes the "operation" variable to be equal to the "id" of the button we choose on the web page.