Session 6: JavaScript - III
1. Clone the following repository: Repo.
Note: the .js file in the repo is empty, the .html file is very simple and I have annotated the .css file.
2. Open the .html file with the live server, and you should see something like the figure below:
The page is static, just basic HTML and CSS, inspect both the HTML and CSS files. Now, we need to add some logic depending on JavaScript to the page to make it dynamic. We want to add logic for:
1. Create a "delete" button and append it to each task (list item <li>), as shown in the figure below.
Note on the solution: you need to identify all list items that have a tag name “li” (use “LI”, read the comment in the box), which you need to append the "delete" button to each one of them. This part of the code is shared in the code box.
Then, for each of the list items, you need to create a button element that contains a TextNode("Delete"). You need also to add a className = "close" to each button to activate the related CSS styling.
let myNodelist = document.getElementsByTagName("LI");
/*
You might be wondering why "LI" is in uppercase style while in the DOM it is "li"?
When JavaScript was first created, it used an uppercase style for tag names by convention. Usually, tagName() was
and still returns all uppercase.
Although "li" works for some cases, but it does not work for others. Therefore, please try to use uppercases when
you use tagName to be on the safe side.
*/
2. Pressing on the "delete" button will hide the list item containing it (its <li> parent).
let myNodelist = document.getElementsByTagName("LI");
let close = document.getElementsByClassName("close");
3. When a task is clicked on, you need to toggle its class to "checked", which will add a "checked" symbol, change the background and text color, and strike the text of the list item as shown in the figure (the first two tasks).
Note: the styling is already provided in the CSS file, you just need to add an event listener that will toggle the class of the li element to “checked”.
let list = document.querySelector('ul');
4. Create a function "newTask()" that will activate the “Add a task to my list” button, i.e., it will take any text written in the input box and add it as a new task to the list.
Note 1: if there is no text when the button is clicked, the user should be notified about that (e.g, a popup box).
Note 2: the text in the input should be deleted (e.g., cleared) when the button is clicked.
Note 3: the task should also have a delete button like other tasks in the list.
function newTask() {
};
