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/.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 new file mode 100644 index 0000000..49546a5 --- /dev/null +++ b/index.html @@ -0,0 +1,118 @@ + + + + + + + + + + Calculator + + + + + + + + +
+ +
+ Standard + | + Scientific +
+ + + +
+
+ +
+ + + + + +
+ +
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+ + + + + \ No newline at end of file diff --git a/scientific-calculator-enabler.js b/scientific-calculator-enabler.js new file mode 100644 index 0000000..21f499b --- /dev/null +++ b/scientific-calculator-enabler.js @@ -0,0 +1,63 @@ +// 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"); + +standardButton.addEventListener("click", () => { + disableScientificButtons(); + setActiveButtonColor(standardButton, scientificButton); + scientificButtonsEnabled = false; +}); + +scientificButton.addEventListener("click", () => { + enableScientificButtons(); + setActiveButtonColor(scientificButton, standardButton); + scientificButtonsEnabled = true; +}); + +// Responsive: Moves buttons to the left or bottom of calculator depending on screen width. +window.addEventListener("resize", () => { + if (scientificButtonsEnabled) { + enableScientificButtons(); + } +}); + +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"; + } +} + +// 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); + for (let i = 0; i < scientificButtons.length; i++) { + scientificButtons[i].style.display = "block"; + } +} + +function getClassToActivate() { + if (document.body.clientWidth < 1105) { + return ".scientific-btn-bottom"; + } else { + return ".scientific-btn-left"; + } +} + +// According to the mockup, the active button is blue with an underline and the deactive button is black. +function setActiveButtonColor(activeButton, disactiveButton) { + activeButton.style.color = "blue"; + activeButton.style["text-decoration"] = "underline"; + + disactiveButton.style.color = "black"; + disactiveButton.style["text-decoration"] = "none"; +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..71390ba --- /dev/null +++ b/styles.css @@ -0,0 +1,172 @@ +/**** Shared Styles ****/ + +.margin-3 { + margin: 0.3rem; +} + +.d-flex { + display: flex; +} + +.justify-center { + justify-content: center; +} + +.border { + border: 1px solid rgb(223, 225, 229); +} + +.squircle { + border-radius: 10px; +} + +/* a { + color: blue; +} + +a:hover { + color: teal; +} + +a:visited { + color: purple; +} */ + +#standard-button { + color: blue; + text-decoration: underline; +} + +#standard-button:hover { + color: rgb(197, 197, 0) !important; + cursor: pointer; +} + +#scientific-button { + color: black; +} + +#scientific-button:hover { + color: rgb(197, 197, 0) !important; + cursor: pointer; +} + +#calc-container { + width: fit-content; + padding: 1rem; +} + +.url-row > * { + margin-right: 10px; + font-size: 19px; +} + +.row { + display: flex; +} + +input { + margin: 0.7rem 0.3rem; + width: 94%; + height: 1.7em; + font-size: 40px; + text-align: right; +} + +button { + border-radius: 10px; + background-color: rgb(247, 140, 140); + border: none; + outline: none; + font-size: 19px; + width: 7rem; + height: 3rem; + margin: 0.3rem; + background-color: rgb(223, 225, 229); +} + +/* Sometimes the HTML unicode size is small. This makes it larger */ +.button-symbols { + font-size: 24px; +} + +.rad-deg-button { + width: 14.6rem; + color: rgb(140, 142, 145); +} + +.rad-deg-button > * { + padding: 1.2rem; +} + +.rad-deg-button :first-child { + color: black; +} + +.btn-light-gray { + background-color: rgb(241, 243, 244); +} + +.btn-blue { + background-color: rgb(66, 133, 244); + 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); +} + +/* Hidden by default. Enabled by Javascript. */ +.scientific-btn-left { + display: none; +} + +/* Hidden by default. Enabled by Javascript. */ +.scientific-btn-bottom { + display: none; +} + +@media (min-width: 1105px) { + input { + width: 98.7%; + } +} + +@media (max-width: 1120px) { + .rad-deg-button { + width: 15rem; + } +} + +@media (max-width: 542px) { + input { + width: 97%; + margin-right: 0; + padding-right: 0; + } + + button { + width: 25%; + } + + .scientific-btn-bottom { + margin-left: 0; + } + + .rad-deg-button { + width: 53%; + } + + .rad-deg-button > * { + padding: 0.6rem; + } +}