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

Описание

Предлагаю вашему вниманию бесплатный интенсив по - JavaScript "Генерация случайных цитат на чистом JavaScript".

Вы поработаете на практике с DOM, LocalStorage.

Данный интенсив отлично подойдёт для новичков.

Код готового проекта вы можете скачать по следующей ссылке:
https://drive.google.com/file/d/1Pz-F7BjKpJIhvT_5L8qTOs4d8eb2Nc6c/view?usp=sharing

💻 Будем рады видеть вас в наших сообществах:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
👉 Вконтакте: https://vk.com/web__skills
👉 Telegram канал: https://t.me/web_skills
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Тайм коды:

00:00:00 Создание проекта:
• Создание проекта на чистом JavaScript, который будет генерировать случайные цитаты и сохранять их.
• Создание страницы с блоком для генерации цитат и сохранения.

00:06:00 Стилизация проекта:
• Создание стилей для страницы, включая фон, контейнер, кнопки и текст.
• Стилизация контейнера для сохраненных цитат.

00:11:30 Написание JavaScript кода:
• Создание массива со всеми цитатами и их авторами.
• Генерация случайной цитаты при нажатии на кнопку "Новая цитата".
• Сохранение цитаты при нажатии на кнопку "Сохранить цитату".

00:16:00 Генерация случайных цитат:
• Создание функции для генерации случайных цитат на основе длины массива.
• Использование функции для получения случайного индекса и обращения к массиву для получения цитаты.

00:22:10 Сохранение цитат:
• Создание функции для сохранения цитат в локальное хранилище.
• Сохранение айдишников цитат в локальном хранилище.
• Отображение цитат на странице при чтении из локального хранилища.

00:28:40 Проблемы с сохранением цитат:
• При генерации новой цитаты и ее сохранении, старые цитаты перезаписываются.
• Решение: использование JSON строки для сохранения цитат.

00:29:59 Перезапись массива цитат:
• При нажатии на кнопку "Сохранить цитату" создается новый массив, который добавляется к существующему массиву в локальном хранилище.
• Для получения старого массива из локального хранилища используется функция "localStorage.getItem('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 Заключение:
• Проект по генерации случайных цитат реализован.
• В качестве домашнего задания можно добавить возможность удаления цитат из локального хранилища.

Если есть вопросы, пишите их в комментариях, с радостью на них ответим.

#js #javascript #интенсив #html #верстка #css #html5 #css3 #frontend #фронтенд