todo.js

let todoList = [
    {item: 'Buy milk', dueDate:'12-3-2024'},
    {item: 'Go to college', dueDate:'12-3-2024'},
    {item: 'Stationary', dueDate:'13-3-2024'},
    {item:'Lab manuals', dueDate:'14-3-2024'},
];

displayItems();

function addTodo() {
    let inputElement = document.querySelector('#todo-input');
    let dateElement = document.querySelector('#todo-date');

    let todoItem = inputElement.value;
    let todoDate = dateElement.value;

    todoList.push({item: todoItem, dueDate:todoDate});

    inputElement.value = '';
    dateElement.value = '';

    displayItems();
}


function displayItems() {
    let boxElement = document.querySelector('.todo-box');
    let newHtml = '';

    for (let i = 0; i < todoList.length; i++) {
        let item = todoList[i].item;
        let dueDate = todoList[i].dueDate;

        newHtml += `
         <span>${item}</span>
         <span>${dueDate}</span>
        <button class="btn-delete" onclick="todoList.splice(${i}, 1); displayItems();">Delete</button>
        `;
    }
    boxElement.innerHTML = newHtml;
}