+
+
\ No newline at end of file
diff --git a/main.js b/main.js
index bf60c18..52588ab 100644
--- a/main.js
+++ b/main.js
@@ -32,14 +32,21 @@ const subtract = (numA, numB) => {
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
+const divide = (numA, numB) => {
// / to get a quotient,
+ const quotient = numA / numB
+ return quotient
+}
-const modulus = null
+const modulus = (numA, numB) => {
// and % to get a remainder.
+ 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.
const changeOperation = (chosenOperation) => {
@@ -55,20 +62,29 @@ const putResultInElement = (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.
+
+
+ // NOTE TO SELF:
+ // You could already have Results as innerHTML that is always rendered on the page (already in the html file), and then append operationResults to it
+ // e.g.
Results:
+ // let text = document.createTextNode(operationResults)
+ // document.getElementById("result").appendChild(text)
}
// 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
+// We can use operation, firstNum, and secondNum after we saved them because these variables have global scope
const equals = () => {
switch (operation) {
case "addition": putResultInElement(add(firstNum, secondNum))
break;
case "subtraction": putResultInElement(subtract(firstNum, secondNum))
break;
- case "multiplication": multiply(firstNum, secondNum)
+ // If wanted to log in console instead, do console.log(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..0e27457 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,59 @@
body {
margin: 20% auto;
- width: 50%;
height: 75%;
+
+ width: 300pt;
+}
+
+main {
+ background-color: lightblue;
+}
+
+#result {
+ height: 20pt;
+ background-color: rgb(243, 106, 129);
+ padding: 20pt;
+}
+
+form {
+ width: 100%;
+}
+
+.number-container {
+ border: rgb(20, 106, 219) 2pt solid;
+ display: grid;
+ grid-template-areas: 'one two'
+ 'three four';
+ height: 60pt;
+ padding: 10pt;
+ background-color: rgb(184, 235, 231);
+}
+
+.number-container * {
+ margin: 2pt 8pt;
+ align-content: center;
+ /* text-align: center; */
+}
+
+.operation-container {
+ display: grid;
+ grid-template-areas: 'one two'
+ 'three four'
+ 'five . ';
+ margin: 10pt;
+}
+
+.operation-container button {
+ margin: 2pt;
+ height: 30pt;
+}
+
+.finish {
+ padding: 10pt;
+}
+
+.finish button {
+ margin: 2pt;
+ height: 20pt;
+ width: 70pt;
}
\ No newline at end of file