diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c3a493a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,50 @@
+<!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="style.css">
+    <title>Calculator</title>
+</head>
+<body>
+    <div id="mainbody">
+        <div id="display">
+            <div></div>
+            <div id="col1"> <div id="firstdis">CALCULATOR</div> </div>
+            <div id="operation">=></div>
+            <div id="col2"><marquee behavior="alternate">Press any key to start!</marquee></div>
+        </div>
+        <div id="history">
+            <button id="hisbtn" onclick="showhis()">&#x1F552;</button>
+            <div id="lastval"></div>
+        </div>
+        <div id="numpad">
+            <button onclick="clearnow()" style="color: lightseagreen;">C</button>
+            <button onclick="operate('%')" style="color: lightseagreen;">%</button>
+            <button onclick="backspace()" id="cross">
+                &#x25C0;
+                <div>X</div>
+            </button>
+            <button onclick="operate('/')" style="color: lightseagreen;">&#247;</button>
+            <button onclick="update('7')">7</button>
+            <button onclick="update('8')">8</button>
+            <button onclick="update('9')">9</button>
+            <button onclick="operate('*')" style="color: lightseagreen;">X</button>
+            <button onclick="update('4')">4</button>
+            <button onclick="update('5')">5</button>
+            <button onclick="update('6')">6</button>
+            <button onclick="operate('-')" style="color: lightseagreen;">-</button>
+            <button onclick="update('1')">1</button>
+            <button onclick="update('2')">2</button>
+            <button onclick="update('3')">3</button>
+            <button onclick="operate('+')" style="color: lightseagreen;">+</button>
+            <button onclick="update('00')">00</button>
+            <button onclick="update('0')">0</button>
+            <button onclick="update('.')">.</button>
+            <button onclick="solve()" style="color: lightseagreen;">=</button>
+        </div>
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..fb43707
--- /dev/null
+++ b/main.js
@@ -0,0 +1,134 @@
+col1=document.getElementById("col1");
+opr=document.getElementById("operation");
+col2=document.getElementById("col2");
+historyele=document.getElementById("lastval");
+let a=0,b=0,ans=0,deci=0,check="",cnt=0;
+function clearnow(){
+    col1.innerHTML="";
+    col2.innerHTML="";
+    opr.innerHTML="";
+    a=0;b=0;ans=0;deci=0;
+}
+function update(str){
+    if(document.getElementById("firstdis")) clearnow();
+    if(str=='.'){
+        if(deci!=1) col2.innerHTML=col2.innerHTML+str;
+        deci=1;return;
+    }
+    if(deci==1 && str[0]=='0'){
+        col2.innerHTML=col2.innerHTML+str;
+        return;
+    }
+    let prev=b;
+    b=parseFloat(col2.innerHTML+str)
+    if(b.toString()!=col2.innerHTML+str){
+        alert("Maximum Limit Attained!");
+        b=prev;
+        return;
+    }
+    col2.innerHTML=col2.innerHTML+str;
+}
+function backspace(){
+    if(document.getElementById("firstdis")) clearnow();
+    if(col2.innerHTML=="") return;
+    col2.innerHTML=col2.innerHTML.slice(0, -1);
+    b=parseFloat(col2.innerHTML);
+}
+
+function updatehistory(k){
+    var arr=(JSON.parse(localStorage.getItem("History"))||[]);
+    // if(arr==null) arr=[];
+    
+    // console.log(typeof(arr))
+    if(k==1){
+        var value=a.toString()+check+b.toString()+"="+ans.toString();
+        arr.push(value);
+    }
+    if(arr.length==0) return;
+    if(arr.length>10) arr.shift();
+    historyele.innerHTML="<div>";
+    var i=arr.length-1;
+    for(let j=0;j<arr[i].length;j++){
+        if(arr[i][j]=='=')
+            historyele.innerHTML+="<br>";
+        historyele.innerHTML+=arr[i][j];
+    }
+    historyele.innerHTML+="</div>";
+    localStorage.setItem("History",JSON.stringify(arr));
+}
+function operate(str){
+    if(document.getElementById("firstdis")) clearnow();
+    if(b!=0) a=b;b=0;
+    deci=0;cnt=0;
+    col1.innerHTML=a.toString();
+    col2.innerHTML="";
+    opr.innerHTML=str;check=str;
+    if(str=='*') opr.innerHTML="X";
+    if(str=='/') opr.innerHTML="&#247;";
+}
+function solve(){
+    if(document.getElementById("firstdis")) clearnow();
+    if(check==""){
+        alert("Incomplete Operation");
+        return;
+    }
+    if(check=='+'){
+        ans=a+b;
+        col1.innerHTML=ans.toString();
+        col2.innerHTML="";
+        opr.innerHTML="";
+    }
+    if(check=='-'){
+        ans=a-b;
+        col1.innerHTML=ans.toString();
+        col2.innerHTML="";
+        opr.innerHTML="";
+    }
+    if(check=='*'){
+        ans=a*b;
+        col1.innerHTML=ans.toString();
+        col2.innerHTML="";
+        opr.innerHTML="";
+    }
+    if(check=='/'){
+        ans=a/b;
+        col1.innerHTML=ans.toString();
+        col2.innerHTML="";
+        opr.innerHTML="";
+    }
+    if(check=='%'){
+        ans=a*b/100;
+        col1.innerHTML=ans.toString();
+        col2.innerHTML="";
+        opr.innerHTML="";
+    }
+    updatehistory(1);
+    a=ans;b=0;ans=0;check="";deci=0;cnt=0;
+}
+updatehistory(0);
+
+function showhis(){
+    var arr=(JSON.parse(localStorage.getItem("History"))||[]);
+    if(cnt==arr.length){
+        return;
+    }
+    clearnow();
+    let i=arr.length-1-cnt;
+    let sw=0;
+    for(let j=0;j<arr[i].length;j++){
+        if(sw==0) col1.innerHTML+=arr[i][j];
+        else col2.innerHTML+=arr[i][j];
+        if(arr[i][j]=='=') sw=1;
+    }
+    b=parseFloat(col2.innerHTML);
+    cnt=cnt+1;
+    if(cnt==arr.length) return;
+    historyele.innerHTML="<div>";
+    i=arr.length-1-cnt;
+    for(let j=0;j<arr[i].length;j++){
+        if(arr[i][j]=='=')
+            historyele.innerHTML+="<br>";
+        historyele.innerHTML+=arr[i][j];
+    }
+    historyele.innerHTML+="</div>";
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..30d4470
--- /dev/null
+++ b/style.css
@@ -0,0 +1,86 @@
+#mainbody{
+    border:3px solid black;
+    padding: 3px;
+    width: 350px;
+    margin: 0;
+    border-radius: 5px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+#display{
+    border: 2px solid black;
+    height: 90px;
+    margin: 2px;
+    background-color: rgb(172, 235, 231);
+    border-radius: 5px;
+    display: grid;
+    grid-template-columns: 15.625% 84.375%;
+    overflow: hidden;
+}
+#col1{
+    grid-column: 1/span 2;
+}
+#display div{
+    font-size: 27px;
+    margin: 3px;
+    text-align: right;
+}
+#firstdis{
+    text-align:center !important;
+    font-weight: 900;
+ }
+#history{
+    margin: 2px;
+    border: 2px solid black;
+    border-radius: 3px;
+    display: grid;
+    grid-template-columns: max-content auto;
+}
+#hisbtn{
+    background-color:black;
+    border:none;
+    font-size: 25px;
+}
+#lastval{
+    height: 50px;
+    font-size: 25px;
+    padding: 3px;
+    text-align: right;
+    overflow:hidden;
+}
+#numpad{
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+}
+#numpad button{
+    font-size: 24px;
+    font-size: 900;
+    height: 60px;
+    border: none;
+}
+#numpad button:active{
+    transform: scale(0.98);
+    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.377);
+}
+#cross{
+    display: flex;
+    color: lightseagreen;
+    font-size: 24px;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+}
+#cross div{
+    border:2px solid lightseagreen;
+    font-size: 15px;
+    font-weight: 800;
+    width: 20px;
+}
+@media screen and (max-width: 375px) {
+    #mainbody{
+        width: 90%;
+    }
+}
\ No newline at end of file
