diff --git a/index.html b/index.html index 063ab98..788a02e 100644 --- a/index.html +++ b/index.html @@ -3,30 +3,41 @@ + - - Document + + + + + + + + Calculator +

CALCULATOR

+
- - - - - -
- - - - - - +
+ + + +
+
+ +
+ + + + + +
- - + + +
-
\ No newline at end of file diff --git a/main.js b/main.js index bf60c18..064884e 100644 --- a/main.js +++ b/main.js @@ -30,15 +30,20 @@ const subtract = (numA, numB) => { // 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) => { + console.log(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) + return numA * numB; } -const divide = null +const divide = (numA, numB) => { + return numA / numB; +} // / to get a quotient, -const modulus = null +const modulus = (numA, numB) => { + return numA % numB; +} // and % to get a remainder. // This function changes the "operation" variable to be equal to the "id" of the button we choose on the web page. @@ -51,7 +56,7 @@ const changeOperation = (chosenOperation) => { // 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 = "Result: " + 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. @@ -60,17 +65,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 = () => { switch (operation) { - case "addition": putResultInElement(add(firstNum, secondNum)) + case "addition": putResultInElement(add(firstNum, secondNum)); break; - case "subtraction": putResultInElement(subtract(firstNum, secondNum)) + 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" + default: "Choose an operation"; } } +// A function that will handle the clear operation. +const clearResult = () => { + console.log('test') + document.getElementById("result").innerHTML = ""; +} diff --git a/style.css b/style.css index f6b4813..ef21789 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,94 @@ body { - margin: 20% auto; + margin: auto; + padding-top: 50px; width: 50%; height: 75%; + background-color: #FFF; + color: #207487; +} + +.title { + margin: auto; + width: 100%; + text-align: center; + padding-bottom: 40px; +} + +.calculator { + background-color: #207487; + border-radius: 10px; + padding: 50px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 50px 1fr 1fr 1fr; + grid-row-gap: 20px; + grid-template-areas: + "result result result result" + "num1 num1 num2 num2" + "addition subtraction division multiplication" + "modulo modulo equals equals" + "clear clear clear clear"; +} + +.calculator, .calculator button { + font-family: 'Hubballi', sans-serif; + font-size: 20px; + color: white; +} + +.calculator button { + color: #BF5151; +} + +.firstnum { + text-align: center; + grid-area: num1; +} + +.secondnum { + text-align: center; + grid-area: num2; +} + +#addition { + grid-area: addition; +} + +#subtraction { + grid-area: subtraction; +} + +#division { + grid-area: division; +} + +#multiplication { + grid-area: multiplication; +} + +#modulus { + grid-area: modulo; +} + +#equalsign { + grid-area: equals; +} + +#clear { + grid-area: clear; +} + +#result { + grid-area: result; + border-radius: 10px; + background-color: white; + height: 40px; + color: rgb(76, 71, 71); + text-align: center; + font-size: 30px; +} + +.title { + font-family: 'Hubballi', sans-serif; + font-size: 60px; } \ No newline at end of file