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..f09fa7d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + Document @@ -18,14 +18,14 @@ - - - + + +
- +
diff --git a/main.js b/main.js index bf60c18..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,14 +33,21 @@ 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 +const divide = (numA, numB) => { // / to get a quotient, +const divide = (numA / numB) +return divide +} -const modulus = null +const modulus = (numA, numB) => { // and % to get a 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. const changeOperation = (chosenOperation) => { @@ -59,18 +67,30 @@ 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) + } + 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