diff --git a/index.html b/index.html index 063ab98..07747db 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,97 @@ - - - - - - Document - - -
- - - - - -
- - - - - - + + + + + + Calculator + + + + + +
+

Welcome to Stephen's Rinky Dink Calculator

+
+
+ + + + + + +
+ + + + + + +
+ + + + + +
-
- - - - -
- - \ No newline at end of file + + diff --git a/main.js b/main.js index bf60c18..680319a 100644 --- a/main.js +++ b/main.js @@ -1,76 +1,100 @@ // 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 = 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 -} + const sum = numA + numB; + return (Math.round(sum * 1000000) / 1000000).toLocaleString('en-US'); +}; // 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 (Math.round(difference * 1000000) / 1000000).toLocaleString('en-US'); +}; // 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 (Math.round(product * 1000000) / 1000000).toLocaleString('en-US'); +}; -const divide = null -// / to get a quotient, +const divide = (numA, numB) => { + const quotient = numA / numB; + return (Math.round(quotient * 1000000) / 1000000).toLocaleString('en-US'); +}; -const modulus = null -// and % to get a remainder. +const modulus = (numA, numB) => { + const modulus = numA % numB; + return (Math.round(modulus * 1000000) / 1000000).toLocaleString('en-US'); +}; // 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 - console.log(operation) -} + operation = chosenOperation; + // 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. + // 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'; } -} - +}; diff --git a/style.css b/style.css index f6b4813..8bdfa29 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,352 @@ +: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; - width: 50%; + margin: 10% auto; + width: 100%; height: 75%; -} \ No newline at end of file + 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: 20px; + border-radius: 10px; +} + +h1 { + text-align: center; + margin-bottom: 1em; + font-size: 1.5em; + color: var(--burnt-sienna); +} +#addition { + 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; +} + +#addition:hover { + cursor: pointer; +} + +#addition:active { + background-color: whitesmoke; +} + +#division { + 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; +} + +#division:hover { + cursor: pointer; +} + +#division:active { + background-color: whitesmoke; +} + +#modulus { + 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; +} + +#modulus:hover { + cursor: pointer; +} + +#modulus:active { + background-color: whitesmoke; +} + +#multiplication { + 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; +} + +#multiplication:hover { + cursor: pointer; +} + +#multiplication:active { + background-color: whitesmoke; +} + +#operations { + grid-row: 2; + grid-column: 2; + padding-right: 0%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 5%; +} + +#page-container { + height: 100vh; + display: grid; + grid-template-columns: 1fr; + row-gap: 5%; +} + +#result { + height: 30%; + width: 90%; + max-width: 900px; + margin: 0 auto; + background-color: var(--charcoal); + font-size: 24px; + color: var(--maize-crayola); + border-radius: 10px; + display: flex; + flex-direction: column; + justify-content: center; + 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; +} + +#subtraction:active { + background-color: whitesmoke; +} + +:focus { + border: 3px solid var(--burnt-sienna); +} +.active { + border: solid 3px var(--burnt-sienna); +} +.clear { + grid-column: span 2; + background-color: var(--burnt-sienna); + color: whitesmoke; + font-size: 24px; + border-radius: 10px; + justify-self: center; + width: 80%; +} +.equals { + grid-column: span 2; + 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: 30px; + color: var(--maize-crayola); + text-align: center; +} + +.first-number-input { + font-family: 'Grape Nuts'; + font-size: 14px; + padding-left: 0.5em; + border-radius: 10px; + display: flex; + flex-wrap: wrap; + width: 100%; + text-align: center; +} + +.second-number-label { + grid-row: 3; + justify-self: center; + align-self: center; + font-size: 30px; + color: var(--maize-crayola); + text-align: center; +} + +.second-number-input { + grid-row: 3; + font-family: 'Grape Nuts'; + font-size: 14px; + padding-left: 0.5em; + border-radius: 10px; + width: 100%; + text-align: center; +} + +@media only screen and (min-width: 768px) { + h1 { + font-size: 3em; + } + #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; + } + + #result { + font-size: 38px; + } + + #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; + } + + .first-number-input { + font-size: 28px; + } + .second-number-label { + font-size: 38px; + } + + .second-number-input { + font-size: 28px; + } +} ;