From 800b6811f6beaae8e1076e87a2a23317973161a4 Mon Sep 17 00:00:00 2001 From: EvanKelley Date: Mon, 13 Feb 2023 20:29:54 -0600 Subject: [PATCH 1/5] completed functionality --- index.html | 8 ++++---- main.js | 27 +++++++++++++++++++++------ 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 063ab98..befa8b5 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + Document @@ -18,9 +18,9 @@ - - - + + +
diff --git a/main.js b/main.js index bf60c18..cd032a5 100644 --- a/main.js +++ b/main.js @@ -32,14 +32,23 @@ 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) + // 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,16 +68,22 @@ 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; 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" } From 04bbcf8405a0b09ab128b81f7f68ff9024a61ac4 Mon Sep 17 00:00:00 2001 From: EvanKelley Date: Sat, 18 Feb 2023 11:44:52 -0600 Subject: [PATCH 2/5] added a new funtion to fully clear results and avoid error --- index.html | 8 ++++---- main.js | 8 ++++++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index befa8b5..1414685 100644 --- a/index.html +++ b/index.html @@ -5,15 +5,15 @@ - Document + Calculator
- + - +
@@ -25,7 +25,7 @@
- +
diff --git a/main.js b/main.js index cd032a5..16c0745 100644 --- a/main.js +++ b/main.js @@ -66,6 +66,14 @@ const putResultInElement = (operationResults) => { // Here we give it a string: "Results: " and add the value of the operation to it. } +const clearResults = () => { + // access the DOM by writing "document" then use the method "getElementById" and pass it the id, "result". + document.getElementById("result").innerHTML = "" + + // Remember, each element has built in properties like "innerHTML" which we can change to anything we like. + // Here we give it a string: "Results: " and add the value of the operation to it. +} + // 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) { From 8808e4847920f4ca4bf29cf0876798b00269efaf Mon Sep 17 00:00:00 2001 From: EvanKelley Date: Sat, 18 Feb 2023 13:22:11 -0600 Subject: [PATCH 3/5] finished styles --- index.html | 34 ++++++++++++++++------ style.css | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 110 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 1414685..ce72e20 100644 --- a/index.html +++ b/index.html @@ -9,12 +9,23 @@
- - - - - -
+ +
+

Calculator

+
+ +
+ + + +
+ +
+ + +
+ +
@@ -22,10 +33,15 @@
-
- - +
+ +
+ +
+ +
+
diff --git a/style.css b/style.css index f6b4813..3813db3 100644 --- a/style.css +++ b/style.css @@ -2,4 +2,89 @@ body { margin: 20% auto; width: 50%; height: 75%; + border: 6px solid black; + background-color: goldenrod; + font-size: 35px; + -webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); + -moz-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); + box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); +} + +.calculator { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: + "title" + "num1" + "num2" + "butt" + "equalz" + "resetz" +} + +.title { + grid-area: "title"; + display: flex; + align-items: center; + justify-content: center; +} + +.firstNum { + font-size: 18px; + grid-area: "num1"; + display: flex; + align-items: center; + justify-content: center; + padding: 14px; +} + +.secondNum { + font-size: 18px; + grid-area: "num2"; + display: flex; + align-items: center; + justify-content: center; + padding: 14px; +} + +.buttons { + grid-area: "butt"; + display: flex; + align-items: center; + justify-content: center; + padding: 14px; +} + +.equal-button { + grid-area: "equalz"; + display: flex; + align-items: center; + justify-content: center; + padding: 14px; +} + +.reset-button { + grid-area: "resetz"; + display: flex; + align-items: center; + justify-content: center; + padding: 14px; +} + +.equal{ + height: 40px; + width:285px; +} + +.start-over{ + height: 40px; + width:285px; +} + +.result { + font-size: 30px; + grid-area: "answer"; + display: flex; + align-items: center; + justify-content: center; } \ No newline at end of file From 6fd9bd6a5777a2054ca53e268219f2bbb1f36d06 Mon Sep 17 00:00:00 2001 From: EvanKelley Date: Sat, 18 Feb 2023 13:30:52 -0600 Subject: [PATCH 4/5] removed arrow selectors for numbers --- index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/index.html b/index.html index ce72e20..d65948e 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,16 @@ Calculator +
From 470553bbbb1e662bc19f03ecb13dfff49edaf5ff Mon Sep 17 00:00:00 2001 From: EvanKelley Date: Sat, 18 Feb 2023 13:32:18 -0600 Subject: [PATCH 5/5] fixed error in styles --- index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/index.html b/index.html index d65948e..76ea85c 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,6 @@ -webkit-appearance: none; margin: 0; } - input[type=number] { - -moz-appearance: textfield; - }