From 4f0a8c90fd44ab6d02a62accb83144ccfd40c880 Mon Sep 17 00:00:00 2001 From: kallicain Date: Mon, 13 Feb 2023 20:30:04 -0600 Subject: [PATCH 1/2] work in progress --- README.md | 16 ++++++++-------- index.html | 10 +++++----- main.js | 18 ++++++++++++++++-- 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 5011731..408013a 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,17 @@ 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.* diff --git a/index.html b/index.html index 063ab98..252238c 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + Document @@ -16,11 +16,11 @@
- + - - - + + +

diff --git a/main.js b/main.js index bf60c18..eed6f13 100644 --- a/main.js +++ b/main.js @@ -33,13 +33,21 @@ 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 product = (numA, numB) + return product } -const divide = null +const divide = (numA, numB) => { // / to get a quotient, +const quotient = (numA, numB) +return quotient +} -const modulus = null +const modulus = (numA, numB) => { // and % to get a remainder. +const remainder = (numA, numB) +return remainder +} // This function changes the "operation" variable to be equal to the "id" of the button we choose on the web page. const changeOperation = (chosenOperation) => { @@ -59,6 +67,12 @@ const putResultInElement = (operationResults) => { // The function uses the value of "operation" variable to determine which operation function it should use on the number: add, subtract, multiply, divide, or modulus const equals = () => { + if (!firstNum) { + firstNum = parseInt(document.getElementById('first-Number').value) + } + if (!secondNum) { + secondNum = parseInt(document.getElementById('second-Number').value) + } switch (operation) { case "addition": putResultInElement(add(firstNum, secondNum)) break; From 868bcf2c0374048d85b5aaa2eddcc8f79e564f2f Mon Sep 17 00:00:00 2001 From: kallicain Date: Mon, 13 Feb 2023 21:04:23 -0600 Subject: [PATCH 2/2] finished calc --- index.html | 4 ++-- main.js | 26 ++++++++++++++++---------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 252238c..f09fa7d 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
- + @@ -25,7 +25,7 @@
- +
diff --git a/main.js b/main.js index eed6f13..3a5681c 100644 --- a/main.js +++ b/main.js @@ -4,6 +4,7 @@ let firstNum = null let secondNum = null let operation = null + // this function takes in the number you type in the input field and saves it to the "firstNum" variable const saveFirstNumber = (num) => { firstNum = parseInt(num) @@ -32,21 +33,20 @@ 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 product = (numA, numB) - return product + const multiply = (numA * numB) + return multiply } const divide = (numA, numB) => { // / to get a quotient, -const quotient = (numA, numB) -return quotient +const divide = (numA / numB) +return divide } const modulus = (numA, numB) => { // and % to get a remainder. -const remainder = (numA, numB) -return remainder +const modulus = (numA % numB) +return modulus } // This function changes the "operation" variable to be equal to the "id" of the button we choose on the web page. @@ -73,18 +73,24 @@ const equals = () => { if (!secondNum) { secondNum = parseInt(document.getElementById('second-Number').value) } + console.log(firstNum, secondNum); switch (operation) { case "addition": putResultInElement(add(firstNum, secondNum)) 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" } } +const clearresult = () => { + document.getElementById('result').innerHTML = null + document.getElementById('first-Number').value = null + document.getElementById('second-Number').value = null +} \ No newline at end of file