script.js

const todoList = [];

document.querySelector('.js-add-todo-button')
  .addEventListener('click', addTodo);


renderTodoList();

function renderTodoList() {
  let todoListHTML = '';

  for (let i = 0; i < todoList.length; i++) {
    const todoObject = todoList[i];
    //const name = todoObject.name;
    //const dueDate = todoObject.dueDate;
    //const starttime = todoObject.starttime;
    const { name, dueDate, starttime} = todoObject;
    const html = `
        <div class="flex items-center justify-between bg-pink-50 p-2 rounded-lg mb-2">
        <div class="flex gap-4 items-center">
        <span class="font-medium">${name}</span>
        <span class="text-gray-500 text-sm">${dueDate}</span>
        <span class="text-gray-500 text-sm">${starttime}</span>
        </div>
        <button onclick="
        todoList.splice(${i}, 1);
        renderTodoList();
        " class="delete-todo-button bg-red-400 text-white px-2 py-1 rounded hover:bg-red-500 transition">Delete</button>
        </div>
    `;
    todoListHTML += html;
  }

  document.querySelector('.js-todo-list')
    .innerHTML = todoListHTML;
}

function addTodo() {
  const inputElement = document.querySelector('.js-name-input');
  const name = inputElement.value;

  const dateInputElement = document.querySelector('.js-due-date-input');
  const time = document.querySelector('.js-starttime');
  const starttime=time.value;
  const dueDate = dateInputElement.value;

  todoList.push({
    //name: name,
    //dueDate: dueDate,
    //starttime: starttime
    name,
    dueDate,
    starttime
  });

  inputElement.value = '';


  renderTodoList();
}

todoList.addEventListener('change', (e) => {
  if (e.target.classList.contains('todo-checkbox')) {
    const text = e.target.nextElementSibling;
    text.classList.toggle('line-through');
    text.classList.toggle('text-gray-400');
  }
});