diff --git a/index.html b/index.html
index 063ab98..44c1d0d 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
-
-
+
+
Document
@@ -18,9 +18,9 @@
-
-
-
+
+
+
diff --git a/main.js b/main.js
index bf60c18..1eda16d 100644
--- a/main.js
+++ b/main.js
@@ -30,15 +30,23 @@ 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) => {
+ const product = numA * numB
+ return product
// * 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)
+ console.log(chosenOperation)
}
-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.
@@ -52,6 +60,7 @@ const changeOperation = (chosenOperation) => {
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
+ console.log(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.
@@ -59,18 +68,21 @@ 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 = () => {
+ // if (operation === 'addition') {
+ // putResultInElement(add(firstNum, secondNum))
+ // } else if (operation ===)
+ // }
switch (operation) {
case "addition": putResultInElement(add(firstNum, secondNum))
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"
}
}
-
diff --git a/style.css b/style.css
index f6b4813..73b5177 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,63 @@
body {
- margin: 20% auto;
- width: 50%;
- height: 75%;
+ width: 100em;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ font-family: 'Manrope', sans-serif;
+ font-family: 'Rowdies', cursive;
+ font-family: 'Ubuntu', sans-serif;
+}
+.container {
+ border: 10px inset rgb(67, 66, 66);
+ border-radius: 5%;
+ background-color: green;
+ padding: 2%;
+}
+input {
+ height: 10%;
+ width: 97%;
+}
+.calculator-container {
+ display: flex;
+ padding-top: 2%;
+ padding-bottom: 5%;
+}
+.number-container {
+ display: flex;
+ justify-content: space-evenly;
+ flex-direction: column;
+}
+.operator-container {
+ display: flex;
+ flex-direction: column;
+}
+.equals {
+ height: 100%;
+ width: 40px;
+}
+button {
+ color: black;
+ background-color: rgb(141, 237, 149);
+ height: 50px;
+ width: 50px;
+ font-size: 20px;
+ font-family: 'Manrope', sans-serif;
+ font-family: 'Rowdies', cursive;
+ font-family: 'Ubuntu', sans-serif;
+}
+.result-container {
+ background-color: rgb(134, 214, 141);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border: 2px outset black;
+ border-radius: 5%;
+ padding: 3%;
+}
+.result {
+ background-color: white;
+ border: 5px solid black;
+ border-radius: 5%;
+ height: 100px;
+ width: 200px;
}
\ No newline at end of file