Aexus Answers

Implement 'Mark As Read' On Task List With Strikethrough

Alex Johnson
-
Implement 'Mark As Read' On Task List With Strikethrough

Hey guys! Let's dive into how we can implement a super useful feature on our task list page: a 'Mark as Read' button that not only visually indicates a message has been read but also remembers that state even after the page is refreshed. This is a common requirement for many applications, and we'll break down the steps to achieve this functionality.

Understanding the Requirements

Before we jump into the code, let's make sure we're all on the same page. The goal here is to add a button next to each task in our task list. When a user clicks this button, the corresponding task should be visually marked as read, typically by applying a strikethrough effect. More importantly, this 'read' state needs to be persistent. If the user refreshes the page, the tasks they've marked as read should still appear with a strikethrough. This implies we need to store the read state somewhere, usually in local storage or a database.

Why is this feature important?

Having a visual indicator of read messages significantly improves user experience. It helps users quickly identify which tasks they've already addressed and which ones still require attention. The persistence aspect is crucial because users often navigate away from a page and come back later. If the read state isn't saved, they'll have to remember which tasks they've already handled, leading to frustration and potential errors.

Breaking down the problem:

To implement this feature effectively, we need to address several key aspects:

  1. Adding the 'Mark as Read' Button: We need to add a button or a similar interactive element next to each task item in our list. This button will trigger the 'mark as read' functionality.
  2. Applying the Strikethrough Effect: When the button is clicked, the corresponding task's text should be visually modified to indicate it's been read, usually with a strikethrough.
  3. Storing the Read State: We need a mechanism to store which tasks have been marked as read. This could involve using local storage (for simple cases), cookies, or a database (for more complex applications with user accounts and data synchronization across devices).
  4. Persisting the State on Page Refresh: The stored read state needs to be loaded when the page is refreshed, ensuring that the strikethrough effect remains visible for tasks previously marked as read.

Step-by-Step Implementation

Let's outline a step-by-step approach to implementing this feature, focusing on using JavaScript and local storage for simplicity. We'll assume you have a basic task list rendered on your page already.

Step 1: Adding the 'Mark as Read' Button

First, we need to modify our task list rendering logic to include a 'Mark as Read' button for each task. This might involve adding a new button element within each list item.

<ul>
  <li>Task 1 <button class="mark-read-btn" data-task-id="1">Mark as Read</button></li>
  <li>Task 2 <button class="mark-read-btn" data-task-id="2">Mark as Read</button></li>
  <li>Task 3 <button class="mark-read-btn" data-task-id="3">Mark as Read</button></li>
</ul>

Notice the data-task-id attribute. This is a crucial piece of the puzzle. It allows us to uniquely identify each task element and associate it with a specific read state in our storage.

Step 2: Handling the Button Click and Applying Strikethrough

Now, we need to add some JavaScript to listen for clicks on the 'Mark as Read' buttons and apply the strikethrough effect. We'll use event delegation for efficiency, attaching a single event listener to the parent element of the buttons (e.g., the <ul>).

const taskList = document.querySelector('ul');

taskList.addEventListener('click', function(event) {
  if (event.target.classList.contains('mark-read-btn')) {
    const taskId = event.target.dataset.taskId;
    const listItem = event.target.parentNode;
    listItem.classList.toggle('read'); // Add/remove 'read' class
    updateReadState(taskId, listItem.classList.contains('read')); // Update storage
  }
});

Here's what's happening in this code:

  • We attach a click event listener to the taskList (the <ul> element).
  • Inside the event listener, we check if the clicked element has the class mark-read-btn.
  • If it does, we extract the taskId from the data-task-id attribute.
  • We get the parent <li> element of the button.
  • We use classList.toggle('read') to add or remove the read class from the list item. This is what will apply the strikethrough effect (we'll define the CSS for this shortly).
  • Finally, we call an updateReadState function (which we'll define next) to update the stored read state.

Step 3: Storing the Read State in Local Storage

Now for the persistence magic! We'll use local storage to store the read state of each task. Local storage is a simple key-value store built into web browsers.

function updateReadState(taskId, isRead) {
  let readTasks = JSON.parse(localStorage.getItem('readTasks') || '{}'); // Get stored state
  readTasks[taskId] = isRead; // Update state for this task
  localStorage.setItem('readTasks', JSON.stringify(readTasks)); // Store updated state
}

Let's break this down:

  • We define a function updateReadState that takes the taskId and a boolean isRead as arguments.
  • Inside the function, we first retrieve the existing read state from local storage using localStorage.getItem('readTasks'). If there's nothing stored yet, we use '{}' as the default value (an empty object).
  • We parse the retrieved value using JSON.parse to convert it from a JSON string to a JavaScript object. This object will store the read state for each task, with taskId as the key and true or false as the value.
  • We update the state for the current taskId by setting readTasks[taskId] = isRead.
  • Finally, we store the updated readTasks object back into local storage using localStorage.setItem('readTasks', JSON.stringify(readTasks)). We use JSON.stringify to convert the JavaScript object back into a JSON string before storing it.

Step 4: Loading the Read State on Page Load

The final piece of the puzzle is to load the read state from local storage when the page loads and apply the strikethrough effect to the appropriate tasks.

function loadReadState() {
  let readTasks = JSON.parse(localStorage.getItem('readTasks') || '{}');
  for (const taskId in readTasks) {
    if (readTasks.hasOwnProperty(taskId)) {
      const isRead = readTasks[taskId];
      if (isRead) {
        const listItem = document.querySelector(`[data-task-id="${taskId}"]`).parentNode;
        listItem.classList.add('read');
      }
    }
  }
}

// Call loadReadState when the page loads
window.addEventListener('load', loadReadState);

Here's how this works:

  • We define a function loadReadState.
  • Inside the function, we retrieve the read state from local storage, just like in updateReadState.
  • We iterate over the keys (taskIds) in the readTasks object using a for...in loop.
  • For each taskId, we check if it has its own property in the object using hasOwnProperty (this is important to avoid iterating over inherited properties).
  • We get the isRead value for the current taskId.
  • If isRead is true, we find the corresponding list item using document.querySelector(${data-task-id="${taskId}"}$).parentNode. We use a CSS selector to find the button with the matching data-task-id and then get its parent <li> element.
  • We add the read class to the list item, applying the strikethrough effect.
  • Finally, we attach the loadReadState function to the window.addEventListener('load') event. This ensures that the function is called when the page has finished loading.

Step 5: Adding CSS for the Strikethrough Effect

We need some CSS to actually apply the strikethrough effect when the read class is present.

.read {
  text-decoration: line-through;
  color: grey; /* Optional: Dim the text color */
}

This CSS rule simply applies the text-decoration: line-through style to any element with the class read, creating the strikethrough effect. We also optionally dim the text color to further visually indicate that the task has been read.

Putting it All Together

Here's the complete code snippet combining all the steps:

<!DOCTYPE html>
<html>
<head>
  <title>Task List</title>
  <style>
    .read {
      text-decoration: line-through;
      color: grey;
    }
  </style>
</head>
<body>
  <h1>Task List</h1>
  <ul>
    <li>Task 1 <button class="mark-read-btn" data-task-id="1">Mark as Read</button></li>
    <li>Task 2 <button class="mark-read-btn" data-task-id="2">Mark as Read</button></li>
    <li>Task 3 <button class="mark-read-btn" data-task-id="3">Mark as Read</button></li>
  </ul>

  <script>
    const taskList = document.querySelector('ul');

    taskList.addEventListener('click', function(event) {
      if (event.target.classList.contains('mark-read-btn')) {
        const taskId = event.target.dataset.taskId;
        const listItem = event.target.parentNode;
        listItem.classList.toggle('read');
        updateReadState(taskId, listItem.classList.contains('read'));
      }
    });

    function updateReadState(taskId, isRead) {
      let readTasks = JSON.parse(localStorage.getItem('readTasks') || '{}');
      readTasks[taskId] = isRead;
      localStorage.setItem('readTasks', JSON.stringify(readTasks));
    }

    function loadReadState() {
      let readTasks = JSON.parse(localStorage.getItem('readTasks') || '{}');
      for (const taskId in readTasks) {
        if (readTasks.hasOwnProperty(taskId)) {
          const isRead = readTasks[taskId];
          if (isRead) {
            const listItem = document.querySelector(`[data-task-id="${taskId}"]`).parentNode;
            listItem.classList.add('read');
          }
        }
      }
    }

    window.addEventListener('load', loadReadState);
  </script>
</body>
</html>

Advanced Considerations

While this implementation provides a basic working solution, there are several ways you could enhance it:

  • Using a Database: For more complex applications, especially those with user accounts and data synchronization across devices, storing the read state in a database is a better approach than local storage. This allows users to access their read states from any device.
  • Debouncing or Throttling: If you have a very large task list, frequently updating local storage on every click could potentially impact performance. Consider using techniques like debouncing or throttling to limit the frequency of updates.
  • Error Handling: Add error handling to gracefully handle cases where local storage is unavailable or corrupted.
  • Alternative Visual Indicators: Instead of strikethrough, you could use other visual cues to indicate a task has been read, such as changing the background color or adding a checkmark icon.

Conclusion

Implementing a 'Mark as Read' feature with persistent strikethrough effect significantly enhances the usability of task list applications. By combining HTML, CSS, JavaScript, and local storage, we can create a seamless and intuitive user experience. Remember to consider the advanced considerations for more robust and scalable solutions.

For further information on local storage and web storage APIs, you can visit the Mozilla Developer Network (MDN) Web Docs. This is a fantastic resource for all things web development!

You may also like