diff --git a/app.js b/app.js
new file mode 100644
index 00000000..76f24bfa
--- /dev/null
+++ b/app.js
@@ -0,0 +1,100 @@
+const numbers = [...document.querySelectorAll(".number")];
+const operators = [...document.querySelectorAll(".operation")];
+const clearBtn = document.querySelector(".clear");
+const equalsBtn = document.querySelector(".equals");
+
+const OPERATOR_MAP = {
+ "+": "sum",
+ "-": "sub",
+ "×": "mult",
+ "÷": "divide",
+};
+
+const calculator = {
+ display: document.querySelector(".display"),
+ displayValue: "0",
+ enteredValues: [],
+ operator: "",
+
+ renderValue() {
+ this.display.innerText = this.displayValue;
+ },
+
+ clickNumber(n) {
+ if (this.displayValue === "0") {
+ this.displayValue = "";
+ }
+ this.displayValue += n.toString();
+ this.renderValue();
+ },
+
+ clear() {
+ this.displayValue = "0";
+ this.enteredValues = [];
+ this.operator = "";
+ this.renderValue();
+ },
+
+ calculate(a, b, op) {
+ let result;
+ switch (op) {
+ case "sum":
+ result = a + b;
+ break;
+ case "sub":
+ result = a - b;
+ break;
+ case "mult":
+ result = a * b;
+ break;
+ case "divide":
+ if (b === 0) {
+ result = "Error"; // Handle division by zero
+ } else {
+ result = a / b;
+ }
+ break;
+ default:
+ result = "Error";
+ }
+ this.displayValue = Number.parseFloat(result.toFixed(4)).toString();
+ this.renderValue();
+ },
+
+ clickOperator(o) {
+ if (this.operator && this.displayValue !== "") {
+ this.enteredValues.push(this.displayValue);
+ this.clickEquals();
+ } else {
+ this.enteredValues.push(this.displayValue);
+ }
+ this.operator = o;
+ this.displayValue = "";
+ },
+
+ clickEquals() {
+ if (this.enteredValues.length < 1) {
+ return;
+ }
+ this.enteredValues.push(this.displayValue);
+ const operation = OPERATOR_MAP[this.operator];
+
+ if (operation) {
+ this.calculate(+this.enteredValues[0], +this.enteredValues[1], operation);
+ }
+
+ this.operator = "";
+ this.enteredValues = [this.displayValue]; // Store the result for further calculations
+ },
+};
+
+numbers.forEach((e) =>
+ e.addEventListener("click", () => calculator.clickNumber(e.innerText))
+);
+clearBtn.addEventListener("click", () => calculator.clear());
+operators.forEach((e) =>
+ e.addEventListener("click", () => calculator.clickOperator(e.innerText))
+);
+equalsBtn.addEventListener("click", () => calculator.clickEquals());
+
+calculator.renderValue();
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..63ff7e7e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ 100Devs Calculator
+
+
+
+
+
+
+
+
+
+ C
+ ÷
+ 7
+ 8
+ 9
+ ×
+ 4
+ 5
+ 6
+ -
+ 1
+ 2
+ 3
+ +
+ 0
+ .
+ =
+
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 00000000..27276630
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,97 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body,
+html {
+ height: 100vh;
+ width: 100vw;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #ffdee9;
+ background-image: linear-gradient(0deg, #ffdee9 0%, #b5fffc 100%);
+ font-family: "Poppins";
+}
+
+.mainContainer {
+ background-color: #4d4855;
+ background-image: linear-gradient(147deg, #4d4855 0%, #000000 74%);
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ width: 300px;
+ height: 450px;
+ border-radius: 16px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ justify-items: center;
+}
+
+.display {
+ width: 90%;
+ height: 100px;
+ background-color: white;
+ margin: 20px 10px 10px 10px;
+ border-radius: 8px;
+ grid-column-start: 1;
+ grid-column-end: -1;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ font-size: 3em;
+ padding-right: 20px;
+ overflow: hidden;
+}
+
+.button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: black;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background-color: white;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 1.3em;
+ transition: 0.1s all;
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+ rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
+ rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+ user-select: none;
+}
+
+.zero {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ width: 75%;
+ border-radius: 8px;
+}
+.clear {
+ grid-column-start: 1;
+ grid-column-end: 4;
+ width: 85%;
+ border-radius: 8px;
+}
+
+.clear,
+.operation,
+.equals {
+ background-color: pink;
+}
+
+.number,
+.decimal {
+ background-color: white;
+}
+
+.button:active {
+ box-shadow: rgba(50, 50, 93, 0.5) 0px 60px 120px -20px,
+ rgba(0, 0, 0, 0.6) 0px 40px 80px -30px,
+ rgba(10, 37, 64, 0.7) 0px -2px 8px 0px inset;
+}