Learnings while creating a Task Management (To-Do) Webpage

Task at hand:

1. User Input to be taken from an input text field beside which is a button which will add the tasks to the to do list.

2. Display each task in a list with a checkbox and a delete button. The button will delete that list item from the list. Checking the checkbox will mark the task as completed. Visually distinguish between the completed and uncompleted states. Unchecking will reverse the state.

3. Initially when there are no tasks added, there should be a message which says “No Tasks yet” and it should be dynamic, when tasks are added, it should go away and again when all the tasks are deleted, the message should come back.

4. There should be a counter for completed tasks and total tasks which should update dynamically as tasks are added, completed or deleted.

Learnings:

1. First of all read the problem clearly:

The problem clearly mentioned that a each task should be displayed in a list. Although visually my app mimics the desired outcome but I used divs to represent each item instead of li. I think it somehow also increased the complexity.

2. Query Selector Behaviour:

   If I wanted to grab an element from the DOM tree, I knew one or two methods : getElementById or getElementsByClassName. While writing the functionality of to-do app, I got a chance to use query selector method. The signature of this method is simple: querySelector(query) where ‘query’ is the same query that we used in CSS to target an element, for example to target a div having id “div1“, we used “#div1”. So, in the dom tree if we want to grab an element having id “div1“ , we can use document.querySelector(“#div1”). Similarly if our query is for a class, it returns the first element in the dom tree which contains that class name.

3. ‘If no tasks, then show message’ approach:

   I created a function ‘checkIfNoTasks’ which will add the message to add tasks and called it at the page load because initially there are no tasks. I created ‘checkIfNoTasks‘ because I will use this functionality again when all the tasks are deleted using the delete button.

   This function basically calculates all the child elements in the wrapper div using ‘element.childElementCount’ and if there are zero child elements, then we create our div containing the message ‘No tasks yet. Add one above!‘ and append it to the wrapper div.

    const allTasks = document.querySelector("#allTheTasks");

    function checkIfNoTasks(){
        const totalTasksPresent = allTasks.childElementCount;
        if(!totalTasksPresent){
            const noTasksDiv = document.createElement("div");
            noTasksDiv.setAttribute("id", "noTasksPresent");
            const noTaskP = document.createElement("p");
            noTaskP.innerText = "No tasks yet. Add one above!";
            noTasksDiv.appendChild(noTaskP);
            allTasks.appendChild(noTasksDiv);
        }
    }
    // call at page load
    checkIfNoTasks();

I will call this function every time delete button is clicked and if all tasks are deleted, this function will recreate the message “No tasks yet. Add one above“.

In this function I came to know about a method ‘childElementCount’. It gives the no. of child elements in a parent element.

I added an id “noTasksPresent“ to the newly created div as it will help remove this div when ‘add’ button is clicked for the first time.

4. Add Button Approach:

     <div class="wrapper">
            <div id="mainInputDiv">
                <input id="actualInputField" type="text" placeholder="Add a new task..." style="width: 90%;" >
                <button id="addButton">Add</button>
            </div>
        </div>
   

   I added an input field and next to it, I added a button. This was done using html.

So, basically I had to add an event listener on ‘add’ and the same functionality had to be implemented if someone pressed enter on the input field.

So, I had to write two event listeners, one on the add button whenever someone clicks it, another on the input field, a ‘keydown’ event.

    const inputField = document.querySelector("#actualInputField")

    const buttonToAdd = document.getElementById("addButton");

    buttonToAdd.addEventListener("click", addTaskFunctionality);

    inputField.addEventListener("keydown", identifyKeydownEvent);

5. Add Task Functionality:

   If add button is clicked the first time and there is a task inside the input field, then remove the message : ‘No tasks yet. Add one above’

     const noTasksPresentDiv = document.getElementById("noTasksPresent");
        const dataInInput  = inputField.value;
   
        if(noTasksPresentDiv && dataInInput){
            noTasksPresentDiv.remove();
        }
   

   I got to know about the ‘remove’ method which removes an element from the dom tree.

   Then after checking whether the user has entered something in the input field, a container div is created, and inside this container div, a ‘checkbox’, a ‘p’ and a delete ‘button’ is created.

   Checkbox functionality is added :

checkBox.addEventListener("click", ()=>{
            if(checkBox.checked){
                completedTasksCounter++;
                completedTasks.innerText = completedTasksCounter;
                dataTag.style.textDecoration = "line-through";
                dataTag.style.color = "grey";

            }else{
                completedTasksCounter--;
                completedTasks.innerText = completedTasksCounter; 
                dataTag.removeAttribute("style");
            }

        });

Here, I got to know the ‘checked’ property of checkbox, it lets us check whether checkbox is checked or not. It returns a boolean value. This is one new thing that I learnt. I also got to know about ‘removeAttribute’ method.

6. Keydown Event functionality:

    function identifyKeydownEvent(e){
        if(e.key === "Enter"){
            addTaskFunctionality();
        }
    }
   
    inputField.addEventListener("keydown", identifyKeydownEvent);
   

   While writing this functionality, I got to know that the callback function has access to the event that triggered it.

7. General Learning:

   One more thing that I realized is that as soon as the code starts to grow, confusion increases and it is very important to provide comments in the code, so that we can understand it at a later date. But, I did not add comments and I kept getting lost easily. I think adding comments can help classify the functionality.

   Also one more learning is that there was a lot of variables having similar names. I think this happened because of poor design of the structure of html document. I was adding divs and other variables during the code and giving them ids on the go. So, a lot of them were having similar names.

   I think this issue can be resolved only if I create a mockup of the structure using pen and paper before starting to code. But usually I cannot visualize the entire structure. I hope I will eventually start getting this clarity.

8. Link to Git Repo:

   https://github.com/focusedCoderr/learning-journey/tree/c7139b721bc065bc61bcaeb4f0acd2823243111e/assignments/Week_7/JSDOMChallenge4

   #chaiCode