diff --git a/index.html b/index.html
index 14ba0ef..53e05b0 100644
--- a/index.html
+++ b/index.html
@@ -26,14 +26,14 @@ <h1>Calculate Anything</h1>
         </div>
 
         <div class="keyboard">
-
-            <button id="CE" onclick="document.getElementById('display').value = display.value.slice(0,-1)">CE</button>
+            <!-- just sort the code with the use of function -->
+            <button id="CE" onclick="erase()">CE</button>
 
             <button id="clear" onclick="document.getElementById('display').value =''">C</button>
 
-            <button id="div" onclick="document.getElementById('display').value += '/'">/</button>
+            <button id="div" onclick="display('/')">/</button>
 
-            <button id="mod" onclick="document.getElementById('display').value += '%'">%</button>
+            <button id="mod" onclick="display('%')">%</button>
 
             <!-- <button id="one" onclick="document.getElementById('display').value +='sin '">sin</button>
 
@@ -43,38 +43,38 @@ <h1>Calculate Anything</h1>
 
             <button id="one" onclick="document.getElementById('display').value +='tan '">tan</button> -->
 
-            <button id="one" onclick="document.getElementById('display').value +='1'">1</button>
+            <button id="one" onclick="display(1)">1</button>
 
-            <button id="two" onclick="document.getElementById('display').value +='2'">2</button>
+            <button id="two" onclick="display(2)">2</button>
 
-            <button id="three" onclick="document.getElementById('display').value +='3'">3</button>
+            <button id="three" onclick="display(3)">3</button>
 
-            <button id="add" onclick="document.getElementById('display').value +='+'">+</button>
+            <button id="add" onclick="display('+')">+</button>
 
 
-            <button id="four" onclick="document.getElementById('display').value +='4'">4</button>
+            <button id="four" onclick="display(4)">4</button>
 
-            <button id="five" onclick="document.getElementById('display').value +='5'">5</button>
+            <button id="five" onclick="display(5)">5</button>
 
-            <button id="six" onclick="document.getElementById('display').value +='6'">6</button>
+            <button id="six" onclick="display(6)">6</button>
 
-            <button id="minus" onclick="document.getElementById('display').value +='-'">-</button>
+            <button id="minus" onclick="display('-')">-</button>
 
-            <button id="seven" onclick="document.getElementById('display').value +='7'">7</button>
+            <button id="seven" onclick="display(7)">7</button>
 
-            <button id="eight" onclick="document.getElementById('display').value +='8'">8</button>
+            <button id="eight" onclick="display(8)">8</button>
 
-            <button id="nine" onclick="document.getElementById('display').value +='9'">9</button>
+            <button id="nine" onclick="display(9)">9</button>
 
-            <button id="multiply" onclick="document.getElementById('display').value +='*'">*</button>
+            <button id="multiply" onclick="display('*')">*</button>
              <!-- disableb the button so that the hover effect to be changed for disableb buttons -->
             <button disabled class="noHover"></button>
 
-            <button id="zero" onclick="document.getElementById('display').value +='0'">0</button>
-
-            <button disabled class="noHover"></button>
+            <button id="zero" onclick="display(0)">0</button>
+            <!-- add dot button -->
+            <button onclick="display('.')" >.</button>
 
-            <button id="equal" type="submit" onclick="calculate(display.value)">=</button>
+            <button id="equal" type="submit" onclick="calculate()">=</button>
 
         </div>
     </div>
diff --git a/main.css b/main.css
index ca6c0d4..db7365f 100644
--- a/main.css
+++ b/main.css
@@ -1,142 +1,145 @@
 html, body {
     
- -webkit-user-select: none; /* Safari */        
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* IE10+/Edge */
-  user-select: none; /* Standard */
-    
-    height: 100%;
-    width:100%;
-    padding: 0;
-    margin: 0;
-    overflow-x: hidden;
-}
-
-/* used white colour for foreground so that disabled button is not visible to the screen */
-button:disabled{
-    color: #f1f1f1;
-}
-/* made the hover background color to white so the annoying hover in empty space is removed */
-
-button:disabled:hover{
-    color:white;
-    background-color:white;
-}
-.noHover{
-    pointer-events: none;
-}
-
-body {
-    font-family: monospace;
-    background-image: linear-gradient(to left, lightpink, lightblue);
-}
-
-h1 {
-    padding: 25px;
-    margin: 20px;
-    text-align: center;
-}
-
-.container {
-    justify-content: center;
-    align-items: center;
-    margin: auto;
-    height: 410px;
-    width: 340px;
-    box-shadow: 6px 8px 2px grey;
-    background: white;
-    border-radius: 10px;
-}
-
-.output {
-    position: relative;
-    top: 20px;
-    text-align: center;
-}
-
-input {
-    text-align: end;
-    padding: 8px;
-    font-size: 25px;
-}
-
-#display {
-    outline: none;
-    width: 280px;
-    height: 40px;
-    background: #f1f1f1;
-    border-radius: 10px;
-    border-color: none;
-    border: none;
-}
-
-.keyboard {
-    width: 330px;
-    position: relative;
-    top: 40px;
-    margin: 10px;
-    text-align: center;
-}
-
-button {
-    font-family: sans-serif;
-    font-weight: bolder;
-    font-size: 22px;
-    color:"black";
-    background: white;
-    border: none;
-    margin: 6px;
-    padding: 12px;
-    outline: none;
-    border-radius: 50%;
-    width: 49px;
-    height: 45px;
-}
-
-button:nth-child(1) {
-    background: lightgrey;
-}
-
-button:nth-child(2) {
-    font-weight: 550;
-    background: lightgrey;
-}
-
-button:nth-child(3) {
-    background: lightgrey;
-}
-
-button:nth-child(4) {
-    background: lightgreen;
-}
-
-button:nth-child(8) {
-    background: aqua;
-}
-
-button:nth-child(12) {
-    padding: 0px;
-    font-size: 30px;
-    font-family: monospace;
-    background: orange;
-}
-
-button:nth-child(16) {
-    background: pink;
-    font-size: 25px;
-}
-
-button:nth-child(20) {
-    background: yellow;
-}
-
-button:hover {
-    background: rgba(230, 108, 230, 0.616);
-}
-
-button:nth-child(17):hover {
-    display: none;
-}
-button:nth-child(19):hover {
-    display: none;
-}
\ No newline at end of file
+    -webkit-user-select: none; /* Safari */        
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+/Edge */
+     user-select: none; /* Standard */
+       
+       height: 100%;
+       width:100%;
+       padding: 0;
+       margin: 0;
+       overflow-x: hidden;
+   }
+   
+   /* used white colour for foreground so that disabled button is not visible to the screen */
+   button:disabled{
+       color: #f1f1f1;
+   }
+   /* made the hover background color to white so the annoying hover in empty space is removed */
+   
+   button:disabled:hover{
+       color:white;
+       background-color:white;
+   }
+   .noHover{
+       pointer-events: none;
+   }
+   
+   body {
+       font-family: monospace;
+       background-image: linear-gradient(to left, lightpink, lightblue);
+   }
+   
+   h1 {
+       padding: 25px;
+       margin: 20px;
+       text-align: center;
+   }
+   
+   .container {
+       justify-content: center;
+       align-items: center;
+       margin: auto;
+       height: 410px;
+       width: 340px;
+       box-shadow: 6px 8px 2px grey;
+       background: white;
+       border-radius: 10px;
+   }
+   
+   .output {
+       position: relative;
+       top: 20px;
+       text-align: center;
+   }
+   
+   input {
+       text-align: end;
+       padding: 8px;
+       font-size: 25px;
+   }
+   
+   #display {
+       outline: none;
+       width: 280px;
+       height: 40px;
+       background: #f1f1f1;
+       border-radius: 10px;
+       border-color: none;
+       border: none;
+   }
+   
+   .keyboard {
+       width: 330px;
+       position: relative;
+       top: 40px;
+       margin: 10px;
+       text-align: center;
+   }
+   
+   button {
+       font-family: sans-serif;
+       font-weight: bolder;
+       font-size: 22px;
+       color:"black";
+       background: white;
+       border: none;
+       margin: 6px;
+       padding: 12px;
+       outline: none;
+       border-radius: 50%;
+       width: 49px;
+       height: 45px;
+   }
+   button:focus{
+       transform: scale(0.8);
+   }
+   
+   button:nth-child(1) {
+       background: lightgrey;
+   }
+   
+   button:nth-child(2) {
+       font-weight: 550;
+       background: lightgrey;
+   }
+   
+   button:nth-child(3) {
+       background: lightgrey;
+   }
+   
+   button:nth-child(4) {
+       background: lightgreen;
+   }
+   
+   button:nth-child(8) {
+       background: aqua;
+   }
+   
+   button:nth-child(12) {
+       padding: 0px;
+       font-size: 30px;
+       font-family: monospace;
+       background: orange;
+   }
+   
+   button:nth-child(16) {
+       background: pink;
+       font-size: 25px;
+   }
+   
+   button:nth-child(20) {
+       background: yellow;
+   }
+   
+   button:hover {
+       background: rgba(230, 108, 230, 0.616);
+   }
+   
+   button:nth-child(17):hover {
+       display: none;
+   }
+   /* button:nth-child(19):hover {
+       display: none;
+   } */
\ No newline at end of file
diff --git a/script.js b/script.js
index 3006a42..829d9e1 100644
--- a/script.js
+++ b/script.js
@@ -2,29 +2,53 @@ var input = document.getElementById("display");
 
 //script to detect if enter button is clicked to evaluate the result
 
-input.addEventListener("keyup", function(event) {
-  
-    // Number 13 is the "Enter" key on the keyboard
-  
-    if (event.keyCode == 13) {
-    
-      // Trigger the button element with a click
-      
-      document.getElementById("equal").click();
+input.addEventListener("keyup", function (event) {
+
+  // Number 13 is the "Enter" key on the keyboard
+
+  if (event.keyCode == 13) {
+
+    // Trigger the button element with a click
+
+    document.getElementById("equal").click();
   }
 });
-
+var count = 0;
+// Function to display the result
+function display(result) {
+  // code for erase the screen when you click the number key without click on clear button
+  if (result == '/' || result == '+' || result == '-' || result == '*' || result == '%') {
+    count = 0;
+  }
+  else if (count != 0) {
+    input.value = "";
+  }
+  input.value += result
+}
+// Function to clear the screen
+function erase() {
+  var arr = input.value.split(''), temp = "";
+  for (let i = 0; i < arr.length - 1; ++i)
+    temp += arr[i];
+  input.value = temp;
+}
 // Function to calculate the result
-function calculate(operation) {
+function calculate() {
   let result;
+  operation = input.value;
   try {
-    result = eval(operation);  
-  } catch (error) {}
-
-  if ( result === 0 || isFinite(result) && Boolean(result) ) {
-    document.getElementById('display').value = result;
-  } else {
-    document.getElementById('display').value = 'Invalid operation';
+    result = eval(operation);
+  } catch (error) { }
+  // check wheather there is input or not
+  if (input.value == "") {
+    alert("please enter number ");
+  }
+  else if (result === 0 || isFinite(result) && Boolean(result)) {
+    input.value = result;
+    count++;
+  }
+  else {
+    input.value = 'Invalid operation';
+    count++;
   }
-
 } 
\ No newline at end of file