diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..aef8443 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 063ab98..4c1c1fa 100644 --- a/index.html +++ b/index.html @@ -3,30 +3,63 @@ + - - Document + + Calculator -
- - - - - -
- - - - - - +
+
+

Welcome to the simple calculator!

+

1. Choose your first and second number

+

2. Select the operation

+

3. Click on Equals to get your result!

+

4. Click "Clear" to reset fields

-
- - - - -
+ +
+ +
+ +
+

First Number

+ + + +
+ +
+

Second Number

+ + +
+ +
+ +
+ + + + + + +
+ +
+ +
+ + +
+ +
+
+

Results:

+
+ +
+
+
\ No newline at end of file diff --git a/main.js b/main.js index bf60c18..7fdb4c8 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) } -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 +59,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-field").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. @@ -59,18 +67,32 @@ 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 (!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" + default: alert("Choose an operation") } } +const clearresult = () => { + document.getElementById('first-Number').value = null + document.getElementById('second-Number').value = null + document.getElementById('result-field').innerHTML = null +} diff --git a/repeating_numbers_background.jpg b/repeating_numbers_background.jpg new file mode 100644 index 0000000..1fa19bf Binary files /dev/null and b/repeating_numbers_background.jpg differ diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..b37fa30 --- /dev/null +++ b/reset.css @@ -0,0 +1,52 @@ +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; +} +/* + 2. Remove default margin +*/ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application +*/ +html, body { + height: 100%; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering +*/ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 6. Improve media defaults +*/ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles +*/ +input, button, textarea, select { + font: inherit; +} +/* + 8. Avoid text overflows +*/ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context +*/ +#root, #__next { + isolation: isolate; +} \ No newline at end of file diff --git a/style.css b/style.css index f6b4813..3344338 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,161 @@ -body { - margin: 20% auto; - width: 50%; +body{ + background-image: url(repeating_numbers_background.jpg); + display: flex; + justify-content: center; +} + +.main-container{ + margin: 100px 10%; + width: 1200px; + min-width: 1200px; + /* max-width: 1200px; */ height: 75%; + background-color: lightgrey; + opacity: .8; + display: flex; + flex-direction: column; + align-items: center; +} + +#instructions{ + width:700px; + /* min-width: 500px; */ + border: dotted 10px red; + padding: 15px; +} + +h1{ + font-size: 40px; + text-align: center; +} + +h2{ + text-align: left; + padding-left: 20%; +} + +form{ + margin-top: 50px; + border: dashed 3px blue; + width: 700px; + padding-bottom: 30px; + /* height: 400px; + padding: 50px auto auto; */ +} + +.number-field{ + display: flex; + justify-content: space-evenly; + padding: 20px; +} + +h3{ + text-align: center; +} + +.first-number-container{ + /* display: flex; */ + font-size: 24px; + +} + +.second-number-container{ + font-size: 24px; +} + +.operation-selection{ + margin-top: 30px; + display: flex; + justify-content: space-evenly; +} + +button#addition{ + font-size: 24px; + height:50px; + width: 12%; +} + +button#subtraction{ + font-size: 24px; + height:50px; + /* width: 12%; */ +} + +button#multiplication{ + font-size: 24px; + height:50px; + /* width: 12%; */ +} + +button#division{ + font-size: 24px; + height:50px; + width: 13%; +} + +button#modulus{ + font-size: 24px; + height:50px; + /* width: 12%; */ +} + +.equals-clear-field{ + margin-top: 20px; + display: flex; + justify-content: space-around; +} + +button#equals-button{ + font-size: 25px; + height: 70px; +} + +button#clear-button{ + font-size: 25px; + height: 70px; +} + +#result{ + margin-top: 50px; + padding-bottom: 100px; +} + +h4{ + font-size: 30px; +} + +#result-field{ + border: groove 2px black; + background-color: white; + font-size: 28px; + height: 40px; + width: 200px; + /* padding-bottom: 50px; */ +} + +@media(max-width: 1200px){ + + .main-container{ + width: 700px; + min-width: 700px; + } + +} + +@media(max-width: 710px){ + + .main-container{ + width:650px; + min-width:650px; + } + + #instructions{ + width:650px; + min-width:650px; + } + + form{ + width:650px; + min-width:650px; + } } \ No newline at end of file