JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="ru">

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/style.css">

    <title>TODO</title>

  </head>

  <body>

    <div class="block">

      <div class="control">

        <input class="field" placeholder="Введи задачу">

        <button class="add" type="button">+</button>

      </div>

      <div class="list"></div>

    </div>

    <script defer src="js/todo.js"></script>

  </body>

</html>

CSS

.style-for-task {
  font-family: Tahoma, sans-serif;
  font-size: 16px;
}

.success {
  background-color: lightgreen;
}

JavaScript

const field = document.querySelector('.field');
const button = document.querySelector('.add');
const list = document.querySelector('.list');

function createTask(value) {
  const task = document.createElement('DIV');
  const taskText = document.createElement('SPAN');
  const taskCheckbox = document.createElement('INPUT');

  task.classList.add('style-for-task');
  taskText.textContent = value;
  taskCheckbox.setAttribute('type', 'checkbox');

  taskCheckbox.addEventListener('click', completeTask);

  task.append(taskCheckbox);
  task.append(taskText);

  return task;
}

function addTask() {
  if (field.value) {
    const newTask = createTask(field.value);
    list.append(newTask);
    field.value = '';
  }
}

function completeTask(event) {
  const target = event.target;

  if (target.checked) target.parentElement.classList.add('success');
  else target.parentElement.classList.remove('success');
}

button.addEventListener('click', addTask);