Marking list items as done

Issue description

I wanted the have items be removed from the to-do list using classes, when you click them the become 'done' and then you can press a button to remove done tasks. The problem is that i cant figure out how to have the list items respond and become 'done' when clicked. I've been unable to find something similar to what im trying to do in the slides and class examples/exercises, so I was just wondering if i was missing something, and if not how i would do something like this? ive included screenshots of my code if theyre needed :)

Response

Great job @oliviascout starting off the app code! Love where you are going.

First off, let's start with just having a Todo removed from the list and then we can work on the done / not done part.

Remember - your items array is your "source of truth" or "database" of Todos. This array stores information about the Todos. We then make changes to our HTML to reflect what the "database" has in storage.

Step 1:

We're going to need a Button in each Todo that users can click on so that we know when they want to remove the Todo from the items array. (For accessibility purposes we only want to listen to button clicks, not clicks in li or other non interactive elements)

Modify your code below, so that inside your for loop your app not only adds the li to the page, but also creates and adds a button to the li and THEN add the li to your list (ul) (stuffList).

https://github.com/imd1005-web-development-winter-2023/assignment-03-oliviascout/blob/74173dc1f4ee9cf6266bb5125e6d5c98072549e3/main.js#L75-L82

Step 2:

Now that a button is added to each Todo, we're going to need to add some data to the Button so that we can figure out which of the many Todo List Buttons was clicked.

This can be done using the dataset property.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

// Create a button
const todoRemoveButton = document.createElement("button"); 

// ADD Code to add button text ..
// ADD Code to add classes to the button..

// Secret sauce - use the dataset property to add some useful information to the button 
todoRemoveButton.dataset.index = i; // This now adds the data-index attribute to your buttons so now we know exactly which index in your items array was clicked on

Step 3:

Once your buttons are in each Todo item li, and each button has a data-index=I attribute, now all we need to add is an event handler on the ul to catch all of the clicks that are bubbling up from the child li buttons.

Luckily, we did this in the class code example:

In the code sample linked below, we have a function that is an event handler that is added to our list. That event handler first checks if the click was made by a button and then uses the dataset property to figure out what was index of the button that was clicked.

https://github.com/imd1005-web-development-winter-2023/class-code-examples/blob/235b681c6773bc16894fa4759482660158a614a5/class-16/section-a/main.js#L110-L137

Now that you know the index of the items array of the one that needs to be removed, you can then modify your items array and remove that specific todo from the array.

We can easily update the array using the splice method:

const myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
myFish.splice(3, 1); // This removes the array item at index 3

// myFish is ["angel", "clown", "drum", "sturgeon"]

Source for splice demo: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice#remove_1_element_at_index_3

Hey @oliviascout

Well done! Love the progress! And love the idea of listing the "doneTodos" in a separate array and displayed in a separate ul!

Here's the "pseudo" code algorithm that could help you get to the finish line:

Your removeDone function is awesome - and well setup!

In your addDone function - all you need in the done array is the text of the todo item. So, you can pass to your addDone function the text of the todo, as well the dones array and donesList


function removeDone(e){
  ...
  // Get the text for the done todo before you remove it from the array 
  const textForDoneTodo = items[idx]

  // Pass the text for the done todo to the add done function 
  addDone(textForDoneTodo, dones, donesList); 
  ...
}

function addDone(textForDoneTodo, dones, donesList) {

  // Add the done text to the dones array 
  dones.push(textForDoneTodo); 

  // Update the donesList (the UL on the page) by clearing it and then redrawing it with a for loop 

  // Clear the UL list so that it's empty

  // Redraw the UL list items using a for loop and add them to the UL doneslist (notice that doneslist is plural) 

}

You actually have most of this done - almost there! Let me know if you need anything else.

https://github.com/imd1005-web-development-winter-2023/assignment-03-oliviascout/blob/7726293890b647641ea8aaa3f70d012bbe0a0a9b/main.js#L128-L144

imd1005-web-development-winter-2023 / assignment-03-oliviascout

Marking list items as done #2

Issue description

Response