code-differently · michael-mcmasters · Nov 6, 2020 · Nov 6, 2020 · Nov 6, 2020 · Nov 6, 2020
diff --git a/.vscode/launch.json 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}"
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <Link rel="stylesheet" href="./styles.css">
+
+    <title>Calculator</title>
+</head>
+
+
+<body class="d-flex justify-center">
+
+
+
+
+    <div id="calc-container" class="border squircle">
+
+        <div class="url-row d-flex margin-3">
+            <a id="standard-button">Standard</a>
+            <span>|</span>
+            <a id="scientific-button">Scientific</a>
+        </div>
+
+        <input type="text" class="border squircle">
+
+        <div class="row">
+            <div class="scientific-btn-left">
+                <button class="rad-deg-button">
+                    <span>Rad</span>
+                    <span>|</span>
+                    <span>Deg</span>
+                </button>
+            </div>
+            <button class="scientific-btn-left">x!</button>
+            <button>(</button>
+            <button>)</button>
+            <button>%</button>
+            <button>AC</button>
+        </div>
+
+        <div class="row">
+            <button class="scientific-btn-left btn-light-gray">Inv</button>
+            <button class="scientific-btn-left">sin</button>
+            <button class="scientific-btn-left">In</button>
+            <button class="btn-light-gray">7</button>
+            <button class="btn-light-gray">8</button>
+            <button class="btn-light-gray">9</button>
+            <button class="button-symbols">&divide;</button>
+        </div>
+        <div class="row ">
+            <button class="scientific-btn-left">&#960;</button>
+            <button class="scientific-btn-left">cos</button>
+            <button class="scientific-btn-left">log</button>
+            <button class="btn-light-gray">4</button>
+            <button class="btn-light-gray">5</button>
+            <button class="btn-light-gray">6</button>
+            <button class="button-symbols">&times;</button>
+        </div>
+        <div class="row ">
+            <button class="scientific-btn-left">e</button>
+            <button class="scientific-btn-left">tan</button>
+            <button class="scientific-btn-left">&#10003</button>
+            <button class="btn-light-gray">1</button>
+            <button class="btn-light-gray">2</button>
+            <button class="btn-light-gray">3</button>
+            <button class="button-symbols">&minus;</button>
+        </div>
+        <div class="row ">
+            <button class="scientific-btn-left">Ans</button>
+            <button class="scientific-btn-left">EXP</button>
+            <button class="scientific-btn-left">X<sup>y</sup></button>
+            <button class="btn-light-gray">0</button>
+            <button class="btn-light-gray" style="font-weight: bold;">.</button>
+            <button class="btn-blue">=</button>
+            <button class="button-symbols">&plus;</button>
+        </div>
+
+        <div class="scientific-btn-bottom">
+            <button class="rad-deg-button">
+                <span>Rad</span>
+                <span>|</span>
+                <span>Deg</span>
+            </button>
+            <button>x!</button>
+        </div>
+
+        <div class="scientific-btn-bottom">
+            <button>Inv</button>
+            <button>sin</button>
+            <button>In</button>
+        </div>
+
+        <div class="scientific-btn-bottom">
+            <button>&#960;</button>
+            <button>cos</button>
+            <button>log</button>
+        </div>
+
+        <div class="scientific-btn-bottom">
+            <button>e</button>
+            <button>tan</button>
+            <button>&#10003</button>
+        </div>
+
+        <div class="scientific-btn-bottom">
+            <button>Ans</button>
+            <button>EXP</button>
+            <button>X<sup>y</sup></button>
+        </div>
+    </div>
+
+    <script src="scientific-calculator-enabler.js"></script>
+</body>
+
+</html>
diff --git a/scientific-calculator-enabler.js 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
@@ -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;
+  }
+}