Введение и важность проектов 0:00 Учить теорию и решать задачи по JavaScript полезно, но проекты помогают глубже понять язык. Автор выпускает мини-проекты на своем канале, первый из которых был викториной. Сегодняшний проект - генератор QR-кодов.
Описание проекта и его цели 0:52 Генератор QR-кодов будет генерировать коды по введенному тексту. В описании видео будет ссылка на телеграм-канал с исходным кодом и стилями. Пример использования: ввод ссылки и сканирование QR-кода для перехода в телеграм-канал.
Структура проекта и разметка 2:07 Приложение имеет блок для предотвращения многократного генерирования кодов. Разметка включает в себя форму для ввода текста, кнопку отправки и элемент для отображения QR-кода. Использование формы для отправки данных через обработчики событий.
Стили и их настройка 3:52 Настройка стилей для текста и фона с помощью псевдоэлементов. Демонстрация изменения цвета текста при выделении. Стили для в-рапера, заголовков, формы и QR-кода.
Завершение стилей и переход к JavaScript 5:52 Стили для кнопки и блока QR-кода. Важность вложенности QR-кода в в-рапер для корректной работы. Завершение настройки стилей и переход к JavaScript.
Логика приложения 7:07 Определение переменных для элементов формы. Пользователь вводит ссылку в форму, которая будет использоваться для генерации QR-кода. Использование стороннего сервиса для генерации QR-кода по введенной ссылке.
Обработка событий формы 9:05 Привязка события submit к форме. Устранение перезагрузки страницы при каждом нажатии кнопки. Использование функции preventDefault для предотвращения стандартного поведения формы.
Получение данных из инпута 10:05 Создание константы для хранения значения инпута. Использование метода trim для удаления лишних пробелов. Объяснение разницы между значением и placeholder.
Защита от повторной отправки 12:05 Проверка значения инпута на предмет изменений. Использование переменной для хранения предыдущего значения инпута. Оптимизация кода для предотвращения ненужных запросов.
Генерация QR-кода 14:05 Изменение текста кнопки на "идет создание кода". Вставка ссылки на сервис для генерации QR-кода в атрибут src изображения. Вставка значения инпута в ссылку для генерации уникального QR-кода.
Обработка загрузки изображения 16:03 Отправка запроса на сервер для получения QR-кода. Использование события "load" для отображения QR-кода только после загрузки изображения. Добавление класса "active" к блоку для отображения QR-кода.
Обработка ошибок 18:03 Добавление события "error" для обработки ошибок при загрузке изображения. Отображение оповещения для пользователя об ошибке. Проблема с повторным отображением ошибок при каждом новом сабмите.
Решение проблемы с повторными ошибками 20:03 Использование свойства "lazy" для перезагрузки страницы после оповещения об ошибке. Удаление событий "load" и "error" при перезагрузке страницы. Проверка работы решения.
Удаление QR-кода при удалении текста 21:03 Добавление события "input" к текстовому полю для отслеживания изменений. Удаление класса "active" у блока для отображения QR-кода при отсутствии текста в поле. Проверка работы удаления QR-кода при удалении текста.
Заключение 23:03 Обещание оставить ссылку на опишку в отдельном месте. Призыв к зрителям оставлять комментарии и пожелания по проектам. Благодарность за просмотр и пожелание удачи.
