+
+
+
Calculator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
index bf60c18..16c0745 100644
--- a/main.js
+++ b/main.js
@@ -32,14 +32,23 @@ 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)
+ // 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) => {
@@ -57,18 +66,32 @@ const putResultInElement = (operationResults) => {
// Here we give it a string: "Results: " and add the value of the operation to it.
}
+const clearResults = () => {
+ // access the DOM by writing "document" then use the method "getElementById" and pass it the id, "result".
+ document.getElementById("result").innerHTML = ""
+
+ // 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.
+}
+
// 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 (!firstNum) {
+ firstNum = parseInt(document.getElementById('first-Number').value)
+ }
+ if (!secondNum) {
+ secondNum = parseInt(document.getElementById('second-Number').value)
+ }
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..3813db3 100644
--- a/style.css
+++ b/style.css
@@ -2,4 +2,89 @@ body {
margin: 20% auto;
width: 50%;
height: 75%;
+ border: 6px solid black;
+ background-color: goldenrod;
+ font-size: 35px;
+ -webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
+ -moz-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
+ box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
+}
+
+.calculator {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "title"
+ "num1"
+ "num2"
+ "butt"
+ "equalz"
+ "resetz"
+}
+
+.title {
+ grid-area: "title";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.firstNum {
+ font-size: 18px;
+ grid-area: "num1";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 14px;
+}
+
+.secondNum {
+ font-size: 18px;
+ grid-area: "num2";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 14px;
+}
+
+.buttons {
+ grid-area: "butt";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 14px;
+}
+
+.equal-button {
+ grid-area: "equalz";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 14px;
+}
+
+.reset-button {
+ grid-area: "resetz";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 14px;
+}
+
+.equal{
+ height: 40px;
+ width:285px;
+}
+
+.start-over{
+ height: 40px;
+ width:285px;
+}
+
+.result {
+ font-size: 30px;
+ grid-area: "answer";
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
\ No newline at end of file