diff --git a/index.html b/index.html index 063ab98..061d1b9 100644 --- a/index.html +++ b/index.html @@ -4,29 +4,36 @@ - + Document + +
- + - - - -
+ + + +
- - - - - + + + + +
+ + + +
- - - + +
+ + +
-
\ No newline at end of file diff --git a/main.js b/main.js index bf60c18..17bb5f1 100644 --- a/main.js +++ b/main.js @@ -31,14 +31,21 @@ const subtract = (numA, numB) => { const multiply = (numA, numB) => { // * to get a product then return it + const product = numA * numB // 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 product } -const divide = null +const divide = (numA, numB) => { + const quotient = numA / numB + return quotient +} // / to get a quotient, -const modulus = null +const modulus = (numA, numB) => { + const remainder = numA % numB + return remainder +} // 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 +58,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 = 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. @@ -64,13 +71,19 @@ const equals = () => { 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" } } +function clearResult() { + firstNum = null + secondNum = null + operation = null + result.innerHTML = null +} \ No newline at end of file diff --git a/style.css b/style.css index f6b4813..7900566 100644 --- a/style.css +++ b/style.css @@ -2,4 +2,39 @@ body { margin: 20% auto; width: 50%; height: 75%; + display: flex; + flex-direction: column; +} + +form.calculator { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: grey; + border-radius: 5px; +} +div.buttons { + display: flex; + justify-content: space-evenly; + align-items: center; + margin: 2%; + /* flex-direction: column; */ +} + +div.equalOrClear { + display: flex; + justify-content: space-around; + align-items: center; + margin: 2%; + /* flex-direction: column; */ +} + +#result { + display: flex; + justify-content: center; + align-items: center; + color: red; + background-color: rgb(214, 212, 212); + border-radius: 5px; } \ No newline at end of file