code review: ToDo List

ПЛЮСЫ:

+ есть комментарии
+ есть явно выраженный стиль кода: формат имен, отступы
+ осмысленные имена переменных и функций
+ используется const для неизменяемых переменных
+ предпринята попытка декомпозиции (код оформлен в несколько разных функций)
+ работает на узком экране (на мобильном)
+ работает как Enter, так и нажатие кнопки "добавить"


МИНУСЫ:

По оформлению проекта:
- нет README, не описана цель проекта, нет инструкции как разворачивать и запускать
- нет истории коммитов, это очень плохо
- не выдержан стиль кода: где-то есть точка с запятой, где-то нет, разные кавычки (в 70-й строке)

По работе проекта:
- Очень мало функций (только добавление и удаление строк). Как минимум хотелось бы отмечать задачу как "сделано".
- Есть легко находимый баг — при добавлении большого количества пунктов они сначала залезают на дату, а потом и вовсе вылазят за край экрана, приложением становится невозможно пользоваться. Это сразу создаёт впечатление недоделанного продукта.
- На узких экранах вёрстка масштабируется некорректно.
- Страница имеет заголовок "Document", хотя должно быть что-то типа "ToDo List".

По коду (HTML и CSS более-менее ок, комментирую только JS):
- Строки 1-4: добавляются поля в глобальный объект window
- Строка 2: кнопка отмечена идентификатором "#btn". Пока это единственная кнопка на странице, проблемы нет. Но что если появится ещё хотя бы одна?
- Строки 8-12: создание массива и цикл можно заменить на один вызов map()
- Строка 9: функция берёт данные из замыкания, а не из параметров, это помешает её переиспользовать
- Строка 20: нет обработки ошибок при загрузке данных
- Строка 28: icon.className = 'far fa-trash-alt'; - тут лучше сделать через classList.add()
- Строка 41: ToDo добавляется в глобальное пространство имён. Название ToDo не отражает суть функции (обработчик события submit, добавление задачи).
- Строка 43: условие можно инвертировать и убрать лишнюю вложенность
- Строки 49-61: тут явное дублирование кода с функцией загрузки, это очень плохо
- Строки 68-70: очень ненадёжный механизм получения строки даты, который поломается на чужой локали. Посмотрите Intl.DateTimeFormat и Date.prototype.toLocaleDateString
- Строка 70: такое лучше делать через распаковку: const [month, date, year] = date
- Строка 78: непонятно как взявшийся тут кусок инициализации. Эта строка должна быть в функции инициализации.
- Замусоривается глобальное пространство имён. Это плохо и ведёт к багам, используйте паттерн IIFE или ES модули.
- Плывёт ответственность функций, но это пока нормально, придёт с опытом. Например, loadTasksFromLocalStorage не только загружает данные из стораджа, но и меняет DOM. Отсюда идёт дублирование кода и проблемы с последующей его модификацией (например, попробуйте добавить кнопку массового удаления задач).


РЕКОМЕНДАЦИИ:

- включать strict mode в своём коде; проще всего это сделать через <script type="module">, заодно и импорты заработают
- начать применять npm и eslint
- использовать JSDoc вместо произвольных комментариев к функциям
- использовать интерполяцию строк вместо конструкций вида date[1] + ' ' + date[2] + " " + date[3]
- использовать константы вместо копипаста строк, как тут: getItem('tasks'), setItem('tasks')
- использовать переменные в css для указания цветов и прочих повторяемых значений
- начать писать функции, которые принимают параметры
- не хранить данные в вёрстке