diff --git a/Calculator/README.md b/Calculator/README.md
new file mode 100644
index 0000000..f91569a
--- /dev/null
+++ b/Calculator/README.md
@@ -0,0 +1,8 @@
+# Calculator
+
+A simple Calculator App built with HTML, CSS, and JavaScript. It also has a Dark Mode.
+
+
+
+* Favicon from:
+Freepik - Flaticon
diff --git a/Calculator/assets/GitHubDark.svg b/Calculator/assets/GitHubDark.svg
new file mode 100644
index 0000000..4d89c59
--- /dev/null
+++ b/Calculator/assets/GitHubDark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Calculator/assets/GitHubLight.svg b/Calculator/assets/GitHubLight.svg
new file mode 100644
index 0000000..675f99a
--- /dev/null
+++ b/Calculator/assets/GitHubLight.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Calculator/assets/MoonIcon.svg b/Calculator/assets/MoonIcon.svg
new file mode 100644
index 0000000..e7adf26
--- /dev/null
+++ b/Calculator/assets/MoonIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/Calculator/assets/SunIcon.svg b/Calculator/assets/SunIcon.svg
new file mode 100644
index 0000000..b23616b
--- /dev/null
+++ b/Calculator/assets/SunIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/Calculator/assets/calculator.ico b/Calculator/assets/calculator.ico
new file mode 100644
index 0000000..cf1e147
Binary files /dev/null and b/Calculator/assets/calculator.ico differ
diff --git a/Calculator/index.html b/Calculator/index.html
new file mode 100644
index 0000000..6088c85
--- /dev/null
+++ b/Calculator/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Calculator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Calculator/scripts/script.js b/Calculator/scripts/script.js
new file mode 100644
index 0000000..6793119
--- /dev/null
+++ b/Calculator/scripts/script.js
@@ -0,0 +1,108 @@
+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) {
+ const calculatedValue = eval(value || null);
+ if (isNaN(calculatedValue)) {
+ res.value = "Can't divide 0 with 0";
+ setTimeout(() => {
+ res.value = "";
+ }, 1300);
+ } else {
+ res.value = calculatedValue;
+ }
+}
+
+// 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/Calculator/styles/dark.css b/Calculator/styles/dark.css
new file mode 100644
index 0000000..0fe1e6d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/Calculator/styles/light.css b/Calculator/styles/light.css
new file mode 100644
index 0000000..218ca85
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
+