update search

Author: anhtuanlee

assignment-1/index.html

@@ -113,15 +113,21 @@ <h3>
           <div class="item_form_add">
             <label for="topic">Topic</label>
             <select required id=" topic" name="topic">
-              <option>
-                Programing
-              </option>
-              <option>
-                Database
-              </option>
-              <option>
-                DevOps
-              </option>
+              <div>
+                <option>
+                  Programing
+                </option>
+              </div>
+              <div>
+                <option>
+                  Database
+                </option>
+              </div>
+              <div>
+                <option>
+                  DevOps
+                </option>
+              </div>
             </select>
           </div>
 

assignment-1/script.js

@@ -89,25 +89,28 @@ function App() {
         node.innerHTML = html
         return node
     }
+    function handleCheckInputSearch() {
+        if (inputSearch.value.trim() !== '') {
+            const dataFilter = dataBooks.filter(item => item.name.toLowerCase().includes(inputSearch.value.toLowerCase()))
+            handleRenderDataTable(dataFilter)
+        } else {
+            handleRenderDataTable(dataBooks)
+        }
+    }
     function handleDelBook(idBook, dataBook) {
         const newData = dataBooks.filter((data, index) => data.name !== dataBook.name)
         dataBooks = [...newData]
-        handleRenderDataTable(newData)
+        handleCheckInputSearch()
         handleCloseModalDelBook()
     }
+
     function handleAddBook(e) {
         e.preventDefault()
         const data = Object.fromEntries(new FormData(e.target).entries());
         if (checkIsHaveData(data)) {
             dataBooks.push(data)
             document.querySelectorAll('input:not(.input_search)').forEach(item => item.value = '') // reset value input 
-            if (inputSearch.value.trim() === '') {
-                handleRenderDataTable(dataBooks)
-            } else {
-                const dataFilter = dataBooks.filter(item => item.name.toLowerCase().includes(inputSearch.value))
-                handleRenderDataTable(dataFilter)
-
-            }
+            handleCheckInputSearch()
             handleToggleModalAddBook()
         } else {
             alert('Vui Long Nhap Day Du')
@@ -134,7 +137,7 @@ function App() {
     }
 
     function handleRenderDataTable(data) {
-        localStorage.setItem('databook', JSON.stringify(data))
+        localStorage.setItem('databook', JSON.stringify(dataBooks))
         let dataTable = data?.map((data, index) => {
             return ` 
             <tr>
@@ -163,7 +166,6 @@ function App() {
             )
         })
 
-        console.log(btnRemoves)
     }
 
 

assignment-1/style.css

@@ -26,15 +26,20 @@ button {
 }
 
 input,
+option,
 select {
   padding: 15px 30px;
   border-radius: 4px;
   outline: none;
   border: 2px solid #606060;
   margin: 5px 0;
   width: 100%;
+  font-size: 16px;
+  font-weight: 600;
 }
 
+select {}
+
 ::placeholder {
   font-size: 16px;
   font-weight: 600;