Build A Todo list app in HTML, CSS and JavaScript - Part 3| JavaScript code
This is Part 3 of the Todo App tutorial series and in this part, we will be coding the JavaScript code for the app to function well. Keep watching the tutorial until the end to understand the JavaScript code breakdown and remember to smash the Subscribe button and also the bell icon so that you are notified when I post more variations of html,css,JavaScript code to build the todo app.
In the HTML, you have seen the input has an id "text" and a div class , "add", with a button id "new". For this add button go perform well in adding text input to the input field, we get the element with an id ofv"new" and to this we add the event listener () with parameters 'click' and an anonymous function. Inside this function, we make a variable task, in which we store the value ofvthe element with an id "text" , as we are adding tasks in the input field in the form of text.
If the task is not an empty strinf, that is, there is some task to be input, then add the new task. To clear the input field every time, we grab the element with an id of "text" and allocate it to an empty string.
Coding the remove function
-----‐--------------------------------------
Create a variable, item. Identify the parent node of the item by using the property , parentNode.
Using the this keyword and parentNode property, we can see that item has a parent node, li, and li has a parent node, ul. So, as we can see, parent node property returns the parent node of the element. So in order to delete an item from the list we need to remove the child from the parent.
Next we use the conditional ternary operator method go understand what buttons to operate when.
So if the expression, parent id is "todo", is true, then, execute the element with id , "ready", else, return the element with id, "todo". For the ul having id of "ready", will execute the remove button and complete button and the ul having id of "todo" will execute the add button to add new items as text to the input field.
While adding the new items, we use the insertBefore() method, that will insert new list items before the existing list items, under the parent node as a child node. in this case, yoù can see that while new items to the list node, the new items just added will be over the existing list items and right below the parent list node as the first child of the list node.
Then for creating new item, we need to create list node for storing the text of the new item. For variable, buttons, we need to create a div element, with an id of "div".
Create and remove and complete buttons
---‐-----------------------
Create a variable, remove, and store the remove button with a class of remove and shaped as trash icon red in color, by performing string interpolation with Backticks Template literals.
Create the complete variable and perform same above operations to get the check icon for checking the completed items.
So, the idea of creating the remove and complete buttons is for providing a remove button(trash icon) and a complete button(check icon) before every todo item as this will enable the user to remove or check the todk items in the list as per his preference.
Hence, we also need to append the remove button and complete buttons as a child of buttons. Since each of the remove and complete button needs to be shown with an item, we also need to append the buttons as a child to the new item. Then perform the insertBefore() method on the list node to to return the inserted child node of the list, as the first item(index 0) below the parent new item on the list node.
Add eventListener to the list items
---------------
Get the elements with a class name , "remove", perform the for loop ,then add event listener, with parameters, "click", and removeItem. When user clicks on remove button (trash icon), the required item in the specified index will be removed. Similar operation is carried out for the complete button so that when user clicks on the complete button(check icon), the required item with the specified index will be checked.
So, with this app , we are able to add new items to the input field, as a text, uding the add (+) button. After adding itrms to the list, we are able to remove specified items and check specified completed items.
I missed a code in the remove function : parent.removeChild(item)
The list node is the child of ul node. the list node carries its child, item.
If we remove the list node from the ul node, we eliminate the item that was in the list.
hence the remove button was not functioning but now after debugging, we are able to remove specified items from the list.
FYI
I will be doing more Todo App JavaScript tutorials with different code variations in the coming weeks and it will be a good practice for you.
Hit that Bell icon with Subscribe button if you want to practise lots of projects in JavaScript.
#javascript #javascriptforbeginners #coding #todoapp #todo #todos #html #javascriptprojects #codingproblems #edtechbymeera #code