Add files via upload

alvitodev · Dec 21, 2023 · 11203d2 · 11203d2
1 parent f435f76
commit 11203d2
Show file tree

Hide file tree

Showing 9 changed files with 371 additions and 1 deletion.
diff --git a/app/calculator/assets/GitHubDark.svg b/app/calculator/assets/GitHubDark.svg
diff --git a/app/calculator/assets/GitHubLight.svg b/app/calculator/assets/GitHubLight.svg
diff --git a/app/calculator/assets/MoonIcon.svg b/app/calculator/assets/MoonIcon.svg
diff --git a/app/calculator/assets/SunIcon.svg b/app/calculator/assets/SunIcon.svg
diff --git a/app/calculator/assets/calculator.ico b/app/calculator/assets/calculator.ico
diff --git a/app/calculator/index.html b/app/calculator/index.html
@@ -1 +1,63 @@
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>Calculator</title>
+  <meta name="description" content="Simple Calculator With Dark Mode." />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/x-icon" href="assets/calculator.ico">
+  <link rel="stylesheet" href="styles/dark.css" id="theme" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div class="wrapper">
+    <div class="container">
+      <div class="header-container">
+        <!-- This heading also notifies about the theme change.-->
+        <h1 id="toast">Calculator</h1>
+        <div class="top-buttons">
+          <button type="button" onclick="changeTheme()" class="theme-button">
+            <img src="assets/SunIcon.svg" alt="Theme Icon" height="19" width="19" id="theme-icon">
+          </button>
+        </div>
+      </div>
+      <div class="first-row">
+        <input type="text" name="result" id="result" placeholder="Result" readonly />
+        <input type="button" value="C" onclick="result.value=''" id="clear-button" />
+      </div>
+      <div class="second-row">
+        <input type="button" value="1" onclick="liveScreen(1)" />
+        <input type="button" value="2" onclick="liveScreen(2)" />
+        <input type="button" value="3" onclick="liveScreen(3)" />
+        <input type="button" value="+" onclick="liveScreen('+')" />
+      </div>
+      <div class="third-row">
+        <input type="button" value="4" onclick=" liveScreen(4)" />
+        <input type="button" value="5" onclick=" liveScreen(5)" />
+        <input type="button" value="6" onclick=" liveScreen(6)" />
+        <input type="button" value="-" onclick="liveScreen('-')" />
+      </div>
+      <div class="fourth-row">
+        <input type="button" value="7" onclick="liveScreen(7)" />
+        <input type="button" value="8" onclick="liveScreen(8)" />
+        <input type="button" value="9" onclick=" liveScreen(9)" />
+        <input type="button" value="x" onclick="liveScreen('*')" />
+      </div>
+      <div class="fifth-row">
+        <input type="button" value="/" onclick="liveScreen('/')" />
+        <input type="button" value="0" onclick="liveScreen(0)" />
+        <input type="button" value="." onclick="liveScreen('.')" />
+        <input type="button" value="=" onclick="calculate(result.value)" />
+      </div>
+    </div>
+  </div>
+  <script src="scripts/script.js">
+  </script>
+</body>
+
+</html>
diff --git a/app/calculator/scripts/script.js b/app/calculator/scripts/script.js
@@ -0,0 +1,101 @@
+const lightTheme = "styles/light.css";
+const darkTheme = "styles/dark.css";
+const sunIcon = "assets/SunIcon.svg";
+const moonIcon = "assets/MoonIcon.svg";
+const themeIcon = document.getElementById("theme-icon");
+const res = document.getElementById("result");
+const toast = document.getElementById("toast");
+
+function calculate(value) {
+  // write your code here
+  console.log(value)
+}
+
+// Swaps the stylesheet to achieve dark mode.
+function changeTheme() {
+  const theme = document.getElementById("theme");
+  setTimeout(() => {
+    toast.innerHTML = "Calculator";
+  }, 1500);
+  if (theme.getAttribute("href") === lightTheme) {
+    theme.setAttribute("href", darkTheme);
+    themeIcon.setAttribute("src", sunIcon);
+    toast.innerHTML = "Dark Mode 🌙";
+  } else {
+    theme.setAttribute("href", lightTheme);
+    themeIcon.setAttribute("src", moonIcon);
+    toast.innerHTML = "Light Mode ☀️";
+  }
+}
+
+// Displays entered value on screen.
+function liveScreen(enteredValue) {
+  if (!res.value) {
+    res.value = "";
+  }
+  res.value += enteredValue;
+}
+
+//adding event handler on the document to handle keyboard inputs
+document.addEventListener("keydown", keyboardInputHandler);
+
+//function to handle keyboard inputs
+function keyboardInputHandler(e) {
+  // to fix the default behavior of browser,
+  // enter and backspace were causing undesired behavior when some key was already in focus.
+  e.preventDefault();
+  //grabbing the liveScreen
+
+  //numbers
+  if (e.key === "0") {
+    res.value += "0";
+  } else if (e.key === "1") {
+    res.value += "1";
+  } else if (e.key === "2") {
+    res.value += "2";
+  } else if (e.key === "3") {
+    res.value += "3";
+  } else if (e.key === "4") {
+    res.value += "4";
+  } else if (e.key === "5") {
+    res.value += "5";
+  } else if (e.key === "6") {
+    res.value += "6";
+  } else if (e.key === "7") {
+    res.value += "7";
+  } else if (e.key === "7") {
+    res.value += "7";
+  } else if (e.key === "8") {
+    res.value += "8";
+  } else if (e.key === "9") {
+    res.value += "9";
+  }
+
+  //operators
+  if (e.key === "+") {
+    res.value += "+";
+  } else if (e.key === "-") {
+    res.value += "-";
+  } else if (e.key === "*") {
+    res.value += "*";
+  } else if (e.key === "/") {
+    res.value += "/";
+  }
+
+  //decimal key
+  if (e.key === ".") {
+    res.value += ".";
+  }
+
+  //press enter to see result
+  if (e.key === "Enter") {
+    calculate(result.value);
+  }
+
+  //backspace for removing the last input
+  if (e.key === "Backspace") {
+    const resultInput = res.value;
+    //remove the last element in the string
+    res.value = resultInput.substring(0, res.value.length - 1);
+  }
+}
diff --git a/app/calculator/styles/dark.css b/app/calculator/styles/dark.css
@@ -0,0 +1,100 @@
+/* CSS Reset & Global Styles */
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans';
+  -webkit-appearance: none;
+}
+
+::placeholder {
+  color: rgb(221, 221, 221);
+}
+
+.wrapper {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  background-color: rgb(20, 19, 19);
+  transition: 0.8s all;
+}
+
+h1 {
+  margin-bottom: 1.5%;
+  color: #fff;
+  font-weight: normal;
+}
+
+.container {
+  width: 350px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 80%;
+}
+
+.top-buttons {
+  display: flex;
+  align-items: center;
+
+}
+
+input {
+  padding: 25px;
+  color: rgb(255, 255, 255);
+  font-size: 1em;
+  cursor: pointer;
+  width: 70px;
+  background-color: rgb(47, 51, 50);
+  border: none;
+  outline: none;
+  border-radius: 100px;
+  margin: 0.2em;
+}
+
+.first-row,
+.second-row,
+.third-row,
+.fourth-row,
+.fifth-row {
+  margin-bottom: 4px;
+}
+
+input[type="text"] {
+  background-color: rgb(47, 51, 50);
+  width: 222.5px;
+}
+
+input[type="button"]:hover {
+  background-color: rgb(101, 101, 101);
+  color: #fff;
+}
+
+#clear-button {
+  color: #fff;
+  background-color: rgb(255, 42, 42);
+}
+
+a {
+  text-decoration: none;
+  color: #fff;
+}
+
+#github-icon {
+  margin-right: 10px;
+}
+
+.theme-button {
+  all: unset;
+  cursor: pointer;
+}
diff --git a/app/calculator/styles/light.css b/app/calculator/styles/light.css
@@ -0,0 +1,99 @@
+/* CSS Reset & Global Styles */
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans';
+  -webkit-appearance: none;
+}
+
+.wrapper {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  background-color: rgb(7, 210, 199);
+  transition: 0.8s all;
+}
+
+h1 {
+  margin-bottom: 1.5%;
+  color: #fff;
+  font-weight: normal;
+}
+
+.container {
+  width: 350px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 80%;
+}
+
+.top-buttons {
+  display: flex;
+  align-items: center;
+}
+
+input {
+  padding: 25px;
+  color: rgb(87, 87, 87);
+  font-size: 1em;
+  cursor: pointer;
+  width: 70px;
+  background-color: #fff;
+  border: none;
+  outline: none;
+  border-radius: 100px;
+  margin: 0.2em;
+}
+
+.first-row,
+.second-row,
+.third-row,
+.fourth-row,
+.fifth-row {
+  margin-bottom: 4px;
+}
+
+input[type="button"] {
+  color: rgb(122, 122, 122);
+}
+
+input[type="text"] {
+  background-color: rgb(255, 255, 255);
+  width: 222.5px;
+}
+
+input[type="button"]:hover {
+  background-color: rgb(37, 35, 59);
+  color: #fff;
+}
+
+#clear-button {
+  color: #fff;
+  background-color: rgb(255, 25, 25);
+}
+
+a {
+  text-decoration: none;
+  color: #fff;
+}
+
+#github-icon {
+  margin-right: 10px;
+}
+
+.theme-button {
+  all: unset;
+  cursor: pointer;
+}