diff --git a/Calculator/Images/calc(1).png b/Calculator/Images/calc(1).png
new file mode 100644
index 0000000..5d81986
Binary files /dev/null and b/Calculator/Images/calc(1).png differ
diff --git a/Calculator/Images/calc(2).png b/Calculator/Images/calc(2).png
new file mode 100644
index 0000000..ba72cb6
Binary files /dev/null and b/Calculator/Images/calc(2).png differ
diff --git a/Calculator/Images/calc(3).png b/Calculator/Images/calc(3).png
new file mode 100644
index 0000000..d236893
Binary files /dev/null and b/Calculator/Images/calc(3).png differ
diff --git a/Calculator/Readme.md b/Calculator/Readme.md
new file mode 100644
index 0000000..c418962
--- /dev/null
+++ b/Calculator/Readme.md
@@ -0,0 +1,22 @@
+# About
+
+A simple calculator which is made using HTML, CSS and JS for simple calculations.
+
+## Screenshots
+
+The screenshot of Landing page of the website.
+![](<Images/calc(1).png>)
+
+The Screenshot of the operations performed.
+![](<Images/calc(2).png>)
+
+The screenshot of the output of the above operations performed.
+![](<Images/calc(3).png>)
+
+## Tech Stack Used
+
+### Frontend
+
+[HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white")
+[CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
+[Javascript](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
diff --git a/Calculator/calculator.css b/Calculator/calculator.css
new file mode 100644
index 0000000..48acced
--- /dev/null
+++ b/Calculator/calculator.css
@@ -0,0 +1,168 @@
+body {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    background-color: thistle;
+    overflow-x: hidden;
+
+
+}
+
+.container {
+    text-align: center;
+
+}
+
+.heading {
+    font-family: cursive;
+    margin-bottom: 23px;
+    font-size: 48px;
+    color: black;
+   
+
+
+}
+
+#answer {
+    background-color: white;
+    border: 2px solid black;
+    border-radius: 10px;
+    width: 50vw;
+    height: 7vh;
+    margin-bottom: 20px;
+    color: black;
+    font-size: 26px;
+
+
+
+}
+
+.container {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+}
+
+
+
+button {
+    width: 12vw;
+    height: 9vh;
+    font-size: 25px;
+    margin: 3px;
+    background-color: white;
+    border: 3px solid black;
+    border-radius: 5px;
+    position: relative;
+    top: 0;
+    transition: top ease 0.5s;
+}
+
+button:hover {
+    background-color: teal;
+    top: -8.75px;
+}
+
+@media(min-width: 50px) and (max-width: 118px) {
+    .heading {
+        font-size: 11px;
+    }
+
+    button {
+        font-size: 5px;
+        width: 8vw;
+        height: 2.5vh;
+
+    }
+
+    #answer {
+        width: 32vw;
+        height: 2vh;
+        font-size: 10px;
+    }
+
+    /* .container{
+        
+    } */
+    .container {
+        margin-left: 40px;
+
+    }
+}
+
+@media(min-width: 118px) and (max-width: 178px) {
+    .heading {
+        font-size: 20px;
+    }
+
+    button {
+        font-size: 12px;
+        height: 2.5vh;
+        font-size: 6px;
+        text-align: left;
+        width: 24px;
+
+    }
+
+    #answer {
+        width: 40vw;
+        height: 4vh;
+        font-size: 12px;
+    }
+}
+@media(min-width: 178px) and (max-width: 274px) {
+    .heading {
+        font-size: 34px;
+    }
+
+    button {
+        font-size: 8px;
+        width: 30px;
+       
+
+    }
+        #answer {
+            font-size: 15px;
+        }
+}
+
+@media(min-width: 274px) and (max-width: 330px) {
+    .heading {
+        font-size: 34px;
+    }
+
+    button {
+        font-size: 11px;
+
+    }
+        #answer {
+            font-size: 18px;
+        }
+}
+@media(min-width: 330px) and (max-width: 378px) {
+    .heading {
+        font-size: 34px;
+    }
+
+    button {
+        font-size: 14px;
+
+    }
+    #answer{
+        font-size: 20px;
+    }
+}
+@media(min-width: 378px) and (max-width: 487px) {
+    .heading {
+        font-size: 34px;
+    }
+
+    button {
+        font-size: 20px;
+
+    }
+    
+}
\ No newline at end of file
diff --git a/Calculator/calculator.html b/Calculator/calculator.html
new file mode 100644
index 0000000..0ddb77d
--- /dev/null
+++ b/Calculator/calculator.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="calculator.css">
+    <title>Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+
+        <h1 class="heading">Calculator</h1>
+
+        <input type="text" name="screen" id="answer" placeholder="0" readonly>
+        <div class="calculator">
+            <table>
+                <tr>
+                    <td> <button onclick="Clear()"> C </button></td>
+                    <td> <button onclick="del()"> Del</button></td>
+                    <td> <button onclick="calculate('%')"> mod </button></td>
+                    <td> <button onclick="calculate('/')"> / </button></td>
+                </tr>
+                <tr>
+                    <td> <button onclick="calculate(7)"> 7</button></td>
+                    <td> <button onclick="calculate(8)"> 8 </button></td>
+                    <td> <button onclick="calculate(9)"> 9</button></td>
+                    <td> <button onclick="calculate('*')"> *</button></td>
+                </tr>
+                <tr>
+                    <td> <button onclick="calculate(4)"> 4</button></td>
+                    <td> <button onclick="calculate(5)"> 5</button></td>
+                    <td> <button onclick="calculate(6)"> 6 </button></td>
+                    <td> <button onclick="calculate('-')"> - </button></td>
+                </tr>
+                <tr>
+                    <td> <button onclick="calculate(1)"> 1</button></td>
+                    <td> <button onclick="calculate(2)"> 2 </button></td>
+                    <td> <button onclick="calculate(3)"> 3 </button></td>
+                    <td> <button onclick="calculate('+')"> + </button></td>
+                </tr>
+
+                <tr>
+
+                    <td> <button onclick="calculate(0)"> 0 </button></td>
+                    <td> <button onclick="calculate('.')"> . </button></td>
+                    <td> <button onclick="Result()" class="equal">=</button></td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <script src="calculator.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Calculator/calculator.js b/Calculator/calculator.js
new file mode 100644
index 0000000..1b4ece5
--- /dev/null
+++ b/Calculator/calculator.js
@@ -0,0 +1,19 @@
+let input=document.getElementById('answer');
+let calculate=(number)=>{
+input.value+=number;
+}
+let Result=()=>{
+    try{
+
+        input.value=eval(input.value);
+    }
+    catch(error){
+        alert("The input is invalid, please Enter a valid input.");
+    }
+}
+function Clear(){
+    input.value=" ";
+}
+function del(){
+    input.value=input.value.slice(0,-1);
+}
\ No newline at end of file