From 450a728fc92d7d7a103576c6dab2e6bc414d514e Mon Sep 17 00:00:00 2001 From: Stephen Date: Tue, 24 May 2022 08:03:38 -0500 Subject: [PATCH 1/9] Fixed html and javascript errors and confirmed all operations work as intended. --- index.html | 108 ++++++++++++++++++++++++++++++++++++++--------------- main.js | 86 +++++++++++++++++++++++------------------- 2 files changed, 126 insertions(+), 68 deletions(-) diff --git a/index.html b/index.html index 063ab98..b726ace 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,80 @@ - - - - - - Document - - -
- - - - - -
- - - - - - -
-
- - - -
-
- - \ No newline at end of file + + + + + + Document + + +
+ + + + + +
+ + + + + + +
+
+ + + +
+
+ + diff --git a/main.js b/main.js index bf60c18..fa92f61 100644 --- a/main.js +++ b/main.js @@ -1,76 +1,86 @@ // These variable hold the numbers we want to do operations on and the name of the operation we want to perform. // They are expected to change so we use the "let" keyword. -let firstNum = null -let secondNum = null -let operation = null +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) -} + firstNum = parseInt(num); +}; // this function takes in the number you type in the 2nd input field and saves it to the "secondNum" variable const saveSecondNumber = (num) => { // "parseInt" is a built in function in JS that converts a string/word into a number - secondNum = parseInt(num) -} + secondNum = parseInt(num); +}; // this function takes in two argument/numbers and returns the sum of them const add = (numA, numB) => { - const sum = numA + numB - return sum -} + const sum = numA + numB; + return sum; +}; // this function takes in two argument/numbers and returns the difference of them const subtract = (numA, numB) => { - const difference = numA - numB - return difference -} + const difference = numA - numB; + return difference; +}; // These variables are already defined but that don't point to functions. It's up to you to build the functions to complete your calculator use: 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 -// / to get a quotient, +const divide = (numA, numB) => { + const quotient = numA / numB; + return quotient; +}; -const modulus = null -// and % to get a remainder. +const modulus = (numA, numB) => { + 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) => { - operation = chosenOperation + operation = chosenOperation; // Use your Chrome Inspector Tool > Console Tab to see the "operation" that's logged - console.log(operation) -} + console.log(operation); +}; // In order to show the user their results we have to access the DOM and stick in the value const putResultInElement = (operationResults) => { // access the DOM by writing "document" then use the method "getElementById" and pass it the id, "result". - document.getElementById("result").innerHTML = "Results: " + operationResults + document.getElementById('result').innerHTML = 'Results: ' + operationResults; - // Remember, each element has built in properties like "innerHTML" which we can change to anything we like. + // 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 = () => { switch (operation) { - case "addition": putResultInElement(add(firstNum, secondNum)) - break; - case "subtraction": putResultInElement(subtract(firstNum, secondNum)) - break; - case "multiplication": multiply(firstNum, secondNum) - break; - case "division": console.log(divide(firstNum, secondNum)) - break; - case "modulus": console.log(modulus(firstNum, secondNum)) - break; - default: "Choose an operation" + case 'addition': + putResultInElement(add(firstNum, secondNum)); + break; + case 'subtraction': + putResultInElement(subtract(firstNum, secondNum)); + break; + case 'multiplication': + putResultInElement(multiply(firstNum, secondNum)); + break; + case 'division': + putResultInElement(divide(firstNum, secondNum)); + break; + case 'modulus': + putResultInElement(modulus(firstNum, secondNum)); + break; + default: + 'Choose an operation'; } -} - +}; From 16f2fae14eeed4425d6034258dfde7f7880faa3f Mon Sep 17 00:00:00 2001 From: Stephen Date: Tue, 24 May 2022 10:54:07 -0500 Subject: [PATCH 2/9] formatted page for desktop view. --- index.html | 148 ++++++++++++++++++---------------- main.js | 18 ++++- style.css | 229 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 324 insertions(+), 71 deletions(-) diff --git a/index.html b/index.html index b726ace..b9db656 100644 --- a/index.html +++ b/index.html @@ -5,76 +5,90 @@ - Document + Calculator + + + -
- - - - - -
- - - - - - -
-
- - - -
-
+ +
+ + + + + + +
+ + + + + +
+ diff --git a/main.js b/main.js index fa92f61..ca71329 100644 --- a/main.js +++ b/main.js @@ -49,14 +49,28 @@ const modulus = (numA, numB) => { // This function changes the "operation" variable to be equal to the "id" of the button we choose on the web page. const changeOperation = (chosenOperation) => { operation = chosenOperation; - // Use your Chrome Inspector Tool > Console Tab to see the "operation" that's logged + // Use your Chrome Inspector Tool > Console Tab to see the "operation" that's + // logged + // if (operation === addition) { + // operation = '+'; + // } else if (operation === subtraction) { + // operation = '-'; + // } else if (operation === multiplication) { + // operation = 'x'; + // } else if (operation === division) { + // operation = '÷'; + // } else if (operation === modulus) { + // operation = '%'; + // } console.log(operation); }; // In order to show the user their results we have to access the DOM and stick in the value const putResultInElement = (operationResults) => { // access the DOM by writing "document" then use the method "getElementById" and pass it the id, "result". - document.getElementById('result').innerHTML = 'Results: ' + operationResults; + document.getElementById( + 'result' + ).innerHTML = `The answer is: ${operationResults}`; // 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. diff --git a/style.css b/style.css index f6b4813..72895b9 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,230 @@ +:root { + --charcoal: #264653ff; + --persian-green: #2a9d8fff; + --maize-crayola: #e9c46aff; + --sandy-brown: #f4a261ff; + --burnt-sienna: #e76f51ff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { - margin: 20% auto; + margin: 10% auto; width: 50%; height: 75%; -} \ No newline at end of file + font-family: 'Grape Nuts'; +} + +form { + height: auto; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 3fr 2fr 3fr 2fr 2fr; + gap: 10%; + background-color: var(--charcoal); + padding: 2%; + border-radius: 10px; +} + +#addition { + background-color: var(--maize-crayola); + color: var(--persian-green); + font-size: 34px; + border-radius: 5px; + height: 40px; + width: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#addition:hover { + cursor: pointer; + height: 45px; + width: 45px; +} + +#addition:active { + height: 40px; + width: 40px; +} + +#division { + background-color: var(--maize-crayola); + color: var(--persian-green); + font-size: 34px; + border-radius: 5px; + height: 40px; + width: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#division:hover { + cursor: pointer; + height: 45px; + width: 45px; +} + +#division:active { + height: 40px; + width: 40px; +} + +#modulus { + background-color: var(--maize-crayola); + color: var(--persian-green); + font-size: 34px; + border-radius: 5px; + height: 40px; + width: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#modulus:hover { + cursor: pointer; + height: 45px; + width: 45px; +} + +#modulus:active { + height: 40px; + width: 40px; +} + +#multiplication { + background-color: var(--maize-crayola); + color: var(--persian-green); + font-size: 34px; + border-radius: 5px; + height: 40px; + width: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#multiplication:hover { + cursor: pointer; + height: 45px; + width: 45px; +} + +#multiplication:active { + height: 40px; + width: 40px; +} + +#subtraction { + background-color: var(--maize-crayola); + color: var(--persian-green); + font-size: 34px; + border-radius: 5px; + height: 40px; + width: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#subtraction:hover { + cursor: pointer; + height: 45px; + width: 45px; +} + +#subtraction:active { + height: 40px; + width: 40px; +} + +#operations { + grid-row: 2; + grid-column: 2; + padding-right: 0%; + display: flex; + justify-content: center; + align-items: center; + gap: 5%; +} + +#page-container { + height: 100vh; + display: grid; + grid-template-columns: 1fr; + row-gap: 5%; +} + +#result { + height: 30%; + background-color: var(--charcoal); + font-size: 54px; + color: var(--maize-crayola); + border-radius: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.clear { + grid-column: span 2; + background-color: var(--burnt-sienna); + color: whitesmoke; + font-size: 24px; + border-radius: 10px; +} +.equals { + grid-column: span 2; + background-color: var(--burnt-sienna); + color: whitesmoke; + font-size: 24px; +} +.first-number-label { + grid-row: 1; + justify-self: center; + align-self: center; + font-size: 34px; + color: var(--maize-crayola); +} + +.first-number-input { + /* grid-column: 7/13; */ + font-family: 'Grape Nuts'; + font-size: 28px; + padding-left: 0.5em; + border-radius: 10px; +} + +.hide { + display: none; +} + +.second-number-label { + grid-row: 3; + justify-self: center; + align-self: center; + + font-size: 34px; + color: var(--maize-crayola); +} + +.second-number-input { + grid-row: 3; + font-family: 'Grape Nuts'; + font-size: 28px; + padding-left: 0.5em; + border-radius: 10px; +} From 25e093802699aeaaab551d3b69f4fb980479e8c2 Mon Sep 17 00:00:00 2001 From: Stephen Date: Tue, 24 May 2022 13:32:46 -0500 Subject: [PATCH 3/9] Updated styles to make page responsive. --- style.css | 209 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 164 insertions(+), 45 deletions(-) diff --git a/style.css b/style.css index 72895b9..4aa3bc5 100644 --- a/style.css +++ b/style.css @@ -14,29 +14,33 @@ body { margin: 10% auto; - width: 50%; + width: 100%; height: 75%; font-family: 'Grape Nuts'; + background-color: rgba(38, 70, 83, 0.138); } form { height: auto; + width: 90%; + max-width: 900px; + margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 3fr 2fr 3fr 2fr 2fr; gap: 10%; background-color: var(--charcoal); - padding: 2%; + padding: 20px; border-radius: 10px; } #addition { background-color: var(--maize-crayola); color: var(--persian-green); - font-size: 34px; + font-size: 24px; border-radius: 5px; - height: 40px; - width: 40px; + height: 30px; + width: 30px; display: flex; flex-direction: column; justify-content: center; @@ -45,22 +49,22 @@ form { #addition:hover { cursor: pointer; - height: 45px; - width: 45px; + height: 35px; + width: 35px; } #addition:active { - height: 40px; - width: 40px; + height: 30px; + width: 30px; } #division { background-color: var(--maize-crayola); color: var(--persian-green); - font-size: 34px; + font-size: 24px; border-radius: 5px; - height: 40px; - width: 40px; + height: 30px; + width: 30px; display: flex; flex-direction: column; justify-content: center; @@ -69,22 +73,22 @@ form { #division:hover { cursor: pointer; - height: 45px; - width: 45px; + height: 35px; + width: 35px; } #division:active { - height: 40px; - width: 40px; + height: 30px; + width: 30px; } #modulus { background-color: var(--maize-crayola); color: var(--persian-green); - font-size: 34px; + font-size: 24px; border-radius: 5px; - height: 40px; - width: 40px; + height: 30px; + width: 30px; display: flex; flex-direction: column; justify-content: center; @@ -93,22 +97,22 @@ form { #modulus:hover { cursor: pointer; - height: 45px; - width: 45px; + height: 35px; + width: 35px; } #modulus:active { - height: 40px; - width: 40px; + height: 30px; + width: 30px; } #multiplication { background-color: var(--maize-crayola); color: var(--persian-green); - font-size: 34px; + font-size: 24px; border-radius: 5px; - height: 40px; - width: 40px; + height: 30px; + width: 30px; display: flex; flex-direction: column; justify-content: center; @@ -117,22 +121,22 @@ form { #multiplication:hover { cursor: pointer; - height: 45px; - width: 45px; + height: 35px; + width: 35px; } #multiplication:active { - height: 40px; - width: 40px; + height: 30px; + width: 30px; } #subtraction { background-color: var(--maize-crayola); color: var(--persian-green); - font-size: 34px; + font-size: 24px; border-radius: 5px; - height: 40px; - width: 40px; + height: 30px; + width: 30px; display: flex; flex-direction: column; justify-content: center; @@ -141,13 +145,13 @@ form { #subtraction:hover { cursor: pointer; - height: 45px; - width: 45px; + height: 35px; + width: 35px; } #subtraction:active { - height: 40px; - width: 40px; + height: 30px; + width: 30px; } #operations { @@ -157,6 +161,7 @@ form { display: flex; justify-content: center; align-items: center; + flex-wrap: wrap; gap: 5%; } @@ -169,8 +174,11 @@ form { #result { height: 30%; + width: 90%; + max-width: 900px; + margin: 0 auto; background-color: var(--charcoal); - font-size: 54px; + font-size: 24px; color: var(--maize-crayola); border-radius: 10px; display: flex; @@ -185,27 +193,36 @@ form { color: whitesmoke; font-size: 24px; border-radius: 10px; + justify-self: center; + width: 80%; } .equals { grid-column: span 2; - background-color: var(--burnt-sienna); + background-color: var(--persian-green); color: whitesmoke; font-size: 24px; + border-radius: 10px; + justify-self: center; + width: 80%; } .first-number-label { grid-row: 1; justify-self: center; align-self: center; - font-size: 34px; + font-size: 30px; color: var(--maize-crayola); + text-align: center; } .first-number-input { - /* grid-column: 7/13; */ font-family: 'Grape Nuts'; - font-size: 28px; + font-size: 14px; padding-left: 0.5em; border-radius: 10px; + display: flex; + flex-wrap: wrap; + width: 100%; + text-align: center; } .hide { @@ -216,15 +233,117 @@ form { grid-row: 3; justify-self: center; align-self: center; - - font-size: 34px; + font-size: 30px; color: var(--maize-crayola); + text-align: center; } .second-number-input { grid-row: 3; font-family: 'Grape Nuts'; - font-size: 28px; + font-size: 14px; padding-left: 0.5em; border-radius: 10px; + width: 100%; + text-align: center; } + +@media only screen and (min-width: 768px) { + #result { + font-size: 38px; + } + + #addition { + font-size: 34px; + height: 40px; + width: 40px; + align-items: center; + } + + #addition:hover { + cursor: pointer; + height: 45px; + width: 45px; + } + + #addition:active { + height: 40px; + width: 40px; + } + + #division { + font-size: 34px; + height: 40px; + width: 40px; + } + + #division:hover { + cursor: pointer; + height: 45px; + width: 45px; + } + + #division:active { + height: 40px; + width: 40px; + } + + #modulus { + font-size: 34px; + height: 40px; + width: 40px; + } + + #modulus:hover { + cursor: pointer; + height: 45px; + width: 45px; + } + + #modulus:active { + height: 40px; + width: 40px; + } + + #multiplication { + font-size: 34px; + height: 40px; + width: 40px; + } + + #multiplication:hover { + cursor: pointer; + height: 45px; + width: 45px; + } + + #multiplication:active { + height: 40px; + width: 40px; + } + + #subtraction { + font-size: 34px; + height: 40px; + width: 40px; + } + + #subtraction:hover { + cursor: pointer; + height: 45px; + width: 45px; + } + + #subtraction:active { + height: 40px; + width: 40px; + } + + .first-number-label { + font-size: 38px; + } + + .second-number-label { + font-size: 38px; + } +} ; From 3f6ca8e7c1cc7f87bcc3f721cf2cabf2bc5e74bc Mon Sep 17 00:00:00 2001 From: Stephen Date: Tue, 24 May 2022 13:36:38 -0500 Subject: [PATCH 4/9] Organized CSS Selectors alphabetically. --- style.css | 67 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/style.css b/style.css index 4aa3bc5..67d7960 100644 --- a/style.css +++ b/style.css @@ -130,30 +130,6 @@ form { width: 30px; } -#subtraction { - background-color: var(--maize-crayola); - color: var(--persian-green); - font-size: 24px; - border-radius: 5px; - height: 30px; - width: 30px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -#subtraction:hover { - cursor: pointer; - height: 35px; - width: 35px; -} - -#subtraction:active { - height: 30px; - width: 30px; -} - #operations { grid-row: 2; grid-column: 2; @@ -187,6 +163,30 @@ form { align-items: center; } +#subtraction { + background-color: var(--maize-crayola); + color: var(--persian-green); + font-size: 24px; + border-radius: 5px; + height: 30px; + width: 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#subtraction:hover { + cursor: pointer; + height: 35px; + width: 35px; +} + +#subtraction:active { + height: 30px; + width: 30px; +} + .clear { grid-column: span 2; background-color: var(--burnt-sienna); @@ -225,10 +225,6 @@ form { text-align: center; } -.hide { - display: none; -} - .second-number-label { grid-row: 3; justify-self: center; @@ -249,10 +245,6 @@ form { } @media only screen and (min-width: 768px) { - #result { - font-size: 38px; - } - #addition { font-size: 34px; height: 40px; @@ -322,6 +314,10 @@ form { width: 40px; } + #result { + font-size: 38px; + } + #subtraction { font-size: 34px; height: 40px; @@ -343,7 +339,14 @@ form { font-size: 38px; } + .first-number-input { + font-size: 28px; + } .second-number-label { font-size: 38px; } + + .second-number-input { + font-size: 28px; + } } ; From 87b0cd3d8123dd6ea3f46cf8a7bf81194d3f0c9f Mon Sep 17 00:00:00 2001 From: Stephen Date: Tue, 24 May 2022 14:21:20 -0500 Subject: [PATCH 5/9] Converted stored number variables from parseInt to parseFloat, and used Math.round to round to 6 decimal places. --- main.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/main.js b/main.js index ca71329..cf00eb4 100644 --- a/main.js +++ b/main.js @@ -6,25 +6,25 @@ 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); + firstNum = parseFloat(num); }; // this function takes in the number you type in the 2nd input field and saves it to the "secondNum" variable const saveSecondNumber = (num) => { // "parseInt" is a built in function in JS that converts a string/word into a number - secondNum = parseInt(num); + secondNum = parseFloat(num); }; // this function takes in two argument/numbers and returns the sum of them const add = (numA, numB) => { const sum = numA + numB; - return sum; + return Math.round(sum * 1000000) / 1000000; }; // this function takes in two argument/numbers and returns the difference of them const subtract = (numA, numB) => { const difference = numA - numB; - return difference; + return Math.round(difference * 1000000) / 1000000; }; // These variables are already defined but that don't point to functions. It's up to you to build the functions to complete your calculator use: @@ -33,17 +33,17 @@ 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. const product = numA * numB; - return product; + return Math.round(product * 1000000) / 1000000; }; const divide = (numA, numB) => { const quotient = numA / numB; - return quotient; + return Math.round(quotient * 1000000) / 1000000; }; const modulus = (numA, numB) => { const modulus = numA % numB; - return modulus; + return Math.round(modulus * 1000000) / 1000000; }; // This function changes the "operation" variable to be equal to the "id" of the button we choose on the web page. From c1eee3821ed086915e3d7617277fb80adb257e3a Mon Sep 17 00:00:00 2001 From: Stephen Date: Tue, 24 May 2022 15:39:49 -0500 Subject: [PATCH 6/9] Added a title. --- index.html | 3 +++ style.css | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/index.html b/index.html index b9db656..07747db 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,9 @@ /> +
+

Welcome to Stephen's Rinky Dink Calculator

+