JavaScript | Проект для твоего портфолио | Генерация случайных цитат на JS. DOM | LocalStorage

Предлагаю вашему вниманию бесплатный интенсив по - JavaScript “Генерация случайных цитат на чистом JavaScript“. Вы поработаете на практике с DOM, LocalStorage. Данный интенсив отлично подойдёт для новичков. Код готового проекта вы можете скачать по следующей ссылке: Тайм коды: 00:00:00 Создание проекта: • Создание проекта на чистом JavaScript, который будет генерировать случайные цитаты и сохранять их. • Создание страницы с блоком для генерации цитат и сохранения. 00:06:00 Стилизация проекта: • Создание стилей для страницы, включая фон, контейнер, кнопки и текст. • Стилизация контейнера для сохраненных цитат. 00:11:30 Написание JavaScript кода: • Создание массива со всеми цитатами и их авторами. • Генерация случайной цитаты при нажатии на кнопку “Новая цитата“. • Сохранение цитаты при нажатии на кнопку “Сохранить цитату“. 00:16:00 Генерация случайных цитат: • Создание функции для генерации случайных цитат на основе длины массива. • Использование функции для получения случайного индекса и обращения к массиву для получения цитаты. 00:22:10 Сохранение цитат: • Создание функции для сохранения цитат в локальное хранилище. • Сохранение айдишников цитат в локальном хранилище. • Отображение цитат на странице при чтении из локального хранилища. 00:28:40 Проблемы с сохранением цитат: • При генерации новой цитаты и ее сохранении, старые цитаты перезаписываются. • Решение: использование JSON строки для сохранения цитат. 00:29:59 Перезапись массива цитат: • При нажатии на кнопку “Сохранить цитату“ создается новый массив, который добавляется к существующему массиву в локальном хранилище. • Для получения старого массива из локального хранилища используется функция “(’quotes’)“. 00:32:59 Проверка на повторение цитат: • При добавлении новой цитаты в массив, проверяется, есть ли уже такая цитата в массиве. • Если есть, то выдается ошибка. 00:37:34 Отображение сохраненных цитат: • При нажатии на кнопку “Показать сохраненные цитаты“, функция “displayShow“ показывает все сохраненные цитаты. • При клике на кнопку, ее текст меняется с “Показать сохраненные цитаты“ на “Скрыть сохраненные цитаты“. 00:43:48 Получение массива сохраненных цитат: • Функция “saveQuotes“ возвращает массив сохраненных цитат из локального хранилища. • Для поиска совпадений используется метод “filter“. 00:45:18 Поиск совпадений в массиве: • Метод инклуц используется для поиска совпадения элементов внутри массива. • С помощью метода мэп содержимое массива сэйви квос преобразуется в числа. 00:48:13 Реализация логики по вскрытию: • Функция маркап квот формирует шаблонную строчку для вставки на страницу. • Функция возвращает шаблонную строчку и вставляет ее на страницу. 00:52:29 Проверка наличия сохраненных цитат: • Если массив найденных цитат равен нулю, возвращается сообщение “нет сохраненных цитат“. 00:53:41 Заключение: • Проект по генерации случайных цитат реализован. • В качестве домашнего задания можно добавить возможность удаления цитат из локального хранилища. Если есть вопросы, пишите их в комментариях, с радостью на них ответим. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“ От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Хочешь стать Frontend разработчиком и изучить JavaScript React ? Советую посмотреть информацию по ссылке ниже: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Также будем рады видеть вас в наших сообществах: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Вконтакте: Telegram канал: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: #LocalStorage #dom #DON #localStorage #JS #js #javascript #интенсив #уроки #бесплатно