Tejas1510 · TristanDobos · Oct 29, 2020 · Oct 29, 2020 · Oct 29, 2020 · Sep 28, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/Employee_Management/DAY-6 Que-1.html b/Employee_Management/DAY-6 Que-1.html
@@ -3,17 +3,19 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Day-6 que-1</title>
+    <title>Emloyees</title>
     <link rel="stylesheet" href="q1styles.css">
-
+    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
+
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
   </head>
   <body>
 
 
-    <div class="data">
+    <div class="data ">
       <h1>Employees</h1>
       <h3>
-      <div class="search">
+      <div class="search br--right">
         Search Employee By Name :  <input
           type="text"
           placeholder="Enter Employee Name here"
@@ -22,7 +24,7 @@ <h3>
         />
       </div>
 
-     <div class="search">
+     <div class="search br--right">
         Search Employee By City :  <input
           type="text"
           placeholder="Enter City Name here"
@@ -31,7 +33,7 @@ <h3>
         />
       </div>
       </h3>
-      <table border="1" class="table" cellspacing="0">
+      <table  border="3" class="table" cellspacing="0">
         <thead>
           <tr>
             <th>Sr No.</th>

diff --git a/Employee_Management/employee.js b/Employee_Management/employee.js
@@ -31,18 +31,18 @@ let ouremployees = [
   },
 ];
 
-function display(employeearray) {
+const display = (employeearray) => {
   let tabledata = "";
 
-   employeearray.forEach(function (employee, index) {
+   employeearray.forEach((employee, index) => {
     let currentrow = `<tr>
     <td>${index + 1}</td>
     <td>${employee.name}</td>
     <td>${employee.age}</td>
     <td>${employee.city}</td>
     <td>${employee.salary}</td>
     <td>
-    <button onclick='deleteEmployee(${index})'>delete</button>
+    <button class="br-pill b--dark-blue" onclick='deleteEmployee(${index})'>delete</button>
     </td>
     </tr>`;
 
@@ -56,10 +56,10 @@ function display(employeearray) {
 display(ouremployees);
 
 
-function searchByName() {
+const searchByName = () => {
   let searchValue = document.getElementById("searchName").value;
 
-  let newdata = ouremployees.filter(function (employee) {
+  let newdata = ouremployees.filter( (employee) =>  {
     return (
       employee.name.toUpperCase().indexOf(searchValue.toUpperCase()) != -1
     );
@@ -68,7 +68,7 @@ function searchByName() {
   display(newdata);
 }
 
-function searchByCity() {
+const searchByCity = () => {
   let searchValue = document.getElementById("searchCity").value;
 
   let newdata = ouremployees.filter(function (employee) {
@@ -82,7 +82,7 @@ function searchByCity() {
 
 
 
-function deleteEmployee(index) {
+const deleteEmployee = (index) => {
   ouremployees.splice(index, 1);
   display(ouremployees);
 }

diff --git a/Employee_Management/q1styles.css b/Employee_Management/q1styles.css
@@ -1,6 +1,11 @@
     * {
         margin: 0px;
+        font-family: 'Roboto', sans-serif;
         padding: 0px;
+
+      }
+      body {
+        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
       }
 
       .data {
@@ -11,12 +16,15 @@
         margin-top: 50px;
         padding: 20px;
         display: inline-block;
+        background-color: lightcyan;
       }
 
       .table {
         width: 100%;
         margin-top: 20px;
         font-family: calibri; 
+        background-color: lightblue;
+
       }
       th,
       td {
@@ -32,8 +40,19 @@
 
       button {
         padding: 10px;
+
+
+      }
+      button:hover {
+        transform: scale(1.1);
+        transition: 1s;
       }
 
       .search{
         padding: 10px;
       }
+    input {
+      width: 17rem;
+    }
+
+
diff --git a/calculator/calculator.html b/calculator/calculator.html
@@ -1,99 +1,10 @@
 <html>
 
-<head>
-    <title>calculator</title>
-    <style>
-        .container {
-            width: 100%;
-            height: 100%;
-            margin: 0px;
-            padding: 0px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .container .main_container {
-            width: 30%;
-            /* height: 85%; */
-            background-color: #585555f1;
-            border-radius: 20px;
-            padding: 4%;
-            box-sizing: border-box;
-        }
-
-        .container .main_container .screen {
-            width: 100%;
-            height: 150px;
-            border-radius: 20px;
-            border: none;
-            background-color: white;
-            padding: 30px;
-            box-sizing: border-box;
-            display: flex;
-            flex-wrap: wrap;
-        }
-        .container .main_container .history{
-            width: 100%;
-            height: 30px;
-            border-radius: 20px;
-            border: none;
-            margin-bottom: 5px;
-            padding: 0px 30px;
-        }
-        .container .main_container .screen span{
-            font-weight: bolder;
-            color: black;
-            margin: 5px;
-            font-size: 30px;
-
-        }
-        .keyboard{
-            width: 100%;
-            display: grid;
-            grid-template-columns: 20% 20% 20% 20%;
-            grid-template-rows: 20% 20% 20%;
-            grid-gap: 15px;
-
-            align-items: center;
-            margin-top: 40px;
-
-        }
-        .keyboard .keys{
-            width: 50px;
-            height: 50px;
-            border: none;
-            border-radius: 10px;
-            background-color: white;
-            justify-content: space-around;
-        }
-        .main_container input[value]{
-            font-size: 30px;
-        }
-        @media screen and (max-width :1024px){
-            .container .container_main{
-                height: 60%;
-            }
-
-        }
-    </style>
-    <script>
-        var flag =Number("0");
-
-        function setHistory(){
-           document.getElementById("history").value = document.getElementById('screen').value;
-            document.getElementById("screen").value = "";
-
-            // let output = document.querySelector("#screen").value;
-            // localStorage.setItem( output ,output);
-            // no += 1;
-            // document.getElementById("screen").value = "";
-            // console.log(no)  
-            // let mystorage = localStorage;  
-            // console.log(mystorage)
-
-        }
-    </script>
+<head> 
+    <script src="index.js"></script>
+    <title>Calculator</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <script src="index.js"></script>
 </head>
 
 <body>
@@ -115,17 +26,16 @@
                 <button type="button" class="keys" onclick='document.getElementById("screen").value += this.innerText'><span>3</span></button>
                 <button type="button" class="keys" onclick='document.getElementById("screen").value += this.innerText'><span>*</span></button>
                 <button type="button" class="keys" onclick='document.getElementById("screen").value += this.innerText'><span>0</span></button>
+                <button type="button" class="keys" onclick='document.getElementById("screen").value += this.innerText'><span>00</span></button>
+                <button type="button" class="keys" onclick='document.getElementById("screen").value += 3.14'><span>π</span></button>
                 <button type="button" class="keys" onclick='try{document.getElementById("screen").value = eval(document.getElementById("screen").value);}catch(err){alert("you have entered a wrong operator");document.getElementById("screen").value = "";}'><span>=</span></button>
                 <button type="button" class="keys" onclick='document.getElementById("screen").value += this.innerText'><span>/</span></button>
                 <button type="button" class="keys" onclick='setHistory();'>clear all</button>
             </div>
 
         </div>
     </div>
-    <script>
-
-
-    </script>
+
 </body>
 
 </html>

diff --git a/calculator/index.js b/calculator/index.js
@@ -0,0 +1,7 @@
+let flag = Number("0");
+
+const setHistory = () =>{
+   document.getElementById("history").value = document.getElementById('screen').value;
+    document.getElementById("screen").value = "";
+
+}
diff --git a/calculator/styles.css b/calculator/styles.css
@@ -0,0 +1,81 @@
+.container {
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container .main_container {
+    width: 30%;
+    /* height: 85%; */
+    background-color: #585555f1;
+    border-radius: 20px;
+    padding: 4%;
+    box-sizing: border-box;
+}
+
+.container .main_container .screen {
+    width: 100%;
+    height: 150px;
+    border-radius: 20px;
+    border: none;
+    background-color: white;
+    padding: 30px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+}
+.container .main_container .history{
+    width: 100%;
+    height: 30px;
+    border-radius: 20px;
+    border: none;
+    margin-bottom: 5px;
+    padding: 0px 30px;
+}
+.container .main_container .screen span{
+    font-weight: bolder;
+    color: black;
+    margin: 5px;
+    font-size: 30px;
+
+}
+.keyboard{
+    width: 100%;
+    display: grid;
+    grid-template-columns: 20% 20% 20% 20%;
+    grid-template-rows: 20% 20% 20%;
+    grid-gap: 15px;
+
+    align-items: center;
+    margin-top: 40px;
+
+}
+.keyboard .keys{
+    width: 50px;
+    height: 50px;
+    border: none;
+    border-radius: 10px;
+    background-color: white;
+    justify-content: space-around;
+}
+.main_container input[value]{
+    font-size: 30px;
+}
+@media screen and (max-width :1024px){
+    .container .container_main{
+        height: 60%;
+    }
+
+}
+.screen {
+    font-size: 3rem;
+}
+
+button:hover {
+    transform: scale(1.1);
+    transition: 1.25s;
+}