<div class="container">
    <h1>To-do List</h1>
    <input type="text" id="new-task" placeholder="Add new task">
    <button id="add-task">Add To-do</button>
    <ul id="task-list">
    </ul>
  </div>
.container {
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
      padding-top: 15px;
    }
    
    input[type="text"] {
      padding: 15px 10px;
      font-size: 18px;
      border-radius: 5px;
      border: none;
      margin-bottom: 10px;
      width: 70%;
    }

    button {
      background-color: #54be58;
      color: white;
      padding: 10px;
      border: none;
      border-radius: 5px;
      margin-bottom: 20px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #479849;
    }

    li {
      background-color: #f2f2f2;
      padding: 10px;
      margin-bottom: 10px;
      list-style-type: none;
      border-radius: 5px;
      font-size: 18px;
      text-align: left;
      position: relative;
    }

    li.done {
      text-decoration: line-through;
    }

    li button {
      position: absolute;
      right: 10px;
      top: 4px;
      background-color: red;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    li button:hover {
      background-color: rgb(220, 25, 25);
    }
const newTaskInput = document.querySelector('#new-task');
const addTaskButton = document.querySelector('#add-task');
const taskList = document.querySelector('#task-list');

function addTask() {
  const newTask = newTaskInput.value;
  if (newTask) {
    const li = document.createElement('li');
    li.textContent = newTask;
    taskList.appendChild(li);
    newTaskInput.value = '';
    li.addEventListener('click', completeTask);
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.addEventListener('click', deleteTask);
    li.appendChild(deleteButton);
  }
}

function completeTask(event) {
  const task = event.target;
  task.classList.toggle('done');
}

function deleteTask(event) {
  const task = event.target.parentElement;
  task.remove();
}

addTaskButton.addEventListener('click', addTask);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.