TODO¶

Download the template¶

todo.zip

Instructions¶

The images above illustrates the goal we are trying to achieve. The first image shows how the application behaves when you are adding items in the list. And the second image shows what happens when you click individual items in the list. New items are appended to the end of the list after you submit the form. At the same time, when a new item is added to the list, the input field is reset back to empty. Clicking an item marks it done and adds a CSS class “done” that causes the style of that item to be modified accordingly. If the same item is clicked twice, it will be removed from the list.

NOTE: The stages below are not all required and the end result is what counts. For more experienced JavaScript coders some of the stages may seem unnecessary but for others they should prove helpful when there are a few checkpoints included in between and some functions are built incrementally.

1. First start by downloading the template files. The HTML template takes care of loading the JavaScript file and you don’t have to change anything else but the todo.js file. All your code goes inside the todo.js file and this is the only file you submit in this exercise.

2. Again there are three important elements in the HTML file: the form input which has id “type-input”, the target list ul-element which has an id “todo” and the form itself which has an id “form”. Your first task is to get a hold of all these elements inside your code. Again you can use document.getElementById() or document.querySelector().

3. Next you should implement the addListItem(text) function. It is responsible for creating new list items (li-elements) and then adding them to the list. As you can see it gets text as its argument. This is the text that the user typed in the input field. This function should first create a new li-element and then put the text inside that element. Finally the function appends the li-element to the end of the list. Useful functions here are document.createElement() and Element.append() and also the property textContent that you have already used in the previous exercise. See: Modifying the document

4. Next you should implement the submitHandler(e) function. You already know that this function is responsible for interrupting the form submit event and cancelling it. But this function is also responsible for reading value of the the input field just like in the previous exercise. And again this function checks whether the value is empty or contains only spaces and in that case it should do nothing else. On the other hand if the input value is not empty this function should call the addListItem(text) function and pass the input value in as an argument. You could of course simply create and add the list item inside submitHandler(e) but it is usually a better idea to separate the concerns of each function so that your code is easier to understand and maintain in the future if you need to change it. For the same reason we have named the functions with long and descriptive names so that anyone reading the code can immediately understand what each functions is responsible for. Finally your submitHandler(e) should reset the input field value back to empty string.

5. Attach the submitHandler(e) function to the form submit event. You should already know how this is done based on the previous exercise.

6. Reload your page to make sure that your changes to the JavaScript file are loaded and test your application. Try submitting text and see if the the text is appended correctly at the end of the TODO list and the input field is reset to empty. Try this a few times. If everything works you can move on to the next phase otherwise you should see some error messages in the browser console. Depending on the message you should try to locate the source of the error and fix it. At this point the most likely source of errors is the addListItem(text) function but it is also possible to have mistakes inside the submitHandler(e). In any case the error message should include the line number of the error. See: Debugging in Chrome

7. Next you should implement the function listClickHandler(e) which is the event handler that is responsible for handling all those clicks to each individual list items and then giving them the class “done” and on the second click removing the list item from the document. This time you don’t have to cancel any default event since clicking a list item (li-element) does not have a default action to cancel but it does not do any harm if you cancel it anyways. This time the e argument refers to the click event and you need to get to the actual li-element that was clicked. Fortunately the event knows that and offers it in its target property. This means that the list item that is clicked can be accessed as e.target. In our case this should always be a list item but there is a chance that somehow the user has clicked another element and it is usually a good idea to check that you are actually dealing with the element you think you are. Therefore the very next thing is to ask the element itself whether it is li-element or not. This can be done with Element.tagName property or in our case e.target.tagName and it should have a value “LI”. If the element is not a list item you should do nothing since we do not want to change anything else in the document. Now lets first just remove the item from the list. Removing an element can be done with node.remove(). See: Node removal

8. Attach the listClickHandler(e) function to the TODO list ul-element’s click event. You should already know how to do this. NOTE: Here we attach this listener on the ul-element and not on each individual li-element. This is possible because of event bubbling. See: Bubbling and capturing and Event delegation

9. Reload your page and test your application. First add a few items to the list. This should work just fine since you already completed that stage. Then try to click one of the list items and see it hopefully disappear. If that happens click all the other elements too and see if you can make the list empty again. If something went wrong you can see the errors in the console as usual. This time all the errors should be in the listClickHandler(e) function. Fix errors and try again.

10. Now it is time to add the check for the class “done” and adding the class if it is missing. You can access all the classes an element has with its classList property. You can add a new class to the element, remove an existing class and also toggle a class to either add or remove a class depending on whether it existed on the element or not. In this case you can add the class to the element with e.target.classList.add("done") and you can ask if the element already has that class with e.target.classList.contains("done"). Remember that if the li-element does not have the class “done” you should add it and not remove the element from the list. And only when the element already has the class “done” you should remove the element. See: How To Modify CSS Classes in JavaScript

11. Reload your page and test your application. First add a few items to the list. This should work just fine since you already completed that stage. Then try to click one of the list items. If the item changes its appearance try clicking another element to see it change too. NOTE! Here you must also have the stylesheet or the class “done” does not change anything and you don’t see any change. If everything worked so far go ahead and click one of the items second time and see it hopefully disappear. If that happens click all the other elements too and see if you can make the list empty again. If something went wrong you can see the errors in the console as usual. This time all the errors should be in the listClickHandler(e). Fix errors and try again.

12. Before submitting this exercise do one final check so that everything is in place and then go ahead and submit. Congratulations!