diff --git a/dubing.html b/dubing.html
new file mode 100644
index 0000000..8c7a2d4
--- /dev/null
+++ b/dubing.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Button Click Example</title>
+<style>
+    #message {
+        display: none; /* Initially hide the message */
+    }
+</style>
+</head>
+<body>
+
+<button id="showMessageButton">Click Me</button>
+
+<div id="message">Hello, I appeared!</div>
+
+<script>
+    // Get the button element
+    var button = document.getElementById('showMessageButton');
+
+    // Get the message element
+    var message = document.getElementById('message');
+
+    // Add event listener to the button
+    button.addEventListener('click', function() {
+        // Show the message
+        message.style.display = 'block';
+    });
+</script>
+
+</body>
+</html>
diff --git a/index1.html b/index1.html
new file mode 100644
index 0000000..371c46e
--- /dev/null
+++ b/index1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+<link rel="stylesheet" href="style.css">
+
+</head>
+<body >
+
+       <div class="contain .gradient-background">
+
+ <div class="cal">
+                                <input class="in">
+                                   <div class="NUMBER">
+                                    <button class="key operator">C</button>
+                                    <button class="key operator">X</button>
+                                    <button class="key operator">(</button>
+                                    <button class="key operator">)</button>
+
+                                           
+                                        
+                                           
+                                          <button class="key ">7</button>
+                                          
+                                            <button class="key">8</button>
+                                            <button class="key">9</button>
+                                            <button class="key operator">-</button>
+
+              
+                                            <button class="key">4</button>
+                                            <button class="key">5</button>
+                                            <button class="key">6</button>
+                                            <button class="key operator">*</button>                                              <button class="key">1</button>
+                     <button class="key">2</button>
+                                            <button class="key">3</button>
+                                            <button class="key operator">+</button>
+
+                                            <button class="key " style="text-align:center;">.</button>
+                                            
+                                            <button class="key" >0</button>
+                                            <button class="key">%</button>
+                         
+                                            
+                                            <button class="key operator">/</button>
+                                        <button class="key operator" style="width: 90%;  color:black;  background-color:#d8b4fe; ">=</button>
+                                   </div>
+
+                                     
+=
+                    </div>
+
+
+
+       </div>
+
+
+
+     <script src="js.js"></script>
+</body> 
+</html>
\ No newline at end of file
diff --git a/js.js b/js.js
new file mode 100644
index 0000000..087186d
--- /dev/null
+++ b/js.js
@@ -0,0 +1,95 @@
+
+var string="";
+var v=document.querySelectorAll(".key").length;
+
+for(i=0;i<v;i++){
+document.querySelectorAll(".key")[i].addEventListener('click', function(){
+                      console.log(this.innerHTML);
+
+          try{
+
+        if(this.innerHTML==='='){
+            string=eval(string);
+            // checking whether the given value is null or not
+            if(isNaN(string)){
+                // then throw a error 
+                throw new Error("INTPUT ERROR");
+            }
+            document.querySelector('input').value=string;
+        }
+        else if(this.innerHTML==='C'){
+            string='';
+            document.querySelector('input').value=string;
+            return ;
+        }
+
+        else if(this.innerHTML==='x'||this.innerHTML==='X'){
+            string=string.slice(0,-1);
+            document.querySelector('input').value=string;
+
+}                          
+        else{
+
+        
+              string=string + this.innerHTML;
+          document.querySelector('input').value=string;
+        }
+    }
+    catch(error){
+        string='Invalid';
+        document.querySelector('input').value=string;
+        setTimeout(function(){
+            string="";
+            document.querySelector('input').value=string;
+          },1000);
+    
+    }
+
+
+
+})
+}
+document.addEventListener("keydown",function(e){
+             try{
+
+                if(e.key==='='){
+                    string=eval(string);
+                    // checking whether the given value is null or not
+                    if(isNaN(string)){
+                        // then throw a error 
+                        throw new Error("INTPUT ERROR");
+                    }
+                    document.querySelector('input').value=string;
+                }
+                else if(e.key==='C'||e.key=='c'){
+                    string='';
+                    document.querySelector('input').value=string;
+                }
+                else if(e.key==='x'||e.key==='X'){
+                                    string=string.slice(0,-1);
+                                    document.querySelector('input').value=string;
+
+                }
+               
+                                            
+                else{
+        
+                
+                      string=string +e.key;
+                  document.querySelector('input').value=string;
+                }
+            }
+            catch(error){
+                string='Invalid';
+                document.querySelector('input').value=string;
+                setTimeout(function(){
+                    string="";
+                    document.querySelector('input').value=string;
+                  },1000);
+            }
+
+});
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1adce74
--- /dev/null
+++ b/style.css
@@ -0,0 +1,68 @@
+.contain{
+   height:100vh;
+   width:100%;
+   background-color:#283149;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   
+}
+
+.cal{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top:5%;
+    height:500px;
+    width:300px;
+    background-color:#111827 ;
+    border: white 1px solid;
+    border-radius: 10px;
+} 
+input{
+    color:antiquewhite;
+    background-color: #111827;
+    border: 0;
+}
+.NUMBER{
+   
+    height:350px;
+    width:100%; 
+}
+.in{
+    margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: 70px;
+    height: 150px;
+    width:95%;
+
+}
+.key:hover{
+    /* border:.5px solid white; */
+    box-shadow: 30px 3px 4px 30;
+    opacity: 0.5;
+
+}
+
+.key{
+    background-color:#111827;
+    color:#9333ea;;
+    margin-top: 7px;
+    margin-left: 15px;
+    margin-right:5px;
+    height:50px;
+    width:50px;
+    border-radius: 100px;
+    font-size: 40px;
+    border: 0;
+}
+.operator{
+    color:#01d293;
+ 
+    /* background-color:  ora; */
+    /* color: #ffffff; */
+}
+
+    
\ No newline at end of file
