CREATING TODO APP JAVA SCRIPT

smartphone, to do list, to do

Souce code: https://github.com/fenelon01/TODO-APP

Code explanation here:

Event Listener for DOM Content Loaded

javascriptCopy codedocument.addEventListener('DOMContentLoaded', function() {
  • Purpose: This event listener ensures that the JavaScript code only runs after the HTML document has been fully loaded and parsed. This is important because it ensures that all the elements we want to manipulate in the DOM are available.

2. Selecting DOM Elements

javascriptCopy codeconst taskInput = document.getElementById('task-input');
const taskDate = document.getElementById('task-date');
const taskTime = document.getElementById('task-time');
const taskList = document.getElementById('task-list');
const addTaskBtn = document.getElementById('add-task-btn');
  • Purpose: These lines select specific HTML elements using their IDs so that we can interact with them. For example:
    • taskInput is the text input where users type their task.
    • taskDate and taskTime are the input fields for selecting the due date and time of a task.
    • taskList is the unordered list (<ul>) where tasks will be displayed.
    • addTaskBtn is the button that users click to add a new task.

3. Adding Event Listener for the Add Task Button

javascriptCopy codeaddTaskBtn.addEventListener('click', function() {
  • Purpose: This adds a click event listener to the "Add Task" button. When the button is clicked, the function inside this event listener will run, which handles adding a new task to the list.

4. Creating a New Task

javascriptCopy code    const taskText = taskInput.value;
    const taskDeadline = `${taskDate.value} ${taskTime.value}`;
    const isPriority = document.getElementById('priority').checked;

    if (taskText !== '') {
        const li = document.createElement('li');
        li.innerHTML = `
            <span class="task-text">${taskText}</span>
            <span class="countdown"></span>
            <span class="task-deadline">${taskDeadline}</span>
            <input type="checkbox" class="done-checkmark">
            <button class="delete-btn">Delete</button>
        `;
        if (isPriority) {
            li.classList.add('priority');
        }
        taskList.appendChild(li);
        taskInput.value = '';
        taskDate.value = '';
        taskTime.value = '';
        updateCountdowns();
    }
  • Explanation:
    • taskText: Retrieves the value of the task input field.
    • taskDeadline: Combines the selected date and time to create a deadline for the task.
    • isPriority: Checks if the priority checkbox is selected.
    • If condition: Ensures that the task text isn’t empty before creating a new task.
    • li element creation: A new list item (<li>) is created, and its inner HTML is set to include the task text, deadline, a checkbox for marking the task as done, and a delete button.
    • Priority Check: If the task is marked as a priority, the priority class is added to the list item.
    • Clearing Input Fields: After the task is added, the input fields are cleared.
    • updateCountdowns(): This function updates the countdown timers for all tasks.

5. Delete Task Functionality

javascriptCopy codetaskList.addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-btn')) {
        e.target.parentElement.remove();
    }
});
  • Purpose: This listens for a click event anywhere within the taskList (where all tasks are displayed). If the clicked element has the class delete-btn (i.e., the delete button for a task), the task’s parent element (the <li> containing the task) is removed from the DOM.

6. Mark Task as Done

javascriptCopy codetaskList.addEventListener('change', function(e) {
    if (e.target.classList.contains('done-checkmark')) {
        const listItem = e.target.parentElement;
        listItem.classList.toggle('completed');
    }
});
  • Purpose: This listens for changes (like checking a checkbox) in the taskList. If the change occurs on an element with the class done-checkmark (i.e., the task’s checkbox), it toggles the completed class on the task’s <li> element, which will visually strike through the task.

7. Updating Countdown Timers

javascriptCopy codefunction updateCountdowns() {
    const tasks = taskList.querySelectorAll('li');

    tasks.forEach(task => {
        const deadline = new Date(task.querySelector('.task-deadline').textContent);
        const now = new Date();
        const diff = deadline - now;
        
        if (diff > 0) {
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            task.querySelector('.countdown').textContent = `${hours}h ${minutes}m left`;
        } else {
            task.querySelector('.countdown').textContent = 'Missed!';
        }
    });
}

setInterval(updateCountdowns, 60000);
  • Purpose: This function calculates the time left until each task’s deadline and updates the countdown timers displayed next to each task.
    • Deadline Calculation: It parses the deadline from the task’s HTML and calculates the difference between the current time (now) and the task’s deadline.
    • Time Remaining: If the difference is positive (meaning the deadline hasn’t passed), the hours and minutes remaining are calculated and displayed. If the deadline has passed, the text "Missed!" is displayed.
    • setInterval: This runs the updateCountdowns function every minute to keep the countdowns up to date.

8. Closing the DOMContentLoaded Event Listener

javascriptCopy code});
  • Purpose: This closes the initial DOMContentLoaded event listener that encapsulates all the functionality, ensuring that the script runs only after the document is ready.

Summary

  • DOM Manipulation: The script selects and manipulates DOM elements to create, delete, and manage tasks.
  • Event Listeners: It uses event listeners to handle user interactions, such as adding tasks, marking them as done, and deleting them.
  • Countdown Timers: It includes logic for updating countdown timers to keep users aware of approaching deadlines.
Scroll to Top