Update empty message display logic

navinAce · Sep 26, 2024 · eac1bdc · eac1bdc
1 parent 0a28fd7
commit eac1bdc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -50,7 +50,12 @@ <h1>Chemical Supplies</h1>
                     </tr>
                 </thead>
                 <tbody id="tableData">
-                <tbody>
+                    <tr id="emptyMessageRow">
+                        <td colspan="10" style="text-align: center; color: #888;">
+                            Add chemicals data to see them listed here.
+                        </td>
+                    </tr>
+                </tbody>
             </table>
 
             <!-- Add new chemical form -->

diff --git a/script.js b/script.js
@@ -155,6 +155,7 @@ function addItemForm() {
 function addNewChemical(newChemical) {
 
   chemicals.push(newChemical);
+  updateEmptyMessage();
   appendChemicalToTable(newChemical,chemicals.length - 1);
 }
 
@@ -199,13 +200,19 @@ function deleteSelectedChemicals() {
     tableBody.deleteRow(index); 
   });
   rebuildTable();
+  updateEmptyMessage();
 }
 
 // Rebuild the table to ensure the IDs and checkboxes remain accurate
 
 function rebuildTable() {
   const tableBody = document.querySelector("#tableData");
-  tableBody.innerHTML = ""; 
+  tableBody.innerHTML = `
+        <tr id="emptyMessageRow" style="display: none;">
+            <td colspan="10" style="text-align: center; color: #888;">
+                Add chemicals data to see them listed here.
+            </td>
+        </tr>`; 
 
   chemicals.forEach((chemical, index) => {
     appendChemicalToTable(chemical, index);
@@ -255,4 +262,14 @@ function sortChemicalsByName(isAscending) {
 
 document.querySelector("#refreshAll").addEventListener("click", function () {
   location.reload();
-})
+})
+
+// empty message
+
+function updateEmptyMessage() {
+  const emptyMessageRow = document.getElementById('emptyMessageRow');
+
+  if (emptyMessageRow) {
+      emptyMessageRow.style.display = chemicals.length === 0 ? 'table-row' : 'none'; 
+  }
+}
diff --git a/styles.css b/styles.css
@@ -23,7 +23,6 @@ h1{
 
 .table-wrapper{
     margin: 10px 70px 70px;
-
 }
 
 .fl-table {
@@ -68,6 +67,7 @@ h1{
     .fl-table {
         display: block;
         width: 100%;
+        min-height: 600px;
     }
     h1{
         font-size: 23px;
@@ -213,3 +213,15 @@ th:nth-child(3):hover::after {
     opacity: 1; 
 }
 
+/*                   Styles for the empty message row                               */
+#emptyMessageRow {
+    display: none; 
+    background-color: #f9f9f9; 
+    color: #888; 
+    font-size: 16px; 
+    text-align: center; 
+    height: 50px; 
+}
+
+
+