Script #1

script.js

const Todo = class {
    constructor(desc, date) {
        this.id = Date.now();
        this.desc = desc;
        this.date = date;
        this.completed = 0;
    }
}

let todos = [];

const refreshTodoList = (todos) => {
    todoList.innerHTML = '';

    for (let todo of todos)
    {
        const li = document.createElement('li');
        
        li.setAttribute('id', todo.id);

        li.innerHTML = `
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input class="completeTodo" type="checkbox" ${todo.completed == 1 ? 'checked': ''}>
                    </div>
                </div>
                <input type="text" minlength="3" maxlength="255" class="form-control" value="${todo.desc}" disabled>
                <input type="date" class="form-control" contenteditable="true" disabled value="${todo.date}">
                <div class="input-group-append">
                    <button class="btn btn-danger deleteTodoButton" type="button"><i class="far fa-trash-alt"></i></button>
                </div>
            </div>
        `;

        todoList.append(li);
    }

    console.table(todos);
};

// Load todos from localStorage on page load
const reference = localStorage.getItem('todos');

if (reference) {
    todos = JSON.parse(reference);
    refreshTodoList(todos);
}

const addToLocalStorage = (todos) => {
    localStorage.setItem('todos', JSON.stringify(todos));
    refreshTodoList(todos);
}

// Test
todos.push(new Todo("XXX", "2020-11-03"))
addToLocalStorage(todos);