0

I am kinda new in JS and I really need your help! I am working on simple Todo list application. My Html is

<div class="centerer">
    <div class="title">
        TODO List
    </div>
    <form>
        <label>
            <input id="new-task-input" type="text" placeholder="TODO">
        </label>
        <button type="button" id="add-task-button">
            Add
        </button>
    </form>
    <ul id="todolist-container">
        <li class="task">
            <label><input type="checkbox" class="checkbox">
                Default Test Value
                <input type="button" class="delete-btn" value="X">
            </label>
        </li>
    </ul>
    <input type="button" id="delete-all" value="Delete All" onclick="wantDelete()">

    <script type="text/template" id="list-item-template">
        <li class="task">
            <label>
                <input type="checkbox" class="checkbox">
                <span class="checkbox-custom"></span>
                <span class="task-name label"><!-- TODO --></span>
                <input type="button" class="delete-btn" value="X">
            </label>
        </li>
    </script>
    <script type="text/template" id="list-item-template-completed">
        <li class="task">
            <label>
                <input type="checkbox" class="checkbox">
                <span class="checkbox-custom"></span>
                <span class="task-name label completed"><!-- TODO --></span>
                <input type="button" class="delete-btn" value="X">
            </label>
        </li>
    </script>

Checkboxes is a little bit decorated with "label" help.

The main idea of app is: - Add new Todo (ok with it) - Delete Todo by pressing "x" button (also ok) - If task is done, after "checkboxing" line-through decoration appeared (also ok woth it) All information also should store in localstorage (also ok).

But after reloading the page the state of checkboxes dont save. Only decoration state is saved.

My JS is

    window.Todo = {
    addTaskButton: document.getElementById("add-task-button"),
    newTaskInput: document.getElementById("new-task-input"),
    container: document.getElementById("todolist-container"),
    template: document.getElementById("list-item-template").innerText,
    templateCompleted: document.getElementById("list-item-template-completed").innerText,

    setup: function() {
        Todo.addTaskButton.addEventListener('click', Todo.onAddTaskClicked);
        Todo.container.addEventListener('click', Todo.onTodolistClicked);
        Todo.renderTasks();
    },

    onAddTaskClicked: function() {
        var taskName = Todo.newTaskInput.value;
        Todo.newTaskInput.value = "";
        var taskHTML = Todo.template.replace("<!-- TODO -->", taskName);
        Todo.container.insertAdjacentHTML('afterbegin', taskHTML);
        Todo.saveTask(taskName, false);
    },

    onTodolistClicked: function(event) {
        var targetElement = event.toElement;
        if(targetElement.className !== "delete-btn"){
            while (!targetElement.classList.contains("task")) {
                targetElement = targetElement.parentElement;
            }

            var checkbox = targetElement.querySelector(".checkbox");
            var toLineThrough = targetElement.querySelector(".task-name");
            if (checkbox.checked) {
                toLineThrough.classList.add("completed");
            } else {
                toLineThrough.classList.remove("completed");
            }

            var taskNameElement = targetElement.querySelector(".task-name");
            var taskName = taskNameElement.innerText;


            Todo.saveTask(taskName, checkbox.checked);
        }
        else{
            while (!targetElement.classList.contains("task")) {
                targetElement = targetElement.parentElement;
            }

            var taskNameElement = targetElement.querySelector(".task-name");
            var taskName = taskNameElement.innerText;
            localStorage.removeItem(taskName);
            window.location.reload(true);
        }
    },

    saveTask: function(name, isCompleted) {
        window.localStorage.setItem(name, JSON.stringify(isCompleted));
    },

    renderTasks: function() {
        for (var i = 0; i < window.localStorage.length; i++) {
            var taskName = window.localStorage.key(i);
            var isCompleted = JSON.parse(window.localStorage.getItem(taskName)) === "true";
            var taskHTML = Todo.template.replace("<!-- TODO -->", taskName);

            if (!isCompleted) {
                Todo.container.insertAdjacentHTML('afterbegin', taskHTML);
            }
            else {
                var taskName1 = window.localStorage.key(i);
                var taskHTML1 = Todo.templateCompleted.replace("<!-- TODO -->", taskName1);
                Todo.container.insertAdjacentHTML('afterbegin', taskHTML1);
            }
        }
    }
}

    Todo.setup();

    function wantDelete() {
        localStorage.clear();
        window.location.reload(true);
    }

Maybe someone could help how to save checkboxes state? And I understand that render function is not good because of taking 2 different templates, but my brain could reproduce just that..

Thak youfor any help!

1 Answer 1

0

My proposition is to save value of specific fields to localstorage

localStorage.setItem('male', 'true'); Read more about Localstorage it could help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.