From f06c113c68fcfa10f2f5e5404b613e1bc7103b39 Mon Sep 17 00:00:00 2001
From: Areeb Nadir <areebnadir0@gmail.com>
Date: Sat, 9 Aug 2025 06:49:44 +0500
Subject: [PATCH 1/4] Added Dynamic data functionately

---
 edit.html  |  61 ++++++++++++++++++++++-
 index.html | 122 ++++++++++++++++++++++++++++++++++++++++-----
 main.js    |  92 ++++++++++++++++++++++++++--------
 script.js  | 144 ++++++++++++++++++++++++++++++++++-------------------
 4 files changed, 334 insertions(+), 85 deletions(-)
diff --git a/edit.html b/edit.html
index 6062db1..049ff96 100644
--- a/edit.html
+++ b/edit.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>EDITs</title>
+    <title>Committee | Edit</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
     <style>
         body {
@@ -107,6 +107,13 @@
     <div class="glass-container">
         <a href="index.html">← Back</a> 
         <h1 id="show"></h1>
+        <!-- User management section -->
+        <div style="margin-bottom: 18px;">
+            <label style="font-weight:600;">Users:</label>
+            <ul id="userList" style="padding-left:18px; margin:8px 0;"></ul>
+            <input type="text" id="newUserInput" placeholder="Add user name" style="border-radius:8px; padding:6px 10px; border:1px solid #ccc; font-size:1em;">
+            <button id="addUserBtn">Add User</button>
+        </div>
         <button id="showData">Show Data of Local Storage</button>
         <div style="margin-bottom: 10px;">
             <button id="editBasic">Edit Basic Value</button>
@@ -191,8 +198,60 @@ <h1 id="show"></h1>
                 localStorage.clear();
                 alert("All data cleared from localStorage.");
                 document.getElementById('show').innerText = "";
+                userList.innerHTML = "";
             }
         });
+
+        // --- User management logic ---
+        function getUsers() {
+            // Remove default value, return empty array if not set
+            return JSON.parse(localStorage.getItem('users') || '[]');
+        }
+        function setUsers(users) {
+            localStorage.setItem('users', JSON.stringify(users));
+            window.dispatchEvent(new Event('storage')); // Notify other tabs/pages
+        }
+        function renderUserList() {
+            const users = getUsers();
+            const ul = document.getElementById('userList');
+            ul.innerHTML = '';
+            users.forEach((user, idx) => {
+                const li = document.createElement('li');
+                li.style.marginBottom = '4px';
+                li.textContent = user + ' ';
+                // Remove button (only if more than 1 user)
+                if (users.length > 1) {
+                    const rmBtn = document.createElement('button');
+                    rmBtn.textContent = 'Remove';
+                    rmBtn.style.fontSize = '0.9em';
+                    rmBtn.style.marginLeft = '8px';
+                    rmBtn.onclick = function() {
+                        users.splice(idx, 1);
+                        setUsers(users);
+                        renderUserList();
+                    };
+                    li.appendChild(rmBtn);
+                }
+                ul.appendChild(li);
+            });
+        }
+        document.getElementById('addUserBtn').onclick = function() {
+            const input = document.getElementById('newUserInput');
+            let val = input.value.trim();
+            if (val) {
+                let users = getUsers();
+                if (!users.includes(val)) {
+                    users.push(val);
+                    setUsers(users);
+                    renderUserList();
+                    input.value = '';
+                } else {
+                    alert('User already exists.');
+                }
+            }
+        };
+        // Initial render
+        renderUserList();
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 882d1f1..c6d3be2 100644
--- a/index.html
+++ b/index.html
@@ -4,32 +4,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <title>Doc</title>
+    <title>Committee | Home</title>
 </head>
 <body>
     <a href="edit.html">Go to Edit page</a>
     <div id="total">
     <table class="table">
     <thead>
-        <tr>
-            <th>Areeb Total</th>
-            <th>Hania Total</th>
+        <tr id="totalHeaderRow">
+            <!-- Dynamic user total headers will be inserted here -->
         </tr>
     </thead>
     <tbody >
-     <tr >
-        <td id="totalRowAreeb">*</td>
-            <td id="totalRowHania">*</td>
-        </tr>
+     <tr id="totalRow">
+        <!-- Dynamic user total values will be inserted here -->
+     </tr>
     </tbody>
  </table>
 </div>
  <table class="table" id="table" >
     <thead>
-        <tr>
+        <tr id="userHeaderRow">
             <th>Date</th>
-            <th>Areeb</th>
-            <th>Hania</th>
+            <!-- Dynamic user headers will be inserted here -->
         </tr>
     </thead>
     <tbody id="tableBody">
@@ -42,6 +39,107 @@
  </div>
 
  <script src="main.js"></script>
-    <script src="script.js"></script>
+ <script src="script.js"></script>
+ <script>
+ function renderUserHeadersAndTotals() {
+    const users = JSON.parse(localStorage.getItem('users') || '[]');
+    const userHeaderRow = document.getElementById('userHeaderRow');
+    userHeaderRow.innerHTML = '<th>Date</th>' + users.map(u => `<th>${u}</th>`).join('');
+    const totalHeaderRow = document.getElementById('totalHeaderRow');
+    totalHeaderRow.innerHTML = users.map(u => `<th>${u} Total</th>`).join('');
+    const totalRow = document.getElementById('totalRow');
+    totalRow.innerHTML = users.map((u, i) => `<td id="totalRowUser${i}">*</td>`).join('');
+ }
+ renderUserHeadersAndTotals();
+
+ // Prevent adding rows if no users exist
+ document.addEventListener('DOMContentLoaded', function() {
+    const tableBody = document.getElementById('tableBody');
+    const addRowBtn = document.getElementById('addRow');
+    addRowBtn.addEventListener('click', function(e) {
+        const users = JSON.parse(localStorage.getItem('users') || '[]');
+        if (!users.length) {
+            alert('Please add at least one user in the Edit page before adding rows.');
+            e.stopImmediatePropagation();
+            return false;
+        }
+    }, true);
+ });
+
+ // Helper to reload table UI after row deletion
+ function reloadTableUI() {
+    if (window.loadTableFromLS) {
+        window.loadTableFromLS();
+    } else if (typeof loadTableFromLS === 'function') {
+        loadTableFromLS();
+    } else {
+        location.reload(); 
+    }
+ }
+
+ // Remove Row: Select row, then confirm with random 3-letter code, and update localStorage/UI-
+
+ document.addEventListener('DOMContentLoaded', function() {
+    const removeRowBtn = document.getElementById('removeRow');
+    let rowSelectorDiv = null;
+
+    removeRowBtn.addEventListener('click', function(e) {
+        const tableBody = document.getElementById('tableBody');
+        if (!tableBody.rows.length) {
+            alert('No rows to remove.');
+            return;
+        }
+        if (rowSelectorDiv && rowSelectorDiv.parentNode) {
+            rowSelectorDiv.parentNode.removeChild(rowSelectorDiv);
+        }
+        rowSelectorDiv = document.createElement('div');
+        rowSelectorDiv.style.position = 'fixed';
+        rowSelectorDiv.style.top = '50%';
+        rowSelectorDiv.style.left = '50%';
+        rowSelectorDiv.style.transform = 'translate(-50%, -50%)';
+        rowSelectorDiv.style.background = '#fff';
+        rowSelectorDiv.style.padding = '18px 24px';
+        rowSelectorDiv.style.border = '2px solid #6a82fb';
+        rowSelectorDiv.style.borderRadius = '12px';
+        rowSelectorDiv.style.boxShadow = '0 4px 24px rgba(31,38,135,0.13)';
+        rowSelectorDiv.style.zIndex = '9999';
+        rowSelectorDiv.innerHTML = '<b>Select a row to remove:</b><br><br>';
+        for (let i = 0; i < tableBody.rows.length; i++) {
+            const row = tableBody.rows[i];
+            const btn = document.createElement('button');
+            btn.textContent = `Row ${i + 1} (${row.cells[0]?.textContent || ''})`;
+            btn.style.margin = '4px 0';
+            btn.onclick = function() {
+                const code = Array(3).fill(0).map(() => String.fromCharCode(97 + Math.floor(Math.random() * 26))).join('');
+                const input = prompt(`Type the following 3 small letters to confirm deletion:\n${code}`);
+                if (input === code) {
+                    let data = JSON.parse(localStorage.getItem('tableData') || '[]');
+                    data.splice(i, 1);
+                    localStorage.setItem('tableData', JSON.stringify(data));
+                    reloadTableUI();
+                    alert('Row deleted.');
+                } else {
+                    alert('Incorrect code. Row not deleted.');
+                }
+                if (rowSelectorDiv && rowSelectorDiv.parentNode) {
+                    rowSelectorDiv.parentNode.removeChild(rowSelectorDiv);
+                }
+            };
+            rowSelectorDiv.appendChild(btn);
+            rowSelectorDiv.appendChild(document.createElement('br'));
+        }
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = 'Cancel';
+        cancelBtn.style.marginTop = '10px';
+        cancelBtn.onclick = function() {
+            if (rowSelectorDiv && rowSelectorDiv.parentNode) {
+                rowSelectorDiv.parentNode.removeChild(rowSelectorDiv);
+            }
+        };
+        rowSelectorDiv.appendChild(cancelBtn);
+        document.body.appendChild(rowSelectorDiv);
+    });
+ });
+ </script> 
 </body>
 </html>
\ No newline at end of file
diff --git a/main.js b/main.js
index b3e2117..97cfcf2 100644
--- a/main.js
+++ b/main.js
@@ -3,32 +3,80 @@ if(!localStorage.getItem('basicValue')) {
   let val=  prompt("Enter a value:");
     localStorage.setItem('basicValue',val );
     console.log("Local storage initialized.");
+} 
+function getUsers() {
+    return JSON.parse(localStorage.getItem('users') || '[]');
 }
+
 function doTotal() {
-    
-    let tableData = localStorage.getItem('tableData')|| 'No table data found in localStorage.'
-    tableData= JSON.parse(tableData);
-console.log(tableData);
+    const users = getUsers();
+    const data = JSON.parse(localStorage.getItem('tableData') || '[]');
+    const totals = Array(users.length).fill(0);
 
-tableData.forEach(row => {
-    console.log(row);
-});
+    data.forEach(row => {
+        users.forEach((user, idx) => {
+            if (
+                row.users &&
+                row.users[user] 
+            ) {
+             
+                const doneVal = row.users[user].done;
+              
+                if (
+                    (doneVal === true || doneVal === "true") 
+                ) {
+                   
+                    totals[idx] += Number(row.users[user].value);
+                }
+            }
+        });
+    });
 
-if (Array.isArray(tableData)) {
-    let areebSum = 0;
-    let haniaSum = 0;
-    tableData.forEach(row => {
-        if (row.areeb && row.areeb.done) {
-            areebSum += Number(row.areeb.value) || 0;
-        }
-        if (row.hania && row.hania.done) {
-            haniaSum += Number(row.hania.value) || 0;
-        }
+    users.forEach((user, idx) => {
+        const td = document.getElementById(`totalRowUser${idx}`);
+        if (td) td.textContent = totals[idx];
     });
-    console.log("Areeb:", areebSum);
-    console.log("Hania:", haniaSum);
-    totalRowAreeb.textContent = areebSum;
-    totalRowHania.textContent = haniaSum;
 }
+
+function renderUserHeadersAndTotals() {
+    const users = JSON.parse(localStorage.getItem('users') || '[]');
+    // Table headers
+    const userHeaderRow = document.getElementById('userHeaderRow');
+    if (userHeaderRow) {
+        userHeaderRow.innerHTML = '<th>Date</th>' + users.map(u => `<th>${u}</th>`).join('');
+    }
+    // Total headers 
+    const totalHeaderRow = document.getElementById('totalHeaderRow');
+    if (totalHeaderRow) {
+        totalHeaderRow.innerHTML = users.map(u => `<th>${u} Total</th>`).join('');
+    }
+    // Total values
+    const totalRow = document.getElementById('totalRow');
+    if (totalRow) {
+        const data = JSON.parse(localStorage.getItem('tableData') || '[]');
+        let sumArr=[];
+        const totals = users.map(user => {
+            let sum = 0;
+            data.forEach(row => {
+                if (
+                    row.users &&
+                    row.users[user] &&
+                    (row.users[user].done === true || row.users[user].done === "true") &&
+                    !isNaN(Number(row.users[user].value)) &&
+                    row.users[user].value !== ""
+                ) {
+                    sum += Number(row.users[user].value);
+                }
+            }); 
+            sumArr.push(sum);
+            return sum;
+        });
+        totalRow.innerHTML = users.map((u, i) => { return `<td id="totalRowUser${i}">45</td>` }).join('');
+
+    }
 }
-doTotal();
\ No newline at end of file
+// Ensure headers are rendered on page load
+document.addEventListener('DOMContentLoaded', function() {
+    renderUserHeadersAndTotals();
+    doTotal();
+});
\ No newline at end of file
diff --git a/script.js b/script.js
index 959536e..d5aab49 100644
--- a/script.js
+++ b/script.js
@@ -1,58 +1,68 @@
 console.log("Running script.js");
 
-
 document.addEventListener('DOMContentLoaded', function() {
     const tableBody = document.getElementById('tableBody');
     const addRowBtn = document.getElementById('addRow');
     const removeRowBtn = document.getElementById('removeRow');
 
+    // Get users from localStorage or default
+    function getUsers() {
+        return JSON.parse(localStorage.getItem('users') || '["Areeb","Hania"]');
+    }
+
     // Helper: Save table data to localStorage
     function saveTableToLS() {
+        const users = getUsers();
         const data = [];
         for (const row of tableBody.rows) {
             const date = row.cells[0].textContent;
-            const areeb = {
-                value: row.cells[1].querySelector('span').textContent,
-                done: row.cells[1].querySelector('button').classList.contains('done')
-            };
-            const hania = {
-                value: row.cells[2].querySelector('span').textContent,
-                done: row.cells[2].querySelector('button').classList.contains('done')
-            };
-            data.push({ date, areeb, hania });
+            const userData = {};
+            users.forEach((user, idx) => {
+                const cell = row.cells[idx + 1];
+                userData[user] = {
+                    value: cell.querySelector('span').textContent,
+                    done: cell.querySelector('button').classList.contains('done')
+                };
+            });
+            data.push({ date, users: userData });
         }
         localStorage.setItem('tableData', JSON.stringify(data));
-        console.log('Table data saved to localStorage:', data);
+        // console.log('Table data saved to localStorage:', data);
+        console.log("SAVED")
     }
 
     // Helper: Load table data from localStorage
     function loadTableFromLS() {
+        const users = getUsers();
         const data = JSON.parse(localStorage.getItem('tableData') || '[]');
         tableBody.innerHTML = '';
         data.forEach(row => {
             const tr = document.createElement('tr');
-            tr.innerHTML = `
-                <td>${row.date}</td>
-                <td>
-                    <span class="${row.areeb.done ? 'green' : 'red'}">${row.areeb.value}</span>
-                    <button class="done-btn${row.areeb.done ? ' done' : ''}">${row.areeb.done ? 'Completed' : 'Done'}</button>
-                </td>
-                <td>
-                    <span class="${row.hania.done ? 'green' : 'red'}">${row.hania.value}</span>
-                    <button class="done-btn${row.hania.done ? ' done' : ''}">${row.hania.done ? 'Completed' : 'Done'}</button>
-                </td>
-            `;
+            let tds = `<td>${row.date}</td>`;
+            users.forEach(user => {
+                const u = row.users && row.users[user] ? row.users[user] : { value: localStorage.getItem('basicValue') || '0', done: false };
+                tds += `
+                    <td>
+                        <span class="${u.done ? 'green' : 'red'}">${u.value}</span>
+                        <button class="done-btn${u.done ? ' done' : ''}">${u.done ? 'Completed' : 'Done'}</button>
+                    </td>
+                `;
+            });
+            tr.innerHTML = tds;
             tableBody.appendChild(tr);
         });
-        console.log('Table data loaded from localStorage:', data);
+        // console.log('Table data loaded from localStorage:', data);
+        console.log("Saved!")
+        doTotal();
     }
 
+
     // Initial load
     loadTableFromLS();
 
     // Add Row
     addRowBtn.addEventListener('click', function() {
-        // Create a visible date input for calendar selection
+        const users = getUsers();
         let dateInput = document.createElement('input');
         dateInput.type = 'date';
         dateInput.style.position = 'fixed';
@@ -70,7 +80,10 @@ document.addEventListener('DOMContentLoaded', function() {
         document.body.appendChild(dateInput);
         dateInput.focus();
 
+        let cleaned = false;
         function cleanup() {
+            if (cleaned) return;
+            cleaned = true;
             if (dateInput && dateInput.parentNode) {
                 document.body.removeChild(dateInput);
             }
@@ -82,17 +95,16 @@ document.addEventListener('DOMContentLoaded', function() {
                 : new Date().toLocaleDateString('en-GB');
             const basicValue = localStorage.getItem('basicValue') || '0';
             const newRow = document.createElement('tr');
-            newRow.innerHTML = `
-                <td>${selectedDate}</td>
-                <td>
-                    <span class="red">${basicValue}</span>
-                    <button class="done-btn">Done</button>
-                </td>
-                <td>
-                    <span class="red">${basicValue}</span>
-                    <button class="done-btn">Done</button>
-                </td>
-            `;
+            let tds = `<td>${selectedDate}</td>`;
+            users.forEach(() => {
+                tds += `
+                    <td>
+                        <span class="red">${basicValue}</span>
+                        <button class="done-btn">Done</button>
+                    </td>
+                `;
+            });
+            newRow.innerHTML = tds;
             tableBody.appendChild(newRow);
             saveTableToLS();
             doTotal();
@@ -104,32 +116,31 @@ document.addEventListener('DOMContentLoaded', function() {
         });
 
         dateInput.addEventListener('blur', function handler() {
-            // If no date picked, fallback to today
             if (!dateInput.value) {
                 addRowWithDate('');
             }
-            cleanup();
+            // Use setTimeout to avoid double-remove in case blur and change fire together
+            setTimeout(cleanup, 10);
         });
 
-        // Open the calendar
-        dateInput.showPicker && dateInput.showPicker(); // for browsers that support showPicker
+        dateInput.showPicker && dateInput.showPicker();
         dateInput.focus();
     });
 
-    // Remove Row
-    removeRowBtn.addEventListener('click', function() {
-        if (tableBody.rows.length > 0) {
-            tableBody.deleteRow(tableBody.rows.length - 1);
-            saveTableToLS();
-            doTotal();
-        }
-    });
+    // Remove Row - handled in index.html with row selection and confirmation
+    // Remove this default delete-last-row logic to prevent accidental deletion
+    // removeRowBtn.addEventListener('click', function() {
+    //     if (tableBody.rows.length > 0) {
+    //         tableBody.deleteRow(tableBody.rows.length - 1);
+    //         saveTableToLS();
+    //         doTotal();
+    //     }
+    // });
 
     // Mark as Done
     tableBody.addEventListener('click', function(e) {
         if (e.target.classList.contains('done-btn')) {
             const btn = e.target;
-            // Support both <p> and <span>
             let valueElem = btn.parentElement.querySelector('span') || btn.parentElement.querySelector('p');
             if (!btn.classList.contains('done')) {
                 btn.classList.add('done');
@@ -138,7 +149,6 @@ document.addEventListener('DOMContentLoaded', function() {
                     valueElem.classList.remove('red');
                     valueElem.classList.add('green');
                 }
-                console.log('Marked as completed:', btn.parentElement.parentElement.rowIndex, btn.parentElement.cellIndex);
             } else {
                 btn.classList.remove('done');
                 btn.textContent = 'Done';
@@ -146,10 +156,44 @@ document.addEventListener('DOMContentLoaded', function() {
                     valueElem.classList.remove('green');
                     valueElem.classList.add('red');
                 }
-                console.log('Marked as not completed:', btn.parentElement.parentElement.rowIndex, btn.parentElement.cellIndex);
             }
             saveTableToLS();
             doTotal();
         }
     });
+
+    // Listen for user changes (e.g., after editing users in edit.html)
+    window.addEventListener('storage', function(e) {
+        if (e.key === 'users') {
+            // When users are changed, update table structure
+            updateTableForNewUsers();
+            loadTableFromLS();
+        }
+    });
+
+    // Update table data structure if users are added/removed
+    function updateTableForNewUsers() {
+        const users = getUsers();
+        let data = JSON.parse(localStorage.getItem('tableData') || '[]');
+        let changed = false;
+        data.forEach(row => {
+            if (!row.users) row.users = {};
+            users.forEach(user => {
+                if (!(user in row.users)) {
+                    row.users[user] = { value: '', done: false };
+                    changed = true;
+                }
+            });
+            // Remove users that no longer exist
+            Object.keys(row.users).forEach(user => {
+                if (!users.includes(user)) {
+                    delete row.users[user];
+                    changed = true;
+                }
+            });
+        });
+        if (changed) {
+            localStorage.setItem('tableData', JSON.stringify(data));
+        }
+    }
 });
\ No newline at end of file

From 1b4c4cc80e61cc4b70dac75e20fb0ad191230a26 Mon Sep 17 00:00:00 2001
From: Areeb Nadir <areebnadir0@gmail.com>
Date: Fri, 15 Aug 2025 05:47:49 +0500
Subject: [PATCH 2/4] add gitignore

---
 .gitignore | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..845341e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Nestjs specific
+/dist
+/node_modules
+/build
+/tmp
+
+# Logs
+logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# dotenv environment variable files
+.env
+.env.development
+.env.test
+.env.production
+
+# temp directory
+.temp
+.tmp

From ea68769d38b85c5b77ef551d745ceaa395fd5d32 Mon Sep 17 00:00:00 2001
From: Areeb Nadir <areebnadir0@gmail.com>
Date: Fri, 15 Aug 2025 06:54:03 +0500
Subject: [PATCH 3/4] remove gitignore file

---
 .gitignore | 24 ------------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 845341e..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Nestjs specific
-/dist
-/node_modules
-/build
-/tmp
-
-# Logs
-logs
-*.log
-npm-debug.log*
-pnpm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# dotenv environment variable files
-.env
-.env.development
-.env.test
-.env.production
-
-# temp directory
-.temp
-.tmp

From 6980a8efc2b3b9cdcc239bc164ef28f2f6756452 Mon Sep 17 00:00:00 2001
From: Areeb Nadir <areebnadir0@gmail.com>
Date: Fri, 15 Aug 2025 07:25:48 +0500
Subject: [PATCH 4/4] added uncomplete ask feature

---
 script.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/script.js b/script.js
index d5aab49..e6da36f 100644
--- a/script.js
+++ b/script.js
@@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Get users from localStorage or default
     function getUsers() {
-        return JSON.parse(localStorage.getItem('users') || '["Areeb","Hania"]');
+        return JSON.parse(localStorage.getItem('users') );
     }
 
     // Helper: Save table data to localStorage
@@ -150,11 +150,14 @@ document.addEventListener('DOMContentLoaded', function() {
                     valueElem.classList.add('green');
                 }
             } else {
-                btn.classList.remove('done');
-                btn.textContent = 'Done';
-                if (valueElem) {
-                    valueElem.classList.remove('green');
-                    valueElem.classList.add('red');
+                let ask = confirm("Are you sure you want to mark this task as not done?");
+                if (ask) {
+                    btn.classList.remove('done');
+                    btn.textContent = 'Done';
+                    if (valueElem) {
+                        valueElem.classList.remove('green');
+                        valueElem.classList.add('red');
+                    }
                 }
             }
             saveTableToLS();
