diff --git a/index.css b/index.css
new file mode 100644
index 0000000..3184725
--- /dev/null
+++ b/index.css
@@ -0,0 +1,16 @@
+#mydiv1 {
+    width: 300px;
+    height: 280px;
+    background-color: black;
+
+
+}
+input {
+    width: 24%;
+    height: 55px; font-size: 20px;
+}
+#myplac {
+    width: 96%;
+    height: 50px;
+    background-color: azure;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4dd4d7b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,44 @@
+<!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="index.css">
+    <title>My-calculatator</title>
+</head>
+<body>
+    <div id="mydiv1">
+        <form name="caf">
+
+            <input type="text" name="inna" placeholder="0" id="myplac">
+            <br>
+            <input type="button" value="1" onclick="caf.inna.value+=1">
+            <input type="button" value="2" onclick="caf.inna.value+=2">
+            <input type="button" value="3" onclick="caf.inna.value+=3">
+            <input type="button" value="+" onclick="add()">
+            <br>
+            <input type="button" value="4" onclick="caf.inna.value+=4">
+            <input type="button" value="5" onclick="caf.inna.value+=5">
+            <input type="button" value="6" onclick="caf.inna.value+=6">
+            <input type="button" value="-" onclick="sub()"> 
+            <br>
+            <input type="button" value="7" onclick="caf.inna.value+=7">
+            <input type="button" value="8" onclick="caf.inna.value+=8">
+            <input type="button" value="9" onclick="caf.inna.value+=9">
+            <input type="button" value="/" onclick="di()">
+            <br>
+            <input type="button" value="R" onclick="caf.inna.value=''">
+            <input type="button" value="0" onclick="caf.inna.value+=0">
+            <input type="button" value="=" onclick="caf.inna.value=eval(caf.inna.value)">
+            <input type="button" value="x" onclick="mul()">
+            <br>
+            
+            </form>
+            
+        
+            <script src="index.js"></script>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..e9792ab
--- /dev/null
+++ b/index.js
@@ -0,0 +1,53 @@
+
+function add() {
+    var cal1=0, cla2=0;
+    cal1= caf.inna.value;
+    cla2=cal1.charAt(cal1.length-1);
+   if(cla2=='+' || cla2=='-' || cla2=='/' || cla2=='*') {
+    caf.inna.value=cal1.substring(0,cal1.length-1);
+    caf.inna.value+='+';
+   }else {
+    caf.inna.value+='+';
+ } 
+ } 
+ function sub() {
+    var cal1=0, cla2=0;
+    cal1= caf.inna.value;
+    cla2=cal1.charAt(cal1.length-1);
+   if(cla2=='+' || cla2=='-' || cla2=='/' || cla2=='*') {
+    caf.inna.value=cal1.substring(0,cal1.length-1);
+    caf.inna.value+='-';
+   }else {
+    caf.inna.value+='-';
+ } 
+ } 
+ function di() {
+    var cal1=0, cla2=0;
+    cal1= caf.inna.value;
+    cla2=cal1.charAt(cal1.length-1);
+   if(cla2=='+' || cla2=='-' || cla2=='/' || cla2=='*') {
+    caf.inna.value=cal1.substring(0,cal1.length-1);
+   caf.inna.value+='/';
+   }else {
+    caf.inna.value+='/';
+ } 
+ }
+ function mul() {
+    var cal1=0, cla2=0;
+    cal1= caf.inna.value;
+    cla2=cal1.charAt(cal1.length-1);
+   if(cla2=='+' || cla2=='-' || cla2=='/' || cla2=='*') {
+    caf.inna.value=cal1.substring(0,cal1.length-1);
+   caf.inna.value+='*';
+   }else {
+    caf.inna.value+='*';
+ } 
+ } 
+ // enventListner//
+const myClick = document.getElementById("myplac")
+ myClick.addEventListener("click", ()=>{
+    document.body.style.backgroundColor = "purple";
+
+ });
+ 
+     
\ No newline at end of file
