simonw/delete-icon.md Secret

## delete-icon.md

      
    Raw
  

              delete-icon.md
            
          
    Add Delete Icon to Table Rows

human (Aug 30, 2024, 08:05 AM)
Pasted https://github.com/simonw/tools/blob/a678b50d01b8221478a5cd05ae1cf0b43180daa7/pomodoro.html
Add a delete icon next to each row in the table that deletes the row, including from localStorage
assistant (Aug 30, 2024, 08:05 AM)
Certainly! I'll modify the HTML and JavaScript code to add a delete icon next to each row in the table, allowing users to delete individual session entries. This change will also remove the deleted entry from localStorage.
Pomodoro Timer with Delete Functionality

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro Timer</title>
    <style>
        /* ... (previous styles remain unchanged) ... */
        .deleteBtn {
            background-color: transparent;
            border: none;
            color: #f44336;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 0.2rem 0.5rem;
        }
        .deleteBtn:hover {
            color: #da190b;
        }
    </style>
</head>
<body>
    <!-- ... (previous HTML content remains unchanged) ... -->

    <div id="sessionLog">
        <h2>Session Log</h2>
        <table>
            <thead>
                <tr>
                    <th>Goal</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th>Duration</th>
                    <th>Pauses</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="sessionLogBody"></tbody>
        </table>
    </div>

    <!-- ... (remaining HTML content remains unchanged) ... -->

    <script>
        // ... (previous JavaScript code remains unchanged) ...

        function updateSessionLog() {
            sessionLogBody.innerHTML = '';
            sessions.forEach((session, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${session.goal}</td>
                    <td>${formatDate(session.startTime)}</td>
                    <td>${session.endTime ? formatDate(session.endTime) : 'In progress'}</td>
                    <td>${formatDuration(session.duration)}</td>
                    <td>${formatPauses(session.pauses)}</td>
                    <td><button class="deleteBtn" data-index="${index}">❌</button></td>
                `;
                sessionLogBody.appendChild(row);
            });
            jsonOutput.value = JSON.stringify(sessions, null, 2);

            // Add event listeners to delete buttons
            document.querySelectorAll('.deleteBtn').forEach(btn => {
                btn.addEventListener('click', deleteSession);
            });
        }

        function deleteSession(event) {
            const index = parseInt(event.target.getAttribute('data-index'));
            sessions.splice(index, 1);
            updateSessionLog();
            saveSessions();
        }

        // ... (remaining JavaScript code remains unchanged) ...
    </script>
</body>
</html>
I've made the following changes to add the delete functionality:


Added a new CSS style for the delete button:
.deleteBtn {
    background-color: transparent;
    border: none;
    color: #f44336;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.2rem 0.5rem;
}
.deleteBtn:hover {
    color: #da190b;
}


Added a new column "Action" to the table header.


Modified the updateSessionLog function to include a delete button for each row:
function updateSessionLog() {
    sessionLogBody.innerHTML = '';
    sessions.forEach((session, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <!-- ... other cells ... -->
            <td><button class="deleteBtn" data-index="${index}">❌</button></td>
        `;
        sessionLogBody.appendChild(row);
    });
    jsonOutput.value = JSON.stringify(sessions, null, 2);

    // Add event listeners to delete buttons
    document.querySelectorAll('.deleteBtn').forEach(btn => {
        btn.addEventListener('click', deleteSession);
    });
}


Added a new deleteSession function to handle the deletion of a session:
function deleteSession(event) {
    const index = parseInt(event.target.getAttribute('data-index'));
    sessions.splice(index, 1);
    updateSessionLog();
    saveSessions();
}


These changes add a delete icon (❌) next to each row in the table. When clicked, it removes the corresponding session from the sessions array, updates the table, and saves the changes to localStorage.
The delete functionality is now fully integrated into the Pomodoro Timer application. Users can easily remove individual session entries from both the visible table and the stored data.