From adc41a6b28b20bebda8d0bb621d3cdf102b4dc8d Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 15:35:58 -0500 Subject: [PATCH 01/59] Import Bootstrap --- index.html | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..f45b3fd --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + Document + + + +
+

Hello

+
+ + + + + + + + \ No newline at end of file From dd98d425a825f13acd4dfbe01fdd5de0b52e43eb Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 15:38:25 -0500 Subject: [PATCH 02/59] Create and import styles.css --- styles.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e69de29 From 4aed2142c42f38fb966ce21fc23e646513a405a8 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 16:24:25 -0500 Subject: [PATCH 03/59] Set layout with Bootstrap --- index.html | 52 +++++++++++++++++++++++++++++++++++++++++++++++++--- styles.css | 28 ++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index f45b3fd..ede50c6 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,61 @@ + + + + + Document -
-

Hello

-
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
- - + \ No newline at end of file diff --git a/styles.css b/styles.css index b845836..6f1b546 100644 --- a/styles.css +++ b/styles.css @@ -1,14 +1,14 @@ -/* - Any class with c- in front of it stands for custom. Meaning it is *not* a Bootstrap class. - For example, Bootstrap has a class named "border". - So we use "c-border" because we don't want to override "border". We want to start a new class. -*/ +/**** Shared Styles ****/ -.container { - width: 450px; +.d-flex { + display: flex; } -.c-border { +.justify-center { + justify-content: center; +} + +.border { border: 1px solid black; } @@ -16,13 +16,20 @@ border-radius: 10px; } +.calc-container { + width: fit-content; + padding: 1em 1.5em; +} + button { border-radius: 10px; - background-color: red; + background-color: rgb(247, 140, 140); border: none; padding: 1em 2em; + margin-left: 1em; } -main { - border: 1px solid black; +/* Buttons push away from button their left, except for the first button of each row. */ +.row > :nth-child(1) { + margin-left: 0; } From 1fd7e1c1f10d1446cdd2abd50bfafa60c4b88efd Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 16:38:45 -0500 Subject: [PATCH 05/59] Create second row --- index.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c2516e0..da29653 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,19 @@ Document + -
-
+
+
+ + + + +
+ +
From c8c9e44d127ce0f92b11b5dd0128b4c2d742d79e Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 16:39:57 -0500 Subject: [PATCH 06/59] Refactor button margins to simplify CSS --- styles.css | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/styles.css b/styles.css index 6f1b546..35b010b 100644 --- a/styles.css +++ b/styles.css @@ -18,7 +18,7 @@ .calc-container { width: fit-content; - padding: 1em 1.5em; + padding: 0.5em 1em; } button { @@ -26,10 +26,5 @@ button { background-color: rgb(247, 140, 140); border: none; padding: 1em 2em; - margin-left: 1em; -} - -/* Buttons push away from button their left, except for the first button of each row. */ -.row > :nth-child(1) { - margin-left: 0; + margin: 0.3em; } From 1a082eba86f4fba5aa5365d2e792c4577e924ffa Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 16:45:35 -0500 Subject: [PATCH 07/59] Set button padding to font-size. Replace - - - + + + +
- - - - + + + + +
+
+ + + + +
+
+ + + + +
+
+ + + +
diff --git a/styles.css b/styles.css index 35b010b..dde98fb 100644 --- a/styles.css +++ b/styles.css @@ -25,6 +25,9 @@ button { border-radius: 10px; background-color: rgb(247, 140, 140); border: none; - padding: 1em 2em; + /* padding: 1em 2em; */ + font-size: 19px; + width: 7em; + height: 3em; margin: 0.3em; } From 6aaee94259451c9f388770a1b6c719d7c8888286 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 16:54:52 -0500 Subject: [PATCH 08/59] Create "Standard | Scientific" a tags --- index.html | 7 +++++++ styles.css | 13 ++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 31a6d44..e71e3f5 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,13 @@
+ +
+ Standard + | + Scientific +
+
diff --git a/styles.css b/styles.css index dde98fb..7e7b0ff 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,9 @@ /**** Shared Styles ****/ +.margin { + margin: 0.3em; +} + .d-flex { display: flex; } @@ -16,16 +20,23 @@ border-radius: 10px; } + + + + .calc-container { width: fit-content; padding: 0.5em 1em; } +.url-row > * { + margin-right: 10px; +} + button { border-radius: 10px; background-color: rgb(247, 140, 140); border: none; - /* padding: 1em 2em; */ font-size: 19px; width: 7em; height: 3em; From e8a62d4394148cab1209b677c5a1ee0b355ca648 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 16:57:00 -0500 Subject: [PATCH 09/59] Rename --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e71e3f5..86a5e2d 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ <Link rel="stylesheet" href="./styles.css"> - <title>Document + Calculator From 18b40832e3bb6b2a4d542821e2f77cb8af1bd085 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 17:03:56 -0500 Subject: [PATCH 10/59] Set button background colors --- index.html | 24 ++++++++++++------------ styles.css | 11 +++++++++++ 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 86a5e2d..b36d996 100644 --- a/index.html +++ b/index.html @@ -30,27 +30,27 @@
- - - + + +
- - - + + +
- - - + + +
- - - + + +
diff --git a/styles.css b/styles.css index 7e7b0ff..4647277 100644 --- a/styles.css +++ b/styles.css @@ -41,4 +41,15 @@ button { width: 7em; height: 3em; margin: 0.3em; + background-color: rgb(223, 225, 229); +} + +.btn-light-gray { + background-color: rgb(241, 243, 244); +} + +.btn-blue { + background-color: rgb(66, 133, 244); + color: white; + font-weight: bold; } From 3b3ef75a6a0020f68b9340c9420095268e09be91 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 17:11:14 -0500 Subject: [PATCH 11/59] Give buttons hover effect --- styles.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/styles.css b/styles.css index 4647277..89726ce 100644 --- a/styles.css +++ b/styles.css @@ -53,3 +53,15 @@ button { color: white; font-weight: bold; } + +button:hover { + cursor: pointer; + background-color: rgb(215, 217, 221); +} + +button.btn-light-gray:hover { + background-color: rgb(232, 234, 235); +} +button.btn-blue:hover { + background-color: rgb(77, 139, 241); +} From 770a94dfa91121521cc0f102c0eb934aa5e5cb91 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 17:12:47 -0500 Subject: [PATCH 12/59] Change border color --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 89726ce..5702c62 100644 --- a/styles.css +++ b/styles.css @@ -13,7 +13,7 @@ } .border { - border: 1px solid black; + border: 1px solid rgb(223, 225, 229); } .squircle { From cb6a025a67e968ac150cb6693bce29f8a3de59c8 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 18:09:17 -0500 Subject: [PATCH 13/59] Set tag colors --- index.html | 4 ++-- styles.css | 13 +++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b36d996..3370ced 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,9 @@
- Standard + Standard | - Scientific + Scientific
diff --git a/styles.css b/styles.css index 5702c62..263f94e 100644 --- a/styles.css +++ b/styles.css @@ -20,6 +20,19 @@ border-radius: 10px; } +a:link { + color: blue; +} + +a:hover { + color: teal; +} + +a:visited { + color: purple; +} + + From d2411ee2e63185f129894cbacee5e886a60c1fb3 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 18:10:44 -0500 Subject: [PATCH 14/59] Remove row class because it is unused --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 3370ced..7cd4244 100644 --- a/index.html +++ b/index.html @@ -22,32 +22,32 @@ Scientific
-
+
-
+
-
+
-
+
-
+
From 306f925fe28297e47de11cac0bab3af04443aea3 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 18:26:48 -0500 Subject: [PATCH 15/59] Create and style input field --- index.html | 2 ++ styles.css | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/index.html b/index.html index 7cd4244..5793d40 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,8 @@ Scientific
+ +
diff --git a/styles.css b/styles.css index 263f94e..765b2e8 100644 --- a/styles.css +++ b/styles.css @@ -46,6 +46,15 @@ a:visited { margin-right: 10px; } +input { + margin: 0.6rem 0.3rem; + padding: 0 1.3rem; + width: 90.7%; + height: 1.7em; + font-size: 40px; + text-align: right; +} + button { border-radius: 10px; background-color: rgb(247, 140, 140); From 2ae3150ff15eacdc7d01faa8fe4d6688870057d6 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 18:33:59 -0500 Subject: [PATCH 16/59] Replaced symbols with &symbols --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 5793d40..4328e55 100644 --- a/index.html +++ b/index.html @@ -35,25 +35,25 @@ - +
- +
- +
- +
From b252de09311f69c8714c5f03358a0753f45ef2f3 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 18:35:47 -0500 Subject: [PATCH 17/59] Make decimal bold and increase url font-size --- index.html | 2 +- styles.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 4328e55..6d1b900 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,7 @@
- +
diff --git a/styles.css b/styles.css index 765b2e8..477faeb 100644 --- a/styles.css +++ b/styles.css @@ -44,6 +44,7 @@ a:visited { .url-row > * { margin-right: 10px; + font-size: 19px; } input { From 32941c7b052154e9c7de652a134bbef4b84a4a03 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 18:45:02 -0500 Subject: [PATCH 18/59] Add

tag to each row with Javascript --- index.html | 12 ++++++------ scientific-calculator.js | 8 ++++++++ 2 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 scientific-calculator.js diff --git a/index.html b/index.html index 6d1b900..96c166e 100644 --- a/index.html +++ b/index.html @@ -24,32 +24,32 @@ -

+
-
+
-
+
-
+
-
+
@@ -57,7 +57,7 @@
- + \ No newline at end of file diff --git a/scientific-calculator.js b/scientific-calculator.js new file mode 100644 index 0000000..d3fc2aa --- /dev/null +++ b/scientific-calculator.js @@ -0,0 +1,8 @@ +console.log("hellfdsafdsao"); + +let classes = document.getElementsByClassName("row"); +for (let i = 0; i < classes.length; i++) { + let existingHTML = classes[i].innerHTML; + let newHTML = "

wow

"; + classes[i].innerHTML = newHTML + existingHTML; +} \ No newline at end of file From e7bc311e0e26fbdc48fda941bccd9a129901a8c7 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 18:56:27 -0500 Subject: [PATCH 19/59] Fill for Scientific buttons --- scientific-calculator.js | 45 +++++++++++++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/scientific-calculator.js b/scientific-calculator.js index d3fc2aa..e1a9fca 100644 --- a/scientific-calculator.js +++ b/scientific-calculator.js @@ -1,8 +1,43 @@ -console.log("hellfdsafdsao"); +console.log("Initiating Script"); let classes = document.getElementsByClassName("row"); -for (let i = 0; i < classes.length; i++) { - let existingHTML = classes[i].innerHTML; - let newHTML = "

wow

"; - classes[i].innerHTML = newHTML + existingHTML; +for (let row = 0; row < classes.length; row++) { + let newHTML = getScientificButtons(row); + let existingHTML = classes[row].innerHTML; + classes[row].innerHTML = newHTML + existingHTML; +} + +function getScientificButtons(row) { + switch(row) { + case 0: + return ` + + + + ` + case 1: + return ` + + + + ` + case 2: + return ` + + + + ` + case 3: + return ` + + + + ` + case 4: + return ` + + + + ` + } } \ No newline at end of file From cd4085fdc1bfe5df36517158e870e618c7bfb494 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 21:09:21 -0500 Subject: [PATCH 20/59] Use Javascript to enable/disable Scientific calculator --- index.html | 4 +-- scientific-calculator.js | 62 ++++++++++++++++++++++++++-------------- 2 files changed, 43 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 96c166e..cd2da1e 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,9 @@
- Standard + Standard | - Scientific + Scientific
diff --git a/scientific-calculator.js b/scientific-calculator.js index e1a9fca..ac33b55 100644 --- a/scientific-calculator.js +++ b/scientific-calculator.js @@ -1,43 +1,63 @@ -console.log("Initiating Script"); +let scientificCalculatorActive = false; -let classes = document.getElementsByClassName("row"); -for (let row = 0; row < classes.length; row++) { - let newHTML = getScientificButtons(row); - let existingHTML = classes[row].innerHTML; - classes[row].innerHTML = newHTML + existingHTML; +let tag = document.querySelector("a"); + a.addEventListener("click", () => { + scientificCalculatorActive = !scientificCalculatorActive; + if (scientificCalculatorActive) { + enableScientificCalculator(); + } else { + disableScientificCalculator(); + } +}); + +function enableScientificCalculator() { + let rows = document.getElementsByClassName("row"); + for (let row = 0; row < rows.length; row++) { + let newHTML = getScientificButtons(row); + let existingHTML = rows[row].innerHTML; + rows[row].innerHTML = newHTML + existingHTML; + } +} + +function disableScientificCalculator() { + let scientificButtons = document.querySelectorAll(".scientific"); + console.log(scientificButtons); + for (let row = 0; row < scientificButtons.length; row++) { + scientificButtons[row].remove(); + } } function getScientificButtons(row) { switch(row) { case 0: return ` - - - + + + ` case 1: return ` - - - + + + ` case 2: return ` - - - + + + ` case 3: return ` - - - + + + ` case 4: return ` - - - + + + ` } } \ No newline at end of file From 970c369a62f44e725454cc19498edea204de1c09 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 21:10:23 -0500 Subject: [PATCH 21/59] Renamed Javascript file --- index.html | 2 +- scientific-calculator.js => scientific-calculator-enabler.js | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename scientific-calculator.js => scientific-calculator-enabler.js (100%) diff --git a/index.html b/index.html index cd2da1e..e1c5a4e 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@
- + \ No newline at end of file diff --git a/scientific-calculator.js b/scientific-calculator-enabler.js similarity index 100% rename from scientific-calculator.js rename to scientific-calculator-enabler.js From 908ca4ea64ba19ff5ac3667867bc291ff58bfd98 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 21:25:15 -0500 Subject: [PATCH 22/59] Add event listener for when user readjusts window size --- scientific-calculator-enabler.js | 9 +++++++-- styles.css | 9 +++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index ac33b55..85e34d7 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -1,6 +1,12 @@ let scientificCalculatorActive = false; -let tag = document.querySelector("a"); +window.addEventListener("resize", () => { + if (document.body.clientWidth < 800) { + console.log("now"); + } +}); + +let scientificButton = document.querySelector("a"); a.addEventListener("click", () => { scientificCalculatorActive = !scientificCalculatorActive; if (scientificCalculatorActive) { @@ -21,7 +27,6 @@ function enableScientificCalculator() { function disableScientificCalculator() { let scientificButtons = document.querySelectorAll(".scientific"); - console.log(scientificButtons); for (let row = 0; row < scientificButtons.length; row++) { scientificButtons[row].remove(); } diff --git a/styles.css b/styles.css index 477faeb..3059eef 100644 --- a/styles.css +++ b/styles.css @@ -35,8 +35,6 @@ a:visited { - - .calc-container { width: fit-content; padding: 0.5em 1em; @@ -88,3 +86,10 @@ button.btn-light-gray:hover { button.btn-blue:hover { background-color: rgb(77, 139, 241); } + + +@media (max-width: 1074px) { + .scientific { + display: none; +} +} From a3fd48c5cc49c33a72b47524736f2d93d3dd9597 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 22:02:02 -0500 Subject: [PATCH 23/59] Make it so scientific buttons move to bottom of calculator if the screen width is small --- index.html | 4 +- scientific-calculator-enabler.js | 154 ++++++++++++++++++++----------- styles.css | 6 +- 3 files changed, 105 insertions(+), 59 deletions(-) diff --git a/index.html b/index.html index e1c5a4e..7660de2 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,9 @@ -
+ + +
Standard diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index 85e34d7..d0d650d 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -1,68 +1,112 @@ let scientificCalculatorActive = false; +let scientificButton = document.querySelector("a"); -window.addEventListener("resize", () => { - if (document.body.clientWidth < 800) { - console.log("now"); +// Enable/disable Scientific Calculator +scientificButton.addEventListener("click", () => { + scientificCalculatorActive = !scientificCalculatorActive; + if (scientificCalculatorActive) { + addScientificButtonsToSide(); + } else { + removeScientificButtons(); } }); -let scientificButton = document.querySelector("a"); - a.addEventListener("click", () => { - scientificCalculatorActive = !scientificCalculatorActive; - if (scientificCalculatorActive) { - enableScientificCalculator(); +// Move scientific buttons to the left or bottom of the calculator depending on the screen's width. +window.addEventListener("resize", () => { + if (scientificCalculatorActive) { + if (document.body.clientWidth < 800) { + removeScientificButtons(); + addScientificButtonsToBottom(); } else { - disableScientificCalculator(); + removeScientificButtons(); + addScientificButtonsToSide(); } + } }); -function enableScientificCalculator() { - let rows = document.getElementsByClassName("row"); - for (let row = 0; row < rows.length; row++) { - let newHTML = getScientificButtons(row); - let existingHTML = rows[row].innerHTML; - rows[row].innerHTML = newHTML + existingHTML; - } -} - -function disableScientificCalculator() { +// All scientific buttons have the .scientific class. +function removeScientificButtons() { let scientificButtons = document.querySelectorAll(".scientific"); - for (let row = 0; row < scientificButtons.length; row++) { - scientificButtons[row].remove(); - } + for (let i = 0; i < scientificButtons.length; i++) { + scientificButtons[i].remove(); + } } -function getScientificButtons(row) { - switch(row) { - case 0: - return ` - - - - ` - case 1: - return ` - - - - ` - case 2: - return ` - - - - ` - case 3: - return ` - - - - ` - case 4: - return ` - - - - ` +// Creates 3 new buttons for every row +function addScientificButtonsToSide() { + let rows = document.getElementsByClassName("row"); + + if (rows.length > 4) { + console.warn("There were more rows detected than expected."); } -} \ No newline at end of file + + rows[0].innerHTML = + ` + + + + ` + rows[0].innerHTML; + + rows[1].innerHTML = + ` + + + + ` + rows[1].innerHTML; + + rows[2].innerHTML = + ` + + + + ` + rows[2].innerHTML; + + rows[3].innerHTML = + ` + + + + ` + rows[3].innerHTML; + rows[4].innerHTML = + ` + + + + ` + rows[4].innerHTML; +} + +// Creates 5 new rows and adds buttons to them. +function addScientificButtonsToBottom() { + let calcContainer = document.getElementById("calc-container"); + calcContainer.innerHTML += ` +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ `; +} diff --git a/styles.css b/styles.css index 3059eef..5729715 100644 --- a/styles.css +++ b/styles.css @@ -35,7 +35,7 @@ a:visited { -.calc-container { +#calc-container { width: fit-content; padding: 0.5em 1em; } @@ -86,10 +86,10 @@ button.btn-light-gray:hover { button.btn-blue:hover { background-color: rgb(77, 139, 241); } - +/* @media (max-width: 1074px) { .scientific { display: none; } -} +} */ From 09cca6d7676c8776f2253c74d56e8675e0b31acc Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 22:16:29 -0500 Subject: [PATCH 24/59] Make buttons responsive with CSS and Javascript --- index.html | 6 ++++-- scientific-calculator-enabler.js | 6 +++++- styles.css | 14 +++++--------- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 7660de2..fa3181d 100644 --- a/index.html +++ b/index.html @@ -18,13 +18,15 @@
-
+
Standard | Scientific
- +
+ +
diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index d0d650d..0c65781 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -5,7 +5,11 @@ let scientificButton = document.querySelector("a"); scientificButton.addEventListener("click", () => { scientificCalculatorActive = !scientificCalculatorActive; if (scientificCalculatorActive) { - addScientificButtonsToSide(); + if (document.body.clientWidth < 800) { + addScientificButtonsToBottom(); + } else { + addScientificButtonsToSide(); + } } else { removeScientificButtons(); } diff --git a/styles.css b/styles.css index 5729715..9b49d88 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ /**** Shared Styles ****/ -.margin { +.margin-3 { margin: 0.3em; } @@ -32,9 +32,6 @@ a:visited { color: purple; } - - - #calc-container { width: fit-content; padding: 0.5em 1em; @@ -86,10 +83,9 @@ button.btn-light-gray:hover { button.btn-blue:hover { background-color: rgb(77, 139, 241); } -/* -@media (max-width: 1074px) { - .scientific { - display: none; +@media (max-width: 630px) { + button { + width: 25%; + } } -} */ From e7fd69a0140f4d8c13dd45cfe470885e0948c9c5 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 22:20:15 -0500 Subject: [PATCH 25/59] Give Standard and Scientific buttons IDs --- index.html | 4 ++-- scientific-calculator-enabler.js | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index fa3181d..f4013cd 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,9 @@
- Standard + Standard | - Scientific + Scientific
diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index 0c65781..e5b6f3d 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -1,5 +1,6 @@ let scientificCalculatorActive = false; -let scientificButton = document.querySelector("a"); +let scientificButton = document.getElementById("scientific-button"); +let standardButton = document.getElementById("standard-button"); // Enable/disable Scientific Calculator scientificButton.addEventListener("click", () => { From 799691b7a6220dbba42b2609db6d24fe49235ddc Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 6 Nov 2020 22:41:52 -0500 Subject: [PATCH 26/59] Give event listeners to both buttons --- index.html | 2 +- scientific-calculator-enabler.js | 25 +++++++++++++++++-------- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index f4013cd..0c69c0c 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@
- Standard + Standard | Scientific
diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index e5b6f3d..ba55051 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -1,25 +1,32 @@ let scientificCalculatorActive = false; -let scientificButton = document.getElementById("scientific-button"); let standardButton = document.getElementById("standard-button"); +let scientificButton = document.getElementById("scientific-button"); + +standardButton.addEventListener("click", () => { + console.log("CALLED"); + console.log("Bool is " + scientificCalculatorActive); + if (scientificCalculatorActive) { + removeScientificButtons(); + scientificCalculatorActive = false; + } +}); // Enable/disable Scientific Calculator scientificButton.addEventListener("click", () => { - scientificCalculatorActive = !scientificCalculatorActive; - if (scientificCalculatorActive) { - if (document.body.clientWidth < 800) { + if (!scientificCalculatorActive) { + if (document.body.clientWidth < 1105) { addScientificButtonsToBottom(); } else { addScientificButtonsToSide(); } - } else { - removeScientificButtons(); + scientificCalculatorActive = true; } }); // Move scientific buttons to the left or bottom of the calculator depending on the screen's width. window.addEventListener("resize", () => { if (scientificCalculatorActive) { - if (document.body.clientWidth < 800) { + if (document.body.clientWidth < 1105) { removeScientificButtons(); addScientificButtonsToBottom(); } else { @@ -32,8 +39,10 @@ window.addEventListener("resize", () => { // All scientific buttons have the .scientific class. function removeScientificButtons() { let scientificButtons = document.querySelectorAll(".scientific"); + console.log("called"); for (let i = 0; i < scientificButtons.length; i++) { scientificButtons[i].remove(); + console.log("looping"); } } @@ -41,7 +50,7 @@ function removeScientificButtons() { function addScientificButtonsToSide() { let rows = document.getElementsByClassName("row"); - if (rows.length > 4) { + if (rows.length > 5) { console.warn("There were more rows detected than expected."); } From c16a902413a85ed23cb6dabb0464933d2f9e74c5 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 14:08:40 -0500 Subject: [PATCH 27/59] Clean up functions and comments --- index.html | 6 ++-- scientific-calculator-enabler.js | 58 ++++++++++++++++---------------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 0c69c0c..292a5ac 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,9 @@
- Standard + Standard | - Scientific + Scientific
@@ -61,7 +61,7 @@
- + \ No newline at end of file diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index ba55051..769d636 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -1,31 +1,33 @@ -let scientificCalculatorActive = false; -let standardButton = document.getElementById("standard-button"); -let scientificButton = document.getElementById("scientific-button"); +let scientificCalculatorEnabled = false; +let standardButton = document.getElementById("a-button"); +let scientificButton = document.getElementById("b-button"); +// Disable scientific buttons standardButton.addEventListener("click", () => { - console.log("CALLED"); - console.log("Bool is " + scientificCalculatorActive); - if (scientificCalculatorActive) { + console.log("Standard button click"); + if (scientificCalculatorEnabled) { removeScientificButtons(); - scientificCalculatorActive = false; + scientificCalculatorEnabled = false; } }); -// Enable/disable Scientific Calculator +// Enable scientific buttons scientificButton.addEventListener("click", () => { - if (!scientificCalculatorActive) { + console.log("Scientific button clicked"); + if (!scientificCalculatorEnabled) { if (document.body.clientWidth < 1105) { addScientificButtonsToBottom(); } else { addScientificButtonsToSide(); } - scientificCalculatorActive = true; + scientificCalculatorEnabled = true; } }); -// Move scientific buttons to the left or bottom of the calculator depending on the screen's width. +// Makes buttons responsive: +// Moves scientific buttons to the left or bottom of the calculator depending on the screen's width. window.addEventListener("resize", () => { - if (scientificCalculatorActive) { + if (scientificCalculatorEnabled) { if (document.body.clientWidth < 1105) { removeScientificButtons(); addScientificButtonsToBottom(); @@ -39,10 +41,8 @@ window.addEventListener("resize", () => { // All scientific buttons have the .scientific class. function removeScientificButtons() { let scientificButtons = document.querySelectorAll(".scientific"); - console.log("called"); for (let i = 0; i < scientificButtons.length; i++) { scientificButtons[i].remove(); - console.log("looping"); } } @@ -94,33 +94,33 @@ function addScientificButtonsToBottom() { let calcContainer = document.getElementById("calc-container"); calcContainer.innerHTML += `
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
`; } From 0021143c876691a847bae45b563b911070c4754f Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 14:40:52 -0500 Subject: [PATCH 28/59] Added scientific buttons to structure with a default of display: none --- index.html | 45 +++++++++++++++++++++++++++++++++++++++++++++ styles.css | 10 ++++++++++ 2 files changed, 55 insertions(+) diff --git a/index.html b/index.html index 292a5ac..ec3ef4c 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,9 @@
+ + + @@ -36,29 +39,71 @@
+ + +
+ + +
+ + +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
diff --git a/styles.css b/styles.css index 9b49d88..f40959b 100644 --- a/styles.css +++ b/styles.css @@ -84,6 +84,16 @@ button.btn-blue:hover { background-color: rgb(77, 139, 241); } +/* Hidden by default. Enabled by Javascript. */ +.scientific-btn-left { + display: none; +} + +/* Hidden by default. Enabled by Javascript. */ +.scientific-btn-bottom { + display: none; +} + @media (max-width: 630px) { button { width: 25%; From 4f17c2ddf70631dd543efa0ea01be6e37644d3ce Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 14:56:37 -0500 Subject: [PATCH 29/59] Set display to block with Javascript for some buttons --- index.html | 6 +- scientific-calculator-enabler.js | 136 +++++-------------------------- 2 files changed, 25 insertions(+), 117 deletions(-) diff --git a/index.html b/index.html index ec3ef4c..a945c02 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,9 @@
- Standard + Standard | - Scientific + Scientific
@@ -106,7 +106,7 @@
+ - \ No newline at end of file diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index 769d636..632c500 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -1,126 +1,34 @@ -let scientificCalculatorEnabled = false; -let standardButton = document.getElementById("a-button"); -let scientificButton = document.getElementById("b-button"); +let scientificButtonsEnabled = false; +let standardButton = document.getElementById("standard-button"); +let scientificButton = document.getElementById("scientific-button"); -// Disable scientific buttons standardButton.addEventListener("click", () => { - console.log("Standard button click"); - if (scientificCalculatorEnabled) { - removeScientificButtons(); - scientificCalculatorEnabled = false; - } + enableScientificButtons(); }); -// Enable scientific buttons scientificButton.addEventListener("click", () => { - console.log("Scientific button clicked"); - if (!scientificCalculatorEnabled) { - if (document.body.clientWidth < 1105) { - addScientificButtonsToBottom(); - } else { - addScientificButtonsToSide(); - } - scientificCalculatorEnabled = true; - } -}); - -// Makes buttons responsive: -// Moves scientific buttons to the left or bottom of the calculator depending on the screen's width. -window.addEventListener("resize", () => { - if (scientificCalculatorEnabled) { - if (document.body.clientWidth < 1105) { - removeScientificButtons(); - addScientificButtonsToBottom(); - } else { - removeScientificButtons(); - addScientificButtonsToSide(); - } - } + enableScientificButtons(); }); -// All scientific buttons have the .scientific class. -function removeScientificButtons() { - let scientificButtons = document.querySelectorAll(".scientific"); - for (let i = 0; i < scientificButtons.length; i++) { - scientificButtons[i].remove(); +function enableScientificButtons() { + position = getPositionToActivate(); + // if (position == "left") { + // let scientificBtnLeft = document.querySelectorAll("scientific-btn-left"); + // scientificBtnLeft.style.display = "block"; + // } else { + // let scientificBtnBottom = document.getElementsByClassName("scientific-btn-bottom"); + // scientificBtnBottom.style.display = "block"; + // } + let scientificBtnLeft = document.querySelectorAll(".scientific-btn-left"); + for (let i = 0; i < scientificBtnLeft.length; i++) { + scientificBtnLeft[i].style.display = "block"; } } -// Creates 3 new buttons for every row -function addScientificButtonsToSide() { - let rows = document.getElementsByClassName("row"); - - if (rows.length > 5) { - console.warn("There were more rows detected than expected."); +function getPositionToActivate() { + if (document.body.clientWidth < 1105) { + return "left"; + } else { + return "bottom"; } - - rows[0].innerHTML = - ` - - - - ` + rows[0].innerHTML; - - rows[1].innerHTML = - ` - - - - ` + rows[1].innerHTML; - - rows[2].innerHTML = - ` - - - - ` + rows[2].innerHTML; - - rows[3].innerHTML = - ` - - - - ` + rows[3].innerHTML; - rows[4].innerHTML = - ` - - - - ` + rows[4].innerHTML; -} - -// Creates 5 new rows and adds buttons to them. -function addScientificButtonsToBottom() { - let calcContainer = document.getElementById("calc-container"); - calcContainer.innerHTML += ` -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- `; } From 8028a0cb388e3cf71d49352a32735e3bb5bb037e Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 15:13:30 -0500 Subject: [PATCH 30/59] Enable and disable scientific buttons --- index.html | 30 +++++++++++++++--------------- scientific-calculator-enabler.js | 31 ++++++++++++++++--------------- 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index a945c02..0d826fd 100644 --- a/index.html +++ b/index.html @@ -76,33 +76,33 @@
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index 632c500..5d61b21 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -3,7 +3,7 @@ let standardButton = document.getElementById("standard-button"); let scientificButton = document.getElementById("scientific-button"); standardButton.addEventListener("click", () => { - enableScientificButtons(); + disableScientificButtons(); }); scientificButton.addEventListener("click", () => { @@ -11,24 +11,25 @@ scientificButton.addEventListener("click", () => { }); function enableScientificButtons() { - position = getPositionToActivate(); - // if (position == "left") { - // let scientificBtnLeft = document.querySelectorAll("scientific-btn-left"); - // scientificBtnLeft.style.display = "block"; - // } else { - // let scientificBtnBottom = document.getElementsByClassName("scientific-btn-bottom"); - // scientificBtnBottom.style.display = "block"; - // } - let scientificBtnLeft = document.querySelectorAll(".scientific-btn-left"); - for (let i = 0; i < scientificBtnLeft.length; i++) { - scientificBtnLeft[i].style.display = "block"; + let className = getClassToActivate(); + let scientificButtons = document.querySelectorAll(className); + for (let i = 0; i < scientificButtons.length; i++) { + scientificButtons[i].style.display = "block"; + } +} + +function disableScientificButtons() { + let className = getClassToActivate(); + let scientificButtons = document.querySelectorAll(className); + for (let i = 0; i < scientificButtons.length; i++) { + scientificButtons[i].style.display = "none"; } } -function getPositionToActivate() { +function getClassToActivate() { if (document.body.clientWidth < 1105) { - return "left"; + return ".scientific-btn-bottom"; } else { - return "bottom"; + return ".scientific-btn-left"; } } From c943a028fddfffc4d500aa61780ec1e3dcca948b Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 15:18:11 -0500 Subject: [PATCH 31/59] Combine enable and disable into one function, toggle --- scientific-calculator-enabler.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index 5d61b21..5b2fa8e 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -3,26 +3,19 @@ let standardButton = document.getElementById("standard-button"); let scientificButton = document.getElementById("scientific-button"); standardButton.addEventListener("click", () => { - disableScientificButtons(); + toggleScientificButtons(false); }); scientificButton.addEventListener("click", () => { - enableScientificButtons(); + toggleScientificButtons(true); }); -function enableScientificButtons() { +function toggleScientificButtons(enable) { let className = getClassToActivate(); let scientificButtons = document.querySelectorAll(className); + let displayProperty = getNewDisplayProperty(enable); for (let i = 0; i < scientificButtons.length; i++) { - scientificButtons[i].style.display = "block"; - } -} - -function disableScientificButtons() { - let className = getClassToActivate(); - let scientificButtons = document.querySelectorAll(className); - for (let i = 0; i < scientificButtons.length; i++) { - scientificButtons[i].style.display = "none"; + scientificButtons[i].style.display = displayProperty; } } @@ -33,3 +26,10 @@ function getClassToActivate() { return ".scientific-btn-left"; } } + +function getNewDisplayProperty(enable) { + if (enable) { + return "block"; + } + return "none"; +} From 1f0030d2b111529b4ea434cb7b2037f9719e878c Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 15:45:45 -0500 Subject: [PATCH 32/59] Make Scientific buttons responsive with Javascript. Add/remove correct buttons with click listener --- .vscode/launch.json | 15 ++++ scientific-calculator-enabler-old.js | 126 +++++++++++++++++++++++++++ scientific-calculator-enabler.js | 39 ++++++--- 3 files changed, 169 insertions(+), 11 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 scientific-calculator-enabler-old.js diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..a7557e4 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:5500", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/scientific-calculator-enabler-old.js b/scientific-calculator-enabler-old.js new file mode 100644 index 0000000..769d636 --- /dev/null +++ b/scientific-calculator-enabler-old.js @@ -0,0 +1,126 @@ +let scientificCalculatorEnabled = false; +let standardButton = document.getElementById("a-button"); +let scientificButton = document.getElementById("b-button"); + +// Disable scientific buttons +standardButton.addEventListener("click", () => { + console.log("Standard button click"); + if (scientificCalculatorEnabled) { + removeScientificButtons(); + scientificCalculatorEnabled = false; + } +}); + +// Enable scientific buttons +scientificButton.addEventListener("click", () => { + console.log("Scientific button clicked"); + if (!scientificCalculatorEnabled) { + if (document.body.clientWidth < 1105) { + addScientificButtonsToBottom(); + } else { + addScientificButtonsToSide(); + } + scientificCalculatorEnabled = true; + } +}); + +// Makes buttons responsive: +// Moves scientific buttons to the left or bottom of the calculator depending on the screen's width. +window.addEventListener("resize", () => { + if (scientificCalculatorEnabled) { + if (document.body.clientWidth < 1105) { + removeScientificButtons(); + addScientificButtonsToBottom(); + } else { + removeScientificButtons(); + addScientificButtonsToSide(); + } + } +}); + +// All scientific buttons have the .scientific class. +function removeScientificButtons() { + let scientificButtons = document.querySelectorAll(".scientific"); + for (let i = 0; i < scientificButtons.length; i++) { + scientificButtons[i].remove(); + } +} + +// Creates 3 new buttons for every row +function addScientificButtonsToSide() { + let rows = document.getElementsByClassName("row"); + + if (rows.length > 5) { + console.warn("There were more rows detected than expected."); + } + + rows[0].innerHTML = + ` + + + + ` + rows[0].innerHTML; + + rows[1].innerHTML = + ` + + + + ` + rows[1].innerHTML; + + rows[2].innerHTML = + ` + + + + ` + rows[2].innerHTML; + + rows[3].innerHTML = + ` + + + + ` + rows[3].innerHTML; + rows[4].innerHTML = + ` + + + + ` + rows[4].innerHTML; +} + +// Creates 5 new rows and adds buttons to them. +function addScientificButtonsToBottom() { + let calcContainer = document.getElementById("calc-container"); + calcContainer.innerHTML += ` +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ `; +} diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index 5b2fa8e..f679bc0 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -1,21 +1,34 @@ +// By default, scientific buttons have a class set to display: none. +// This script enables/disables them depending on the button pressed and the screen width. + let scientificButtonsEnabled = false; -let standardButton = document.getElementById("standard-button"); let scientificButton = document.getElementById("scientific-button"); +let standardButton = document.getElementById("standard-button"); + +scientificButton.addEventListener("click", () => { + enableScientificButtons(); + scientificButtonsEnabled = true; +}); standardButton.addEventListener("click", () => { - toggleScientificButtons(false); + disableScientificButtons(); + scientificButtonsEnabled = false; }); -scientificButton.addEventListener("click", () => { - toggleScientificButtons(true); +// Responsive: Moves buttons to the left or bottom of calculator depending on screen width. +window.addEventListener("resize", () => { + if (scientificButtonsEnabled) { + enableScientificButtons(); + } }); -function toggleScientificButtons(enable) { +// Enables buttons on the left or bottom depending on screen width. +function enableScientificButtons() { + disableScientificButtons(); // Edge Case: Disable any existing buttons so left and bottom buttons are never active at the same time. let className = getClassToActivate(); let scientificButtons = document.querySelectorAll(className); - let displayProperty = getNewDisplayProperty(enable); for (let i = 0; i < scientificButtons.length; i++) { - scientificButtons[i].style.display = displayProperty; + scientificButtons[i].style.display = "block"; } } @@ -27,9 +40,13 @@ function getClassToActivate() { } } -function getNewDisplayProperty(enable) { - if (enable) { - return "block"; +function disableScientificButtons() { + setDisplayToNone(document.querySelectorAll(".scientific-btn-left")); + setDisplayToNone(document.querySelectorAll(".scientific-btn-bottom")); +} + +function setDisplayToNone(buttons) { + for (let i = 0; i < buttons.length; i++) { + buttons[i].style.display = "none"; } - return "none"; } From f6e0a201b028d3af4a873bf811b3e910537a6503 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 15:46:27 -0500 Subject: [PATCH 33/59] Remove deprecated script --- scientific-calculator-enabler-old.js | 126 --------------------------- 1 file changed, 126 deletions(-) delete mode 100644 scientific-calculator-enabler-old.js diff --git a/scientific-calculator-enabler-old.js b/scientific-calculator-enabler-old.js deleted file mode 100644 index 769d636..0000000 --- a/scientific-calculator-enabler-old.js +++ /dev/null @@ -1,126 +0,0 @@ -let scientificCalculatorEnabled = false; -let standardButton = document.getElementById("a-button"); -let scientificButton = document.getElementById("b-button"); - -// Disable scientific buttons -standardButton.addEventListener("click", () => { - console.log("Standard button click"); - if (scientificCalculatorEnabled) { - removeScientificButtons(); - scientificCalculatorEnabled = false; - } -}); - -// Enable scientific buttons -scientificButton.addEventListener("click", () => { - console.log("Scientific button clicked"); - if (!scientificCalculatorEnabled) { - if (document.body.clientWidth < 1105) { - addScientificButtonsToBottom(); - } else { - addScientificButtonsToSide(); - } - scientificCalculatorEnabled = true; - } -}); - -// Makes buttons responsive: -// Moves scientific buttons to the left or bottom of the calculator depending on the screen's width. -window.addEventListener("resize", () => { - if (scientificCalculatorEnabled) { - if (document.body.clientWidth < 1105) { - removeScientificButtons(); - addScientificButtonsToBottom(); - } else { - removeScientificButtons(); - addScientificButtonsToSide(); - } - } -}); - -// All scientific buttons have the .scientific class. -function removeScientificButtons() { - let scientificButtons = document.querySelectorAll(".scientific"); - for (let i = 0; i < scientificButtons.length; i++) { - scientificButtons[i].remove(); - } -} - -// Creates 3 new buttons for every row -function addScientificButtonsToSide() { - let rows = document.getElementsByClassName("row"); - - if (rows.length > 5) { - console.warn("There were more rows detected than expected."); - } - - rows[0].innerHTML = - ` - - - - ` + rows[0].innerHTML; - - rows[1].innerHTML = - ` - - - - ` + rows[1].innerHTML; - - rows[2].innerHTML = - ` - - - - ` + rows[2].innerHTML; - - rows[3].innerHTML = - ` - - - - ` + rows[3].innerHTML; - rows[4].innerHTML = - ` - - - - ` + rows[4].innerHTML; -} - -// Creates 5 new rows and adds buttons to them. -function addScientificButtonsToBottom() { - let calcContainer = document.getElementById("calc-container"); - calcContainer.innerHTML += ` -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- `; -} From 472dc912e8ff3916fa19ca55b469a67dadbc58fe Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 15:48:28 -0500 Subject: [PATCH 34/59] Set input field's width to 100% --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index f40959b..e4b5d05 100644 --- a/styles.css +++ b/styles.css @@ -45,7 +45,7 @@ a:visited { input { margin: 0.6rem 0.3rem; padding: 0 1.3rem; - width: 90.7%; + width: 100%; height: 1.7em; font-size: 40px; text-align: right; From a2419628e492c12adb9c346852558692a1439e68 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 15:55:52 -0500 Subject: [PATCH 35/59] Set correct color for scientific buttons --- index.html | 60 +++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 0d826fd..ff092f9 100644 --- a/index.html +++ b/index.html @@ -29,9 +29,9 @@
- - - + + + @@ -39,36 +39,36 @@
- - - + + +
- - - + + +
- - - + + +
- - - + + + @@ -76,33 +76,33 @@
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
From 926601f625853565925c15d5463168dbe076ab9f Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 16:09:00 -0500 Subject: [PATCH 36/59] Create two classes for Rad and Deg buttons --- index.html | 4 ++-- scientific-calculator-enabler.js | 4 +++- styles.css | 12 ++++++++++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index ff092f9..3e3dbab 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,8 @@
- - + + diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js index f679bc0..ab55b2b 100644 --- a/scientific-calculator-enabler.js +++ b/scientific-calculator-enabler.js @@ -1,7 +1,9 @@ // By default, scientific buttons have a class set to display: none. // This script enables/disables them depending on the button pressed and the screen width. -let scientificButtonsEnabled = false; +//let scientificButtonsEnabled = false; +let scientificButtonsEnabled = true; +enableScientificButtons(); let scientificButton = document.getElementById("scientific-button"); let standardButton = document.getElementById("standard-button"); diff --git a/styles.css b/styles.css index e4b5d05..9733411 100644 --- a/styles.css +++ b/styles.css @@ -62,6 +62,18 @@ button { background-color: rgb(223, 225, 229); } +.rad-button { + margin-right: 0; + border-radius: 10px 0 0 10px; + border-right: 1px solid black; +} + +.deg-button { + margin-left: 0; + border-radius: 0 10px 10px 0; + border-left: 1px solid black; +} + .btn-light-gray { background-color: rgb(241, 243, 244); } From 471006081eef6023310235a6ba1bf1ffbb74cb1b Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 16:31:03 -0500 Subject: [PATCH 37/59] Combine Rad and Deg into one button --- index.html | 9 +++++++-- styles.css | 16 ++++++---------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 3e3dbab..281f18a 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,13 @@
- - +
+ +
diff --git a/styles.css b/styles.css index 9733411..8975a46 100644 --- a/styles.css +++ b/styles.css @@ -62,16 +62,12 @@ button { background-color: rgb(223, 225, 229); } -.rad-button { - margin-right: 0; - border-radius: 10px 0 0 10px; - border-right: 1px solid black; -} - -.deg-button { - margin-left: 0; - border-radius: 0 10px 10px 0; - border-left: 1px solid black; +.rad-deg-button { + display: flex; + justify-content: space-around; + align-items: center; + width: 14.5em; + padding: 0 1.2em; } .btn-light-gray { From c10a738ac807b2ffba3c7cbaeed1b9095dc4c3eb Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 16:39:05 -0500 Subject: [PATCH 38/59] Add color to Rad | Deg button --- styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles.css b/styles.css index 8975a46..007c004 100644 --- a/styles.css +++ b/styles.css @@ -68,6 +68,11 @@ button { align-items: center; width: 14.5em; padding: 0 1.2em; + color: rgb(140, 142, 145); +} + +.rad-deg-button :first-child { + color: black; } .btn-light-gray { From 451dd86a295489eb27f345dc42679042f2001ca0 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 17:09:48 -0500 Subject: [PATCH 39/59] Make Rad | Deg button work when buttons are at bottom of calculator --- index.html | 9 ++++++--- styles.css | 9 +++++---- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 281f18a..16f2160 100644 --- a/index.html +++ b/index.html @@ -80,9 +80,12 @@
-
- - +
+
diff --git a/styles.css b/styles.css index 007c004..d5b0a60 100644 --- a/styles.css +++ b/styles.css @@ -63,14 +63,15 @@ button { } .rad-deg-button { - display: flex; - justify-content: space-around; - align-items: center; - width: 14.5em; + width: 14.8em; padding: 0 1.2em; color: rgb(140, 142, 145); } +.rad-deg-button > * { + padding: 1.2em; +} + .rad-deg-button :first-child { color: black; } From 3c57b45c054a15942566734e2383935778450c72 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 9 Nov 2020 17:13:45 -0500 Subject: [PATCH 40/59] Make Rad | Deg button responsive --- styles.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/styles.css b/styles.css index d5b0a60..8014115 100644 --- a/styles.css +++ b/styles.css @@ -112,4 +112,12 @@ button.btn-blue:hover { button { width: 25%; } + + .rad-deg-button { + width: 53%; + } + + .rad-deg-button > * { + padding: 0.8rem; + } } From c055e39589e0f17cb4719e0da5b23565508a916a Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 16 Nov 2020 17:10:50 -0500 Subject: [PATCH 41/59] Fix padding for Rad and Deg button when window width is small --- .vscode/settings.json | 3 +++ styles.css | 1 - 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json 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/styles.css b/styles.css index 8014115..c3f56da 100644 --- a/styles.css +++ b/styles.css @@ -64,7 +64,6 @@ button { .rad-deg-button { width: 14.8em; - padding: 0 1.2em; color: rgb(140, 142, 145); } From c9c2f2dccc82b4b17285e9b87ac20e03a188ede0 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 16 Nov 2020 17:18:09 -0500 Subject: [PATCH 42/59] Replace button text with HTML Unicode symbols --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 16f2160..79ae5f6 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@
- + @@ -64,7 +64,7 @@
- + @@ -73,7 +73,7 @@
- + @@ -96,7 +96,7 @@
- +
@@ -104,13 +104,13 @@
- +
- +
From faf5c42b1493643937573432c51bf6f8f6b10a3a Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 16 Nov 2020 17:41:09 -0500 Subject: [PATCH 43/59] Change font size of symbols. Set buttons to use rem padding instead of em --- index.html | 10 +++++----- styles.css | 27 +++++++++++++++++++-------- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 79ae5f6..bfa6533 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@ - +
@@ -59,7 +59,7 @@ - +
@@ -68,7 +68,7 @@ - +
@@ -77,10 +77,10 @@ - +
-
+
-
- +
+ @@ -52,7 +52,7 @@
-
+
@@ -61,7 +61,7 @@
-
+
@@ -70,7 +70,7 @@
-
+
diff --git a/styles.css b/styles.css index 9a22b8a..6bb0ef3 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,9 @@ /**** Shared Styles ****/ +.row { + display: flex; +} + .margin-3 { margin: 0.3rem; } @@ -43,9 +47,11 @@ a:visited { } input { - margin: 0.6rem 0.3rem; + /* margin: 0.6rem 0.3rem; */ + margin: 0.3rem; padding: 0 1.3rem; width: 100%; + /* width: 80%; */ height: 1.7em; font-size: 40px; text-align: right; @@ -110,10 +116,10 @@ button.btn-blue:hover { /* Hidden by default. Enabled by Javascript. */ .scientific-btn-bottom { display: none; - margin-left: 1.5rem; + /* margin-left: 1.5rem; */ } -@media (max-width: 630px) { +/* @media (max-width: 630px) { button { width: 25%; } @@ -130,4 +136,4 @@ button.btn-blue:hover { .rad-deg-button > * { padding: 0.6rem; } -} +} */ From efa6f7327df89b28209f41937191b500585e0791 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 16 Nov 2020 18:42:13 -0500 Subject: [PATCH 47/59] Fix width for everything except input box --- styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index 6bb0ef3..a835038 100644 --- a/styles.css +++ b/styles.css @@ -37,7 +37,7 @@ a:visited { } #calc-container { - width: fit-content; + /* width: fit-content; */ padding: 0.5rem 1rem; } @@ -49,9 +49,9 @@ a:visited { input { /* margin: 0.6rem 0.3rem; */ margin: 0.3rem; - padding: 0 1.3rem; - width: 100%; - /* width: 80%; */ + /* padding: 0 1.3rem; */ + /* width: 100%; */ + width: 95%; height: 1.7em; font-size: 40px; text-align: right; From 6e0d054e89b44b122034893d1eb501397277bdb7 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Mon, 16 Nov 2020 20:48:50 -0500 Subject: [PATCH 48/59] Use media queries to change input width --- index.html | 6 ++---- styles.css | 26 +++++++++++++++++++++++--- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 5b84965..49546a5 100644 --- a/index.html +++ b/index.html @@ -24,11 +24,9 @@ Scientific
-
- -
+ -
+