Как запретить создание новой задачи в ToDo в JavaScript?

Как запретить создание новой задачи в JavaScript до тех пор пока input не будет заполнен пользователем?

    <section class="todoForm">
        <div class="form">
            <!-- LEFT COLUMN -->
            <div class="left-column">
                <div class="title-text">Список дел:</div>
                <div class="todos-list">Список пуст...</div>
                <div class="todos">
                    <div class="todo"></div>
                </div>
            </div>
        </div>
             <!-- /.LEFT COLUMN -->
             <!-- RIGHT COLUMN -->
        <div class="right-column">
            <div class="title-text" placeholder="Добавить новое дело">Добавить новое дело</div>
            <div class="create-todo">
                <input type="text" name="name" required>
            </div>
            <button class="addTodo">Добавить дело</button>
        </div>
        <!-- /.RIGHT COLUMN -->
        </div>
    </section>
    <script src="js/script.js"></script>
</body>
let button = document.querySelector(".addTodo");
let todosList = document.querySelector(".todos-list");
let todos = document.querySelector(".todos");
let input = document.querySelector("input");
let todo = document.querySelector(".todo");

button.addEventListener("click", addTodo);
button.addEventListener("click", function(event) {
    // скрытие фразы "Список пуст"
    todosList.hidden = true;
    // очистка input
    input.value = " ";
    // если не заполнен input
       if (input.value === ' ') {
            alert("Добавьте новое дело!");
            addTodo.preventDefault();
    };
});


// добавление нового дела
function addTodo(event) {
    let li = document.createElement("li");
    li.className = "createTodo";
    li.textContent = input.value;
    todos.append(li);

    // если не заполнен input
    if (input.value === ' ') {
        addTodo.preventDefault();
    };
}

// смена состояния дела: сделано / не сделано
todos.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      event.target.classList.toggle('completedTodo');
    }
  }, false
);


Ответы (0 шт):