diff --git a/index.html b/index.html
new file mode 100644
index 00000000..1f22557b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..292f0e0e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,60 @@
+class Calculator {
+ operator;
+ a = 0;
+ b = 0;
+ res = 0;
+ calculated = false;
+
+ handleClick = (btn) => {
+ const ops = ["+", "-", "X", "/"];
+ const val = btn.srcElement.innerText;
+ if (val === "=") this.calculate();
+ else if (ops.includes(val)) this.setOperator(val);
+ else if (this.operator === undefined) this.setA(val);
+ else this.setB(val);
+ }
+
+ updateResult = (val) => {
+ const result = document.querySelector(".result");
+ result.innerText = val;
+ }
+
+ setA(num) {
+ if (this.a === 0) this.a = num;
+ else if (num === "." && this.a.includes(".")) return;
+ else this.a += num;
+ this.updateResult(this.a);
+ }
+
+ setB(num) {
+ if (this.b === 0) this.b = num;
+ else if (num === "." && this.b.includes(".")) return;
+ else this.b += num;
+ this.updateResult(this.b);
+ }
+
+ setOperator(str) {
+ this.operator = str;
+ this.updateResult(this.operator);
+ }
+
+ calculate = () => {
+ if(this.operator == "+") this.res = Number(this.a) + Number(this.b);
+ else if(this.operator == "-") this.res = Number(this.a) - Number(this.b);
+ else if(this.operator == "X") this.res = Number(this.a) * Number(this.b);
+ else if(this.operator == "/") this.res = Number(this.a) / Number(this.b);
+
+ this.operator = undefined;
+ this.a = 0;
+ this.b = 0;
+ this.updateResult(this.res);
+ }
+
+}
+
+const cal = new Calculator;
+
+const buttons = document.querySelectorAll(".button");
+buttons.forEach(btn => {
+ btn.addEventListener("click", cal.handleClick);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..244dbd26
--- /dev/null
+++ b/style.css
@@ -0,0 +1,56 @@
+* {
+ font-size: 62.5%;
+}
+
+.container {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+}
+
+.calculator {
+ margin-top: 15%;
+ height: 575px;
+ width: 450px;
+ background: black;
+ border-radius: 5%;
+}
+
+.display-container {
+ display: flex;
+ justify-content: center;
+}
+
+.display {
+ margin-top: 20%;
+ height: 100px;
+ width: 80%;
+ background: white;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.display > span {
+ font-size: 7rem;
+}
+
+.buttons {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 25px 15% 0 15%;
+ max-width: 100%;
+ justify-content: center;
+ align-content: center;
+}
+
+.button {
+ background: white;
+ height: 65px;
+ border-radius: 50%;
+ margin: 5px;
+ flex: 1 20%;
+ font-size: 5rem;
+ text-align: center;
+ cursor: pointer;
+}