├── README.md
├── app.js
├── img
    ├── CRUD with Pagination.png
    └── pic1.png
├── index.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
 1 | # Creative JS Coder
 2 | 
 3 | 
 4 | ## Complete CRUD (Create, Read, Update, Delete) Operations including Pagination, Filter Data, Show entries, Control the Table Size Using HTML, CSS and JavaScript Local Storage.
 5 | 
 6 | <br>
 7 | 
 8 | 
 9 | <img src="./img/CRUD with Pagination.png">
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | var newMemberAddBtn = document.querySelector('.addMemberBtn'),
  2 | darkBg = document.querySelector('.dark_bg'),
  3 | popupForm = document.querySelector('.popup'),
  4 | crossBtn = document.querySelector('.closeBtn'),
  5 | submitBtn = document.querySelector('.submitBtn'),
  6 |  modalTitle = document.querySelector('.modalTitle'),
  7 |  popupFooter = document.querySelector('.popupFooter'),
  8 |  imgInput = document.querySelector('.img'),
  9 |  imgHolder = document.querySelector('.imgholder')
 10 |  form = document.querySelector('form'),
 11 |  formInputFields = document.querySelectorAll('form input'),
 12 |   uploadimg = document.querySelector("#uploadimg"),
 13 |   fName = document.getElementById("fName"),
 14 |   lName = document.getElementById("lName"),
 15 |   age = document.getElementById("age"),
 16 |   city = document.getElementById("city"),
 17 |   position = document.getElementById("position"),
 18 |   salary = document.getElementById("salary"),
 19 |   sDate = document.getElementById("sDate"),
 20 |   email = document.getElementById("email"),
 21 |   phone = document.getElementById("phone"),
 22 |   entries = document.querySelector(".showEntries"),
 23 |   tabSize = document.getElementById("table_size"),
 24 |   userInfo = document.querySelector(".userInfo"),
 25 |   table = document.querySelector("table"),
 26 |   filterData = document.getElementById("search")
 27 | 
 28 | let originalData = localStorage.getItem('userProfile') ? JSON.parse(localStorage.getItem('userProfile')) : []
 29 | let getData = [...originalData]
 30 | 
 31 | 
 32 | let isEdit = false, editId
 33 | 
 34 | var arrayLength = 0
 35 | var tableSize = 10
 36 | var startIndex = 1
 37 | var endIndex = 0
 38 | var currentIndex = 1
 39 | var maxIndex = 0
 40 | 
 41 | showInfo()
 42 | 
 43 | 
 44 | newMemberAddBtn.addEventListener('click', ()=> {
 45 |     isEdit = false
 46 |     submitBtn.innerHTML = "Submit"
 47 |     modalTitle.innerHTML = "Fill the Form"
 48 |     popupFooter.style.display = "block"
 49 |     imgInput.src = "./img/pic1.png"
 50 |     darkBg.classList.add('active')
 51 |     popupForm.classList.add('active')
 52 | })
 53 | 
 54 | crossBtn.addEventListener('click', ()=>{
 55 |     darkBg.classList.remove('active')
 56 |     popupForm.classList.remove('active')
 57 |     form.reset()
 58 | })
 59 | 
 60 | uploadimg.onchange = function(){
 61 |     if(uploadimg.files[0].size < 1000000){   // 1MB = 1000000
 62 |         var fileReader = new FileReader()
 63 | 
 64 |         fileReader.onload = function(e){
 65 |             var imgUrl = e.target.result
 66 |             imgInput.src = imgUrl
 67 |         }
 68 | 
 69 |         fileReader.readAsDataURL(uploadimg.files[0])
 70 |     }
 71 | 
 72 |     else{
 73 |         alert("This file is too large!")
 74 |     }
 75 | 
 76 | }
 77 | 
 78 | function preLoadCalculations(){
 79 |     array = getData
 80 |     arrayLength = array.length
 81 |     maxIndex = arrayLength / tableSize
 82 | 
 83 |     if((arrayLength % tableSize) > 0){
 84 |         maxIndex++
 85 |     }
 86 | }
 87 | 
 88 | 
 89 | 
 90 | function displayIndexBtn(){
 91 |     preLoadCalculations()
 92 | 
 93 |     const pagination = document.querySelector('.pagination')
 94 | 
 95 |     pagination.innerHTML = ""
 96 | 
 97 |     pagination.innerHTML = '<button onclick="prev()" class="prev">Previous</button>'
 98 | 
 99 |     for(let i=1; i<=maxIndex; i++){
100 |         pagination.innerHTML += '<button onclick= "paginationBtn('+i+')" index="'+i+'">'+i+'</button>'
101 |     }
102 | 
103 |     pagination.innerHTML += '<button onclick="next()" class="next">Next</button>'
104 | 
105 |     highlightIndexBtn()
106 | }
107 | 
108 | 
109 | function highlightIndexBtn(){
110 |     startIndex = ((currentIndex - 1) * tableSize) + 1
111 |     endIndex = (startIndex + tableSize) - 1
112 | 
113 |     if(endIndex > arrayLength){
114 |         endIndex = arrayLength
115 |     }
116 | 
117 |     if(maxIndex >= 2){
118 |         var nextBtn = document.querySelector(".next")
119 |         nextBtn.classList.add("act")
120 |     }
121 | 
122 | 
123 |     entries.textContent = `Showing ${startIndex} to ${endIndex} of ${arrayLength} entries`
124 | 
125 |     var paginationBtns = document.querySelectorAll('.pagination button')
126 |     paginationBtns.forEach(btn => {
127 |         btn.classList.remove('active')
128 |         if(btn.getAttribute('index') === currentIndex.toString()){
129 |             btn.classList.add('active')
130 |         }
131 |     })
132 | 
133 | 
134 |     showInfo()
135 | }
136 | 
137 | 
138 | 
139 | 
140 | function showInfo(){
141 |     document.querySelectorAll(".employeeDetails").forEach(info => info.remove())
142 | 
143 |     var tab_start = startIndex - 1
144 |     var tab_end = endIndex
145 | 
146 |     if(getData.length > 0){
147 |         for(var i=tab_start; i<tab_end; i++){
148 |             var staff = getData[i]
149 | 
150 | 
151 |             if(staff){
152 |                 let createElement = `<tr class = "employeeDetails">
153 |                 <td>${i+1}</td>
154 |                 <td><img src="${staff.picture}" alt="" width="40" height="40"></td>
155 |                 <td>${staff.fName + " " + staff.lName}</td>
156 |                 <td>${staff.ageVal}</td>
157 |                 <td>${staff.cityVal}</td>
158 |                 <td>${staff.positionVal}</td>
159 |                 <td>${staff.salaryVal}</td>
160 |                 <td>${staff.sDateVal}</td>
161 |                 <td>${staff.emailVal}</td>
162 |                 <td>${staff.phoneVal}</td>
163 |                 <td>
164 |                     <button onclick="readInfo('${staff.picture}', '${staff.fName}', '${staff.lName}', '${staff.ageVal}', '${staff.cityVal}', '${staff.positionVal}', '${staff.salaryVal}', '${staff.sDateVal}', '${staff.emailVal}', '${staff.phoneVal}')"><i class="fa-regular fa-eye"></i></button>
165 | 
166 |                     <button onclick="editInfo('${i}', '${staff.picture}', '${staff.fName}', '${staff.lName}', '${staff.ageVal}', '${staff.cityVal}', '${staff.positionVal}', '${staff.salaryVal}', '${staff.sDateVal}', '${staff.emailVal}', '${staff.phoneVal}')"><i class="fa-regular fa-pen-to-square"></i></button>
167 | 
168 | 
169 |                     <button onclick = "deleteInfo(${i})"><i class="fa-regular fa-trash-can"></i></button>
170 |                 </td>
171 |             </tr>`
172 | 
173 |                 userInfo.innerHTML += createElement
174 |                 table.style.minWidth = "1400px"
175 |             }
176 |         }
177 |     }
178 | 
179 | 
180 |     else{
181 |         userInfo.innerHTML = `<tr class="employeeDetails"><td class="empty" colspan="11" align="center">No data available in table</td></tr>`
182 |         table.style.minWidth = "1400px"
183 |     }
184 | }
185 | 
186 | showInfo()
187 | 
188 | 
189 | function readInfo(pic, fname, lname, Age, City, Position, Salary, SDate, Email, Phone){
190 |     imgInput.src = pic
191 |     fName.value = fname
192 |     lName.value = lname
193 |     age.value = Age
194 |     city.value = City
195 |     position.value = Position
196 |     salary.value = Salary
197 |     sDate.value = SDate
198 |     email.value = Email
199 |     phone.value = Phone
200 | 
201 |     darkBg.classList.add('active')
202 |     popupForm.classList.add('active')
203 |     popupFooter.style.display = "none"
204 |     modalTitle.innerHTML = "Profile"
205 |     formInputFields.forEach(input => {
206 |         input.disabled = true
207 |     })
208 | 
209 | 
210 |     imgHolder.style.pointerEvents = "none"
211 | }
212 | 
213 | function editInfo(id, pic, fname, lname, Age, City, Position, Salary, SDate, Email, Phone){
214 |     isEdit = true
215 |     editId = id
216 | 
217 |     // Find the index of the item to edit in the original data based on id
218 |     const originalIndex = originalData.findIndex(item => item.id === id)
219 | 
220 |     // Update the original data
221 |     originalData[originalIndex] = {
222 |         id: id,
223 |         picture: pic,
224 |         fName: fname,
225 |         lName: lname,
226 |         ageVal: Age,
227 |         cityVal: City,
228 |         positionVal: Position,
229 |         salaryVal: Salary,
230 |         sDateVal: SDate,
231 |         emailVal: Email,
232 |         phoneVal: Phone
233 |     }
234 | 
235 |     imgInput.src = pic
236 |     fName.value = fname
237 |     lName.value = lname
238 |     age.value = Age
239 |     city.value = City
240 |     position.value = Position
241 |     salary.value = Salary
242 |     sDate.value = SDate
243 |     email.value = Email
244 |     phone.value = Phone
245 | 
246 | 
247 |     darkBg.classList.add('active')
248 |     popupForm.classList.add('active')
249 |     popupFooter.style.display = "block"
250 |     modalTitle.innerHTML = "Update the Form"
251 |     submitBtn.innerHTML = "Update"
252 |     formInputFields.forEach(input => {
253 |         input.disabled = false
254 |     })
255 | 
256 | 
257 |     imgHolder.style.pointerEvents = "auto"
258 | }
259 | 
260 | function deleteInfo(index){
261 |     if(confirm("Aer you sure want to delete?")){
262 |         originalData.splice(index, 1);
263 |         localStorage.setItem("userProfile", JSON.stringify(originalData));
264 |         
265 |         // Update getData after deleting the record
266 |         getData = [...originalData];
267 | 
268 |         preLoadCalculations()
269 | 
270 |         if(getData.length === 0){
271 |             currentIndex = 1
272 |             startIndex = 1
273 |             endIndex = 0
274 |         }
275 |         else if(currentIndex > maxIndex){
276 |             currentIndex = maxIndex
277 |         }
278 | 
279 |         showInfo()
280 |         highlightIndexBtn()
281 |         displayIndexBtn()
282 | 
283 |         var nextBtn = document.querySelector('.next')
284 |         var prevBtn = document.querySelector('.prev')
285 | 
286 |         if(Math.floor(maxIndex) > currentIndex){
287 |             nextBtn.classList.add("act")
288 |         }
289 |         else{
290 |             nextBtn.classList.remove("act")
291 |         }
292 | 
293 | 
294 |         if(currentIndex > 1){
295 |             prevBtn.classList.add('act')
296 |         }
297 |     }
298 | }
299 | 
300 | 
301 | form.addEventListener('submit', (e)=> {
302 |     e.preventDefault()
303 | 
304 |     const information = {
305 |         id: Date.now(),
306 |         picture: imgInput.src == undefined ? "./img/pic1.png" :imgInput.src,
307 |         fName: fName.value,
308 |         lName: lName.value,
309 |         ageVal: age.value,
310 |         cityVal: city.value,
311 |         positionVal: position.value,
312 |         salaryVal: salary.value,
313 |         sDateVal: sDate.value,
314 |         emailVal: email.value,
315 |         phoneVal: phone.value
316 |     }
317 | 
318 |     if(!isEdit){
319 |         originalData.unshift(information)
320 |     }
321 |     else{
322 |         originalData[editId] = information
323 |     }
324 |     getData = [...originalData]
325 |     localStorage.setItem('userProfile', JSON.stringify(originalData))
326 | 
327 |     submitBtn.innerHTML = "Submit"
328 |     modalTitle.innerHTML = "Fill the Form"
329 | 
330 |     darkBg.classList.remove('active')
331 |     popupForm.classList.remove('active')
332 |     form.reset()
333 | 
334 | 
335 |     highlightIndexBtn()
336 |     displayIndexBtn()
337 |     showInfo()
338 | 
339 |     var nextBtn = document.querySelector(".next")
340 |     var prevBtn = document.querySelector(".prev")
341 |     if(Math.floor(maxIndex) > currentIndex){
342 |         nextBtn.classList.add("act")
343 |     }
344 |     else{
345 |         nextBtn.classList.remove("act")
346 |     }
347 | 
348 | 
349 |     if(currentIndex > 1){
350 |         prevBtn.classList.add("act")
351 |     }
352 | })
353 | 
354 | 
355 | function next(){
356 |     var prevBtn = document.querySelector('.prev')
357 |     var nextBtn = document.querySelector('.next')
358 | 
359 |     if(currentIndex <= maxIndex - 1){
360 |         currentIndex++
361 |         prevBtn.classList.add("act")
362 | 
363 |         highlightIndexBtn()
364 |     }
365 | 
366 |     if(currentIndex > maxIndex - 1){
367 |         nextBtn.classList.remove("act")
368 |     }
369 | }
370 | 
371 | 
372 | function prev(){
373 |     var prevBtn = document.querySelector('.prev')
374 | 
375 |     if(currentIndex > 1){
376 |         currentIndex--
377 |         prevBtn.classList.add("act")
378 |         highlightIndexBtn()
379 |     }
380 | 
381 |     if(currentIndex < 2){
382 |         prevBtn.classList.remove("act")
383 |     }
384 | }
385 | 
386 | 
387 | function paginationBtn(i){
388 |     currentIndex = i
389 | 
390 |     var prevBtn = document.querySelector('.prev')
391 |     var nextBtn = document.querySelector('.next')
392 | 
393 |     highlightIndexBtn()
394 | 
395 |     if(currentIndex > maxIndex - 1){
396 |         nextBtn.classList.remove('act')
397 |     }
398 |     else{
399 |         nextBtn.classList.add("act")
400 |     }
401 | 
402 | 
403 |     if(currentIndex > 1){
404 |         prevBtn.classList.add("act")
405 |     }
406 | 
407 |     if(currentIndex < 2){
408 |         prevBtn.classList.remove("act")
409 |     }
410 | }
411 | 
412 | 
413 | 
414 | tabSize.addEventListener('change', ()=>{
415 |     var selectedValue = parseInt(tabSize.value)
416 |     tableSize = selectedValue
417 |     currentIndex = 1
418 |     startIndex = 1
419 |     displayIndexBtn()
420 | })
421 | 
422 | 
423 | 
424 | filterData.addEventListener("input", ()=> {
425 |     const searchTerm = filterData.value.toLowerCase().trim()
426 | 
427 |     if(searchTerm !== ""){
428 | 
429 |         const filteredData = originalData.filter((item) => {
430 |             const fullName = (item.fName + " " + item.lName).toLowerCase()
431 |             const city = item.cityVal.toLowerCase()
432 |             const position = item.positionVal.toLowerCase()
433 | 
434 |             return(
435 |                 fullName.includes(searchTerm) ||
436 |                 city.includes(searchTerm) ||
437 |                 position.includes(searchTerm)
438 |             )
439 |         })
440 | 
441 |         // Update the current data with filtered data
442 |         getData = filteredData
443 |     }
444 | 
445 |     else{
446 |         getData = JSON.parse(localStorage.getItem('userProfile')) || []
447 |     }
448 | 
449 | 
450 |     currentIndex = 1
451 |     startIndex = 1
452 |     displayIndexBtn()
453 | })
454 | 
455 | 
456 | displayIndexBtn()


--------------------------------------------------------------------------------
/img/CRUD with Pagination.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mohammed-Faysal/JavaScript-CURD-Operations/e4011d176f74de0b8f55e831b3b791ed8bf4a56c/img/CRUD with Pagination.png


--------------------------------------------------------------------------------
/img/pic1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mohammed-Faysal/JavaScript-CURD-Operations/e4011d176f74de0b8f55e831b3b791ed8bf4a56c/img/pic1.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 
  7 |     <!--Font Awesome CDN-->
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  9 | 
 10 |     <title>JavaScript CURD</title>
 11 |     <link rel="stylesheet" href="style.css">
 12 | </head>
 13 | <body>
 14 |     
 15 |     <div class="container">
 16 | 
 17 |         <header>
 18 | 
 19 |             <div class="filterEntries">
 20 |                 <div class="entries">
 21 |                     Show <select name="" id="table_size">
 22 |                         <option value="10">10</option>
 23 |                         <option value="20">20</option>
 24 |                         <option value="50">50</option>
 25 |                         <option value="100">100</option>
 26 |                     </select> entries
 27 |                 </div>
 28 | 
 29 |                 <div class="filter">
 30 |                     <label for="search">Search:</label>
 31 |                     <input type="search" name="" id="search" placeholder="Enter name/city/post">
 32 |                 </div>
 33 |             </div>
 34 | 
 35 |             <div class="addMemberBtn">
 36 |                 <button>New member</button>
 37 |             </div>
 38 | 
 39 |         </header>
 40 | 
 41 | 
 42 |         <table>
 43 | 
 44 |             <thead>
 45 |                 <tr class="heading">
 46 |                     <th>SL No</th>
 47 |                     <th>Picture</th>
 48 |                     <th>Full Name</th>
 49 |                     <th>Age</th>
 50 |                     <th>City</th>
 51 |                     <th>Position</th>
 52 |                     <th>Salary</th>
 53 |                     <th>Start Date</th>
 54 |                     <th>Email</th>
 55 |                     <th>Phone</th>
 56 |                     <th>Action</th>
 57 |                 </tr>
 58 |             </thead>
 59 | 
 60 | 
 61 |             <tbody class="userInfo">
 62 |                 <!-- <tr><td class="empty" colspan="11" align="center">No data available in table</td></tr> -->
 63 |                 <!-- <tr>
 64 |                     <td>1</td>
 65 |                     <td><img src="./img/pic1.png" alt="" width="40" height="40"></td>
 66 |                     <td>John Doe</td>
 67 |                     <td>30</td>
 68 |                     <td>New York</td>
 69 |                     <td>Front-End Developer</td>
 70 |                     <td>$25000</td>
 71 |                     <td>03-08-2010</td>
 72 |                     <td>jhondoe.net111@gmail.com</td>
 73 |                     <td>924157812</td>
 74 |                     <td>
 75 |                         <button><i class="fa-regular fa-eye"></i></button>
 76 |                         <button><i class="fa-regular fa-pen-to-square"></i></button>
 77 |                         <button><i class="fa-regular fa-trash-can"></i></button>
 78 |                     </td>
 79 |                 </tr>
 80 |                 <tr>
 81 |                     <td>1</td>
 82 |                     <td><img src="./img/pic1.png" alt="" width="40" height="40"></td>
 83 |                     <td>John Doe</td>
 84 |                     <td>30</td>
 85 |                     <td>New York</td>
 86 |                     <td>Front-End Developer</td>
 87 |                     <td>$25000</td>
 88 |                     <td>03-08-2010</td>
 89 |                     <td>jhondoe.net111@gmail.com</td>
 90 |                     <td>924157812</td>
 91 |                     <td>
 92 |                         <button><i class="fa-regular fa-eye"></i></button>
 93 |                         <button><i class="fa-regular fa-pen-to-square"></i></button>
 94 |                         <button><i class="fa-regular fa-trash-can"></i></button>
 95 |                     </td>
 96 |                 </tr>
 97 |                 <tr>
 98 |                     <td>1</td>
 99 |                     <td><img src="./img/pic1.png" alt="" width="40" height="40"></td>
100 |                     <td>John Doe</td>
101 |                     <td>30</td>
102 |                     <td>New York</td>
103 |                     <td>Front-End Developer</td>
104 |                     <td>$25000</td>
105 |                     <td>03-08-2010</td>
106 |                     <td>jhondoe.net111@gmail.com</td>
107 |                     <td>924157812</td>
108 |                     <td>
109 |                         <button><i class="fa-regular fa-eye"></i></button>
110 |                         <button><i class="fa-regular fa-pen-to-square"></i></button>
111 |                         <button><i class="fa-regular fa-trash-can"></i></button>
112 |                     </td>
113 |                 </tr>
114 |                 <tr>
115 |                     <td>1</td>
116 |                     <td><img src="./img/pic1.png" alt="" width="40" height="40"></td>
117 |                     <td>John Doe</td>
118 |                     <td>30</td>
119 |                     <td>New York</td>
120 |                     <td>Front-End Developer</td>
121 |                     <td>$25000</td>
122 |                     <td>03-08-2010</td>
123 |                     <td>jhondoe.net111@gmail.com</td>
124 |                     <td>924157812</td>
125 |                     <td>
126 |                         <button><i class="fa-regular fa-eye"></i></button>
127 |                         <button><i class="fa-regular fa-pen-to-square"></i></button>
128 |                         <button><i class="fa-regular fa-trash-can"></i></button>
129 |                     </td>
130 |                 </tr> -->
131 |             </tbody>
132 | 
133 |         </table>
134 | 
135 | 
136 |         <footer>
137 |             <span class="showEntries">Showing 1 to 10 of 50 entries</span>
138 |             <div class="pagination">
139 |                 <!-- <button>Prev</button>
140 |                 <button class="active">1</button>
141 |                 <button>2</button>
142 |                 <button>3</button>
143 |                 <button>4</button>
144 |                 <button>5</button>
145 |                 <button>Next</button> -->
146 |             </div>
147 |         </footer>
148 |     </div>
149 | 
150 | 
151 |     <!--Popup Form-->
152 | 
153 |     <div class="dark_bg">
154 | 
155 |         <div class="popup">
156 |              <header>
157 |                 <h2 class="modalTitle">Fill the Form</h2>
158 |                 <button class="closeBtn">&times;</button>
159 |              </header>
160 | 
161 |              <div class="body">
162 |                 <form action="#" id="myForm">
163 |                     <div class="imgholder">
164 |                         <label for="uploadimg" class="upload">
165 |                             <input type="file" name="" id="uploadimg" class="picture">
166 |                             <i class="fa-solid fa-plus"></i>
167 |                         </label>
168 |                         <img src="./img/pic1.png" alt="" width="150" height="150" class="img">
169 |                     </div>
170 | 
171 |                     <div class="inputFieldContainer">
172 | 
173 |                         <div class="nameField">
174 |                             <div class="form_control">
175 |                                 <label for="fName">First Name:</label>
176 |                                 <input type="text" name="" id="fName" required>
177 |                             </div>
178 | 
179 |                             <div class="form_control">
180 |                                 <label for="lName">Last Name:</label>
181 |                                 <input type="text" name="" id="lName" required>
182 |                             </div>
183 |                         </div>
184 | 
185 |                         <div class="ageCityField">
186 |                             <div class="form_control">
187 |                                 <label for="age">Age:</label>
188 |                                 <input type="number" name="" id="age" required>
189 |                             </div>
190 | 
191 |                             <div class="form_control">
192 |                                 <label for="city">City:</label>
193 |                                 <input type="text" name="" id="city" required>
194 |                             </div>
195 |                         </div>
196 | 
197 |                         <div class="postSalary">
198 |                             <div class="form_control">
199 |                                 <label for="position">Position:</label>
200 |                                 <input type="text" name="" id="position" required>
201 |                             </div>
202 | 
203 |                             <div class="form_control">
204 |                                 <label for="salary">Salary:</label>
205 |                                 <input type="text" name="" id="salary" required>
206 |                             </div>
207 |                         </div>
208 | 
209 |                         <div class="form_control">
210 |                             <label for="sDate">Start Date:</label>
211 |                             <input type="date" name="" id="sDate" required>
212 |                         </div>
213 | 
214 |                         <div class="form_control">
215 |                             <label for="email">Email:</label>
216 |                             <input type="email" name="" id="email" required>
217 |                         </div>
218 | 
219 |                         <div class="form_control">
220 |                             <label for="phone">Phone:</label>
221 |                             <input type="number" name="" id="phone" required>
222 |                         </div>
223 |                     </div>
224 |                 </form>
225 |              </div>
226 | 
227 |              <footer class="popupFooter">
228 |                 <button form="myForm" class="submitBtn">Submit</button>
229 |              </footer>
230 |         </div>
231 | 
232 |     </div>
233 | 
234 | 
235 |     <script src="app.js"></script>
236 | </body>
237 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Poppins:wght@100;200;300;400&display=swap');
  2 | 
  3 | 
  4 | :root{
  5 |     --dark1: #0000004d;
  6 |     --dark2: #181c20;
  7 |     --dark3: #212529;
  8 |     --dark4: #2d3135;
  9 |     --dark5: #424549;
 10 |     --dark6: #404346;
 11 |     --dark7: #9c9c9c;
 12 |     --dark8: #dae0e7;
 13 |     --dark9: #262a2e;
 14 |     --red1: #902e31;
 15 | }
 16 | 
 17 | *{
 18 |     margin: 0;
 19 |     padding: 0;
 20 |     box-sizing: border-box;
 21 |     font-family: 'Poppins', sans-serif;
 22 | }
 23 | 
 24 | body{
 25 |     display: flex;
 26 |     justify-content: center;
 27 |     align-items: flex-start;
 28 |     min-height: 100vh;
 29 |     background: linear-gradient(var(--red1) 50%, var(--dark2) 50%);
 30 | }
 31 | 
 32 | 
 33 | .container{
 34 |     padding: 20px;
 35 |     box-shadow: 3px 3px 20px var(--dark1);
 36 |     background: var(--dark3);
 37 |     border-radius: 10px;
 38 |     margin: 10px;
 39 |     margin-top: 50px;
 40 | }
 41 | 
 42 | .container header .filterEntries{
 43 |     display: flex;
 44 |     justify-content: space-between;
 45 |     align-items: center;
 46 |     margin-bottom: 20px;
 47 | }
 48 | 
 49 | .filterEntries .entries{
 50 |     color: var(--dark8);
 51 | }
 52 | 
 53 | .filterEntries .entries select, .filterEntries .filter input{
 54 |     padding: 7px 10px;
 55 |     border: 1px solid var(--dark6);
 56 |     color: var(--dark8);
 57 |     background: var(--dark4);
 58 |     border-radius: 5px;
 59 |     outline: none;
 60 |     transition: 0.3s;
 61 |     cursor: pointer;
 62 | }
 63 | 
 64 | 
 65 | .filterEntries .entries select{
 66 |     padding: 5px 10px;
 67 | }
 68 | 
 69 | .filterEntries .filter{
 70 |     display: flex;
 71 |     align-items: center;
 72 | }
 73 | 
 74 | .filter label{
 75 |     color: var(--dark8);
 76 |     margin-right: 5px;
 77 | }
 78 | 
 79 | 
 80 | .filter input:focus{
 81 |     border-color: var(--dark7);
 82 | }
 83 | 
 84 | .container header .addMemberBtn {
 85 |     margin-bottom: 15px;
 86 | }
 87 | 
 88 | header .addMemberBtn button, .popup header .closeBtn, .popup footer .submitBtn{
 89 |     padding: 9px 14px;
 90 |     color: var(--dark8);
 91 |     background: transparent;
 92 |     font-size: 16px;
 93 |     cursor: pointer;
 94 |     pointer-events: auto;
 95 |     outline: none;
 96 |     border: 1px solid var(--dark6);
 97 |     background: var(--dark4);
 98 |     border-radius: 5px;
 99 | }
100 | 
101 | .addMemberBtn button:hover{
102 |     background: var(--dark5);
103 | }
104 | 
105 | 
106 | .container table{
107 |     border-collapse: collapse;
108 |     text-align: left;
109 | }
110 | 
111 | table .heading{
112 |     background: var(--dark5);
113 |     background: transparent;
114 |     color: var(--dark8);
115 | }
116 | 
117 | table .heading th:hover{
118 |     background: var(--dark4);
119 |     transition: 0.3s;
120 | }
121 | 
122 | table tr th, table tr td{
123 |     padding:3px 15px;
124 |     color: var(--dark8);
125 |     vertical-align: middle;
126 | }
127 | 
128 | table tr th{
129 |     padding: 12px 15px;
130 | }
131 | 
132 | table tr td:nth-child(1), table tr td:nth-child(2){
133 |     text-align: center;
134 | }
135 | 
136 | table tr td img{
137 |     vertical-align: middle;
138 | }
139 | table tr:hover{
140 |     cursor: pointer;
141 |     background: var(--dark9);
142 | }
143 | 
144 | table tr td{
145 |     border-bottom: 1px solid var(--dark6);
146 | }
147 | 
148 | table tbody tr:first-child td{
149 |     border-top: 1px solid var(--dark6);
150 | }
151 | 
152 | table tbody tr:nth-child(odd){
153 |     background: var(--dark9);
154 | }
155 | 
156 | table tbody tr:nth-child(odd) > td:nth-child(3){
157 |     background: var(--dark4);
158 | }
159 | 
160 | table tr td{
161 |     font-size: 15px;
162 | }
163 | 
164 | table td button{
165 |     margin: 0 3px;
166 |     padding: 5px;
167 |     width: 35px;
168 |     background: var(--dark5);
169 |     color: var(--dark8);
170 |     font-size: 16px;
171 |     cursor: pointer;
172 |     pointer-events: auto;
173 |     outline: none;
174 |     border: 1px solid var(--dark7);
175 | }
176 | 
177 | .container footer{
178 |     margin-top: 25px;
179 |     font-size: 16px;
180 |     display: flex;
181 |     justify-content: space-between;
182 |     align-items: center;
183 | }
184 | 
185 | .container footer span{
186 |     color: var(--dark8);
187 | }
188 | 
189 | footer .pagination{
190 |     display: flex;
191 | }
192 | 
193 | 
194 | footer .pagination button{
195 |     width: 40px;
196 |     padding: 5px 0;
197 |     color: var(--dark8);
198 |     background: transparent;
199 |     font-size: 16px;
200 |     cursor: pointer;
201 |     pointer-events: auto;
202 |     outline: none;
203 |     border: 1px solid var(--dark6);
204 |     border-left: none;
205 |     margin: 0;
206 | }
207 | 
208 | .pagination button:first-child{
209 |     width: 85px;
210 |     border-top-left-radius: 5px;
211 |     border-bottom-left-radius: 5px;
212 |     border-left: 1px solid var(--dark6);
213 |     opacity: 0.6;
214 |     pointer-events: none;
215 | }
216 | 
217 | .pagination button:last-child{
218 |     width: 85px;
219 |     border-top-right-radius: 5px;
220 |     border-bottom-right-radius: 5px;
221 |     opacity: 0.6;
222 |     pointer-events: none;
223 | }
224 | 
225 | .pagination button.active, .pagination button:hover{
226 |     background: var(--red1);
227 | }
228 | 
229 | 
230 | .pagination button.act:first-child{
231 |     opacity: 1;
232 |     pointer-events: auto;
233 | }
234 | 
235 | .pagination button.act:last-child{
236 |     opacity: 1;
237 |     pointer-events: auto;
238 | }
239 | 
240 | 
241 | table tr .empty{
242 |     padding: 6px;
243 |     background: var(--dark9);
244 | }
245 | 
246 | 
247 | 
248 | /* Popup Form */
249 | 
250 | .dark_bg{
251 |     position: fixed;
252 |     top: 0;
253 |     left: 0;
254 |     width: 100%;
255 |     height: 100%;
256 |     background: rgba(0,0,0,0.6);
257 |     display: flex;
258 |     justify-content: center;
259 |     align-items: center;
260 |     opacity: 0;
261 |     visibility: hidden;
262 | }
263 | 
264 | 
265 | .popup{
266 |     border-radius: 5px;
267 |     box-shadow: 3px 3px 20px rgba(0,0,0,0.3);
268 |     background: var(--dark6);
269 |     transition: 0.4s;
270 |     user-select: none;
271 |     transform: scale(0.7);
272 |     opacity: 0;
273 |     visibility: hidden;
274 | }
275 | 
276 | .popup header{
277 |     display: flex;
278 |     justify-content: space-between;
279 |     align-items: center;
280 |     border-bottom: 1px solid var(--dark7);
281 |     padding: 10px 20px;
282 | }
283 | 
284 | .popup header .closeBtn{
285 |     font-size: 30px;
286 |     font-weight: 300;
287 |     padding: 0 15px;
288 | }
289 | 
290 | .popup header .closeBtn:hover, .popup footer .submitBtn:hover{
291 |     border-color: var(--dark7);
292 |     transition: 0.3s;
293 | }
294 | 
295 | .popup footer{
296 |     border-top: 1px solid var(--dark7);
297 |     padding: 12px 20px;
298 |     text-align: right;
299 | }
300 | 
301 | .popup form{
302 |     padding: 10px 20px;
303 |     display: flex;
304 |     align-items: flex-start;
305 | }
306 | 
307 | .popup .imgholder{
308 |     width: 150px;
309 |     height: 150px;
310 |     box-shadow: 0 0 5px rgba(0,0,0,0.5);
311 |     border-radius: 8px;
312 |     overflow: hidden;
313 |     position: relative;
314 |     margin-right: 50px;
315 |     margin-top: 15px;
316 | }
317 | 
318 | .popup .imgholder .upload{
319 |     position: absolute;
320 |     bottom: 0;
321 |     left: 0;
322 |     width: 100%;
323 |     height: 80px;
324 |     background: rgba(0,0,0,0.3);
325 |     justify-content: center;
326 |     align-items: center;
327 |     z-index: 1;
328 |     cursor: pointer;
329 |     display: none;
330 | }
331 | 
332 | .imgholder:hover .upload{
333 |     display: flex;
334 | }
335 | 
336 | .imgholder .upload input{
337 |     display: none;
338 | }
339 | 
340 | .imgholder .upload i{
341 |     color: #fff;
342 |     font-size: 35px;
343 |     font-weight: 300;
344 | }
345 | 
346 | .imgholder .img{
347 |     width: 100%;
348 |     height: 100%;
349 | }
350 | 
351 | form .inputFieldContainer .nameField,
352 | form .inputFieldContainer .ageCityField,
353 | form .inputFieldContainer .postSalary{
354 |     display: flex;
355 |     justify-content: space-between;
356 |     gap: 15px;
357 | }
358 | 
359 | form .inputFieldContainer .nameField input,
360 | form .inputFieldContainer .ageCityField input,
361 | form .inputFieldContainer .postSalary input{
362 |     width: 200px;
363 | }
364 | 
365 | .inputFieldContainer .form_control{
366 |     margin: 10px 0;
367 | }
368 | 
369 | .inputFieldContainer .form_control label{
370 |     display: block;
371 |     color: var(--dark8);
372 |     margin-bottom: 5px;
373 | }
374 | 
375 | .form_control input{
376 |     padding: 10px;
377 |     border: 1px solid var(--dark6);
378 |     color: var(--dark8);
379 |     background: var(--dark4);
380 |     border-radius: 5px;
381 |     outline: none;
382 |     transition: 0.3s;
383 |     width: 100%;
384 | }
385 | 
386 | .form_control input:focus,
387 | .form_control input:valid{
388 |     border-color: var(--dark7);
389 | }
390 | 
391 | input::-webkit-inner-spin-button,
392 | input::-webkit-outer-spin-button{
393 |     display: none;
394 | }
395 | 
396 | 
397 | .active{
398 |     transform: scale(1);
399 |     opacity: 1;
400 |     visibility: visible;
401 | }


--------------------------------------------------------------------------------