diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b7be64c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<h1>Calculator</h1>
+<br><br>
+    <div class="calculator">
+        <div class="display" id="display">0</div>
+        <button class="button" onclick="clearDisplay()">C</button>
+        <button class="button" onclick="appendToDisplay('7')">7</button>
+        <button class="button" onclick="appendToDisplay('8')">8</button>
+        <button class="button" onclick="appendToDisplay('9')">9</button>
+        <button class="button" onclick="appendToDisplay('+')">+</button>
+        <button class="button" onclick="appendToDisplay('4')">4</button>
+        <button class="button" onclick="appendToDisplay('5')">5</button>
+        <button class="button" onclick="appendToDisplay('6')">6</button>
+        <button class="button" onclick="appendToDisplay('-')">-</button>
+        <button class="button" onclick="appendToDisplay('1')">1</button>
+        <button class="button" onclick="appendToDisplay('2')">2</button>
+        <button class="button" onclick="appendToDisplay('3')">3</button>
+        <button class="button" onclick="appendToDisplay('*')">*</button>
+        <button class="button" onclick="appendToDisplay('0')">0</button>
+        <button class="button" onclick="calculateResult()">=</button>
+        <button class="button" onclick="appendToDisplay('/')">/</button>
+    </div>
+
+    <script src="javascript.js">
+        
+    </script>
+</body>
+</html>
diff --git a/javascript.js b/javascript.js
new file mode 100644
index 0000000..f6a63f3
--- /dev/null
+++ b/javascript.js
@@ -0,0 +1,22 @@
+let display = document.getElementById("display");
+        let expression = "";
+
+        function appendToDisplay(value) {
+            expression += value;
+            display.innerHTML = expression;
+        }
+
+        function clearDisplay() {
+            expression = "";
+            display.innerHTML = "0"; 
+        }
+
+        function calculateResult() {
+            try {
+                const result = eval(expression);
+                expression = result;
+                display.innerHTML = result;
+            } catch (error) {
+                display.innerHTML = "Error";
+            }
+        }
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..303ea5d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,45 @@
+body {
+            font-family: Arial, sans-serif;
+	background-color:lightblue;
+        }
+h1{
+ color:rgb(51, 19, 233);
+text-align:center;
+font-size: 3rem;
+font-family: sans-serif;
+font-weight: bold;
+}
+
+        .calculator {
+            width: 300px;
+            margin: 0 auto;
+            border: 10px solid #13e61e;
+            border-radius: 5px;
+            padding: 20px;
+            background-color: lightblue;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+        }
+
+        .display {
+            grid-column: 1 / span 4;
+            height: 40px;
+            text-align: right;
+            margin-bottom: 15px;
+            border: 5px solid hsl(113, 92%, 47%);
+            padding: 5px;
+            font-size: 20px;
+ background-color: white;
+border-radius: 5px;
+        }
+
+        .button {
+            width: 60px;
+            height: 60px;
+margin: 5px;
+            font-size: 20px;
+            border: 3px solid #421deb;
+            border-radius: 5px;
+            background-color: white;
+            cursor: pointer;
+        }
\ No newline at end of file
