Question 292915 in CSS Question posted in
Some basic documentation can be found here.

Css – how to check task as done in javascript

I’m trying to add the done task function to my to do list app, everyting seems fine but when I click on check button, it doesnt add the done class to li tag

Demo

Tags:

3

Answers


  1. 0

    There is no code sample in your question but you can watch the scenario like this:

    1. add event listener to your todo’s done button.
    2. write a function that will be triggered in this event.
    3. you can toggle, delete or add class name to manipulate by css.
    4. also you can make api request in need in this method.

    Finally: it could be more easier to handle those action in a frontend library like react. If you provide code samples there could be more specific help.

    Login or Signup to reply.
  2. 0

    It’s not working because you’re trying to read a value that doesn’t exist.

    getLocalStorageData[index].done

    The done property doesn’t exist because getLocalStorageData is an array of strings, not objects. This is because, in the add item handler, you’re only pushing strings.

    getLocalStorageData.push(userEnteredValue)

    userEnteredValue is just the string value from the input field. You should instead try pushing an object with a value property for the user entered value and a done property to track if it’s done.

    Here’s an updated code that pushes objects and adds .value when needing the value.

    const addBtn = document.querySelector(".input-todo button");
const inputBox = document.querySelector(".input-todo input");
const todoList = document.querySelector(".todo-list");
const deleteAllBtn = document.querySelector(".info-box button");

inputBox.onkeyup = () => {
    let userEnteredValue = inputBox.value;

    if (userEnteredValue.trim() != 0) {
        addBtn.classList.add("active");
    } else {
        addBtn.classList.remove("active");
    }
};

addBtn.addEventListener("click", function () {
    let userEnteredValue = inputBox.value;
    const getLocalStorageData = JSON.parse(localStorage.getItem("todo")) || [];
    getLocalStorageData.push({ value: userEnteredValue, done: false });
    localStorage.setItem("todo", JSON.stringify(getLocalStorageData));

    showTasks();
    addBtn.classList.remove("active");
});

showTasks();
function showTasks() {
    let getLocalStorageData = localStorage.getItem("todo");

    if (getLocalStorageData == null) {
        listArray = [];
    } else {
        listArray = JSON.parse(getLocalStorageData);
    }

    const pendingTasksNumb = document.querySelector(".pendingTasks");
    pendingTasksNumb.textContent = listArray.length;

    if (listArray.length > 0) {
        deleteAllBtn.classList.add("active");
    } else {
        deleteAllBtn.classList.remove("active");
    }

    let newTag = "";
    listArray.forEach((element, index) => {
        const taskDateTime = getFormattedDateTime();
        const doneClass = element.done ? "done" : "";
        newTag += `
                    <li class="${doneClass}">
                        <span class="task-date-time">${taskDateTime}</span>
                        <span class="task-text" contenteditable="true" onblur="saveEditedTask(${index}, this)">${element.value}</span>
                        <span class="icon trash-icon"><i class="fas fa-trash-alt" onclick="deleteTask(${index})"></i></span>
                        <span class="icon edit-icon" onclick="editTask(${index})"><i class="fas fa-pencil-alt"></i></span>
                        <span class="icon check-icon" onclick="toggleTaskDone(${index})"><i class="fas fa-circle-check"></i></span>
                    </li>`;
    });

    todoList.innerHTML = newTag;
    inputBox.value = "";
}

function getFormattedDateTime() {
    const options = { month: "short", day: "numeric" };

    const dateTime = new Date();
    return dateTime.toLocaleString("fa-IR", options);
}

function deleteTask(index) {
    const getLocalStorageData = JSON.parse(localStorage.getItem("todo")) || [];
    const updatedTasks = getLocalStorageData.filter((_, i) => i !== index);
    localStorage.setItem("todo", JSON.stringify(updatedTasks));
    showTasks();
}

function editTask(index) {
    const taskElement = todoList.children[index];
    taskElement.setAttribute("contenteditable", "true");
    taskElement.focus();
}

function saveEditedTask(index, editedElement) {
    const editedTask = editedElement.innerText.trim();
    const getLocalStorageData = JSON.parse(localStorage.getItem("todo")) || [];
    getLocalStorageData[index].value = editedTask;
    localStorage.setItem("todo", JSON.stringify(getLocalStorageData));
    editedElement.removeAttribute("contenteditable");
}

function toggleTaskDone(index) {
    const getLocalStorageData = JSON.parse(localStorage.getItem("todo")) || [];
    getLocalStorageData[index].done = !getLocalStorageData[index].done;
    localStorage.setItem("todo", JSON.stringify(getLocalStorageData));
    showTasks();
}

todoList.addEventListener("input", function (event) {
    const editedIndex = Array.from(todoList.children).indexOf(
        event.target.parentNode
    );
    const editedTask = event.target.innerText.trim();

    const getLocalStorageData = JSON.parse(localStorage.getItem("todo")) || [];
    getLocalStorageData[editedIndex].value = editedTask;
    localStorage.setItem("todo", JSON.stringify(getLocalStorageData));
});

deleteAllBtn.addEventListener("click", function () {
    localStorage.removeItem("todo");
    showTasks();
});
    Login or Signup to reply.
  3. 0

    Define a task: You can create a task object with properties like task name and completion status. For example: var task = { name: "Task 1", completed: false };

    Check the task completion status: You can use an if statement to check if the task is completed. For example: if (task.completed) { console.log("Task is completed"); } else { console.log("Task is not completed"); }

    Mark the task as done: If the task is not marked as done, you can update its completion status. For example: task.completed = true; console.log("Task marked as done"); By setting task.completed to true, you indicate that the task is completed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search