diff --git a/index.html b/index.html index 063ab98..cb02706 100644 --- a/index.html +++ b/index.html @@ -4,29 +4,26 @@ - - Document + + Calculator-app-101
- - + - +
- - - - + + +

-
- \ No newline at end of file + diff --git a/main.js b/main.js index bf60c18..f707a22 100644 --- a/main.js +++ b/main.js @@ -1,76 +1,79 @@ -// 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 +// These variables hold the numbers we want to perform 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; -// this function takes in the number you type in the input field and saves it to the "firstNum" variable +// 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 +// 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 +// This function takes in two arguments/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 +// This function takes in two arguments/numbers and returns the difference of them const subtract = (numA, numB) => { - 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 difference = numA - numB; + return difference; +}; +// This function takes in two arguments/numbers and returns their product 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, +// This function takes in two arguments/numbers and returns the quotient +const divide = (numA, numB) => { + const quotient = numA / numB; + return quotient; +}; -const modulus = null -// and % to get a remainder. +// This function takes in two arguments/numbers and returns the remainder +const modulus = (numA, numB) => { + 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. +// 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; +}; -// In order to show the user their results we have to access the DOM and stick in the value +// In order to show the user their results, we have to access the DOM and insert 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 - - // 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. -} + document.getElementById("result").innerHTML = "Results: " + 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 +// The function uses the value of the "operation" variable to determine which operation function it should use on the numbers: 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: + putResultInElement("Choose an operation"); + break; } -} - +}; diff --git a/style.css b/style.css index f6b4813..98f224c 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,39 @@ -body { - margin: 20% auto; - width: 50%; - height: 75%; -} \ No newline at end of file +.calculator { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 5px; + max-width: 300px; + margin: 0 auto; + padding: 10px; + background-color: #f4f4f4; + border-radius: 5px; +} + +.calculator input[type="number"], +.calculator button { + grid-column: span 2; + padding: 10px; + font-size: 16px; +} + +.calculator input[type="number"] { + grid-column: span 4; +} + +.calculator button { + cursor: pointer; + background-color: #d4d4d4; + border: none; + border-radius: 3px; +} + +.calculator button:hover { + background-color: #b4b4b4; +} + +.calculator #result { + grid-column: span 4; + margin-top: 10px; + font-size: 18px; + text-align: right; +}