23 проекта (задачи) на JavaScript. Интерактивность и динамика для начинающих frontend-разработчиков

В этом видео мы поговорим с вами о конкретных реальных задачах с интерактивностью и динамичностью, которые выполняет фронтенд разработчик.

Под интерактивностью я имею ввиду способность сайта реагировать на действия пользователя и предоставлять какую-то обратную связь.

То есть это некое оживление сайта.

А динамичность это способность сайта обновлять контент без необходимости перезагрузки всей страницы.

Мы будем рассматривать все на примере двух сайтов.

Это Landing Page для студии интерьерного дизайна и интернет-магазин мягкой мебели.

Эти сайты переделаны с реальных проектов на учебные так, чтобы охватить решение большого количества задач из реальной практики и показать процесс последовательной разработки.

Вы можете разрабатывать какие угодно сайты и для кого угодно.

Это могут быть строительные, туристические, юридические компании, стоматологии, салоны красоты или интернет-магазины.

И не обязательно с мебелью.

Но функционал так или иначе будет повторяться.

И каждая задача, которую мы сейчас рассмотрим, будет в виде отдельного модуля, чтобы в дальнейшем можно было его легко переиспользовать и на других сайтах.

И реализация всех представленных модулей в этом видео будет на чистом JavaScript.

Итак, давайте начнем с первого проекта.

Это Landing Page для студии интерьерного дизайна Smart Design.

И первый модуль это меню.

На каждом сайте есть меню и при адаптиве под мобильные версии

пункты меню обычно скрываются и вместо них появляется иконка меню и здесь необходимо научиться по нажатию на иконку показывать эти пункты а по нажатию на крестик или на любой из пунктов меню оно должно закрываться также еще необходимо уметь при скролле

вносить какие-то изменения на странице.

И особенно часто сталкиваешься с тем, что необходимо менять цвет фона у хедера.

Например, вот здесь изначально он полностью прозрачный, а при скролле он меняет цвет на темно-серый.

Но если мы поднимемся на самый верх страницы, то он снова станет прозрачным.

Третий модуль связан с модальными окнами.

Здесь необходимо уметь открывать и закрывать модальные окна.

Причем иногда бывают ситуации, когда необходимо открывать одно и то же окно по нажатию на разные кнопки.

А в других случаях по нажатию на разные кнопки это будут разные модальные окна.

И сюда я бы также отнес ситуацию, когда необходимо по нажатию на картинку показывать ее увеличенное изображение.

Чтобы это было изображение именно той картинки.

на которой был клик.

Четвертый модуль — счетчики.

Счетчики часто используют на сайтах, когда необходимо рассказать о компании в цифрах.

Например, сколько у нее лет опыта, сколько проектов было реализовано, сколько метров квадратных спроектировано.

И здесь есть несколько задач.

Первое — это сделать один набегающий счетчик.

Когда это получилось, далее необходимо добавить еще несколько.

И сделать так, чтобы набегание в каждом из них имело одинаковую длительность.

То есть, например, чтобы 12 лет опыта и 21 тысяча квадратных метров набегали за одно и то же время.

И чтобы не получилось так, что 12 лет уже набежало, а квадратные метры еще бегут и бегут.

И в конце необходимо сделать так, чтобы это обновление счетчиков происходило только при скролле страницы

в зависимости от видимости определенного элемента.

То есть запускать нам эти счетчики необходимо только тогда, когда пользователь доскролит до нужной секции.

Иначе, если они у нас будут где-то там внизу или в середине страницы и будут обновляться при загрузке страницы, то пользователь, доскролив до них, это набегание уже не увидит.

Пятый модуль – калькулятор.

Чаще всего калькулятор требуется сделать универсальным, поскольку нужно охватывать всевозможные факторы, из которых складывается итоговая стоимость проектов.

Например, в дизайн-проектах многое зависит от типа объекта, и это работа с селектами.

Также влияет общая площадь.

А зачастую это значит, что необходимо добавлять инпуты с тайпом Number и с тайпом Range.

И при этом связывать их между собой.

Также есть еще всякие поправочные коэффициенты.

Например по количеству комнат, по срочности.

Еще бывают всякие взаимоисключающие опции.

Тогда мы используем радиокнопки.

и независимые опции тогда в этом случае мы используем чекбоксы и еще необходимо уметь пересчитывать каждый раз итоговую стоимость при любом изменении в селектах или инпутах при этом иногда здесь бывает необходима логика при которой при изменении состояния чекбокса нужно менять цвет границы у его родителя и цвет цены находящийся вместе с этим чекбоксом

Внутри одного родителя.

И это не обязательно должен быть цвет.

Это может быть любое свойство.

Но если мы например выбрали первый чекбокс, то цветная граница должна добавиться к его родителю.

То есть не ко второму и не к третьему элементу, а именно к первому.

На сайтах часто проводят всякие акции со скидками и в этом случае необходимо добавлять таймеры.

То есть выводить актуальное время до окончания акции, которое должно каждую секунду обновляться.

Причем разница между текущей датой и датой окончания акции должна разбиваться на целые дни, часы, минуты и секунды.

Еще сейчас вы видите на примере с секундами, как обновляется окончание у слова секунд, в зависимости от их количества.

Так вот для секунд это делать не так необходимо, потому что оно будет часто мелькать перед глазами.

А вот для дней, часов и минут иногда это необходимо добавлять.

То есть, если, например, остается 5, тогда это дней.

А если остается 2, тогда это уже дня.

Седьмой модуль – аккордеон.

Для тех, кто не знает, аккордеон – это элемент, который позволяет развертывать и сворачивать блоки с информацией, как гармошка.

Его используют, когда необходимо скрыть часть информации, чтобы не перегружать страницу.

но чтобы пользователь при необходимости мог ее посмотреть аккордеон часто используют в секции часто задаваемые вопросы где показываются только вопросы а чтобы посмотреть ответы их необходимо развернуть и здесь необходимо уметь разворачивать именно на ту высоту

которую занимает содержимое ответа.

Еще на сайтах бывает кнопка соцсетей и по нажатию на нее необходимо отображать или скрывать список иконок социальных сетей.

И помимо этого еще иногда необходимо менять состояние самой этой кнопки.

например удалять анимацию и заменять иконку практически на всех сайтах есть формы где клиенты могут оставлять заявки и нам необходимо уметь валидировать данные из этой формы то есть проверять их на корректность часто мы проверяем чтобы поля не были пустыми и были корректно заполнены на каждое несоответствие необходимо показывать пользователю соответствующее предупреждение также здесь необходимо уметь подключать маски

для номера телефона.

И после того, как данные будут заполнены корректно, необходимо их отправлять на сервер, там обрабатывать и затем отправлять заявку из формы на почту владельца сайта или в телеграм группу.

И еще при скролле часто требуется добавлять элементам различные плавные анимации.

Здесь необходимо уметь запускать анимацию и знать, как это делается в определенный момент времени.

То есть, как запускать анимацию, когда мы долистали до определенной секции или до определенного элемента или до определенной части этого элемента.

И чтобы не переполнять этот сайт, весь остальной функционал мы рассмотрим на примере интернет-магазина Мягкой Мебели.

Это многостраничный сайт и здесь на каждой странице также есть модальные окна, но мы уже с вами их рассмотрели.

И в этом модальном окне у нас расположены табы.

Для тех, кто не знает, табы это такие элементы, которые позволяют переключаться между разными блоками с информацией.

Они обычно используются, когда необходимо разделить информацию на несколько категорий.

Причем на многостраничном сайте необходимо сделать так, чтобы модальные окна и табы работали на каждой странице.

Помимо этого бывают ситуации, когда на странице есть несколько табов и необходимо, чтобы работал каждый из них.

Причем это могут быть не только табы, но и другие элементы.

И давайте на этой странице товара я вам расскажу, что здесь есть еще.

Это модуль с выбором активной картинки, где самой этой активной картинке добавляется граница, а у всех остальных неактивных картинок эта граница удаляется.

При этом сама активная картинка выводится в блоке выше.

Следующий модуль Zoom.

Эффект зумирования чаще всего добавляют в интернет-магазинах для карточек товаров.

Здесь необходимо уметь отслеживать положение курсора мыши и при наведении на определенную область выводить ее увеличенное изображение.

Еще один модуль, связанный с положением курсора мыши, это смена картинки при наведении.

Здесь также необходимо сначала научиться это делать на одном элементе, а потом добавлять этот эффект ко всем необходимым элементам на странице.

Следующий модуль это кнопка показать еще.

Ее часто добавляют, когда какой-то информации слишком много.

Это могут быть как характеристики товара, так и например картинки в галерее.

Изначально показывается основная часть, а дополнительная уже по нажатию на эту кнопку.

Причем здесь у самой кнопки еще меняется текст.

и поворачивается иконка.

Еще мы не до конца рассмотрели главную страницу.

Здесь у нас есть модуль со слайдером.

Для тех, кто не знает, слайдер — это элемент, который позволяет просматривать несколько изображений или блоков с информацией по очереди, используя стрелки, точки и другие элементы навигации.

Если вы только изучаете JavaScript, то для вас будет полезной практикой написать свой слайдер, где будет хотя бы простое переключение по стрелкам и точкам.

И потом уже можно познакомиться с возможностями слайдера Swiper.

Это переключение слайдов по нажатию на стрелки, на точки, на стрелки клавиатуры, установка количества слайдов для показа, расстояние между слайдами, скорость смены слайда, какой будет стартовый слайд и количество слайдов, пролистываемых за один раз.

Здесь же еще можно рассмотреть, как добавлять свободный режим, автоматическое переключение слайдов и различные эффекты смены слайдов.

И еще на сайтах иногда добавляют кнопку, по нажатию на которую пользователь может плавно перейти на верх страницы.

А сама она появляется только тогда, когда страница будет прокручена на определенное количество пикселей.

Следующее, что необходимо уметь, это выводить товары по категориям на страницу.

То есть, например, у нас в интернет-магазине Мягкой Мебели есть база данных, в которой хранятся диваны, кровати, коресла и пуфы.

И при переходе на страницу диванов,

мы должны делать запрос к базе данных и в ней отфильтровывать только диваны и так для каждой категории и тоже самое необходимо делать для страницы одного товара то есть в зависимости от того на какой диван мы захотим посмотреть на странице товара должна подгружаться соответствующая информация именно о нем следующий модуль связан с фильтрами

Здесь необходимо уметь обновлять данные без перегрузки всей страницы и при этом фильтровать товары по нескольким критериям одновременно.

И последний модуль, который мы здесь рассмотрим, это корзина.

Она есть практически на всех интернет-магазинах.

Покажу, например, с диванами.

Здесь необходимо реализовать добавление дивана в корзину и удаление из нее со страницы товара и также удаление дивана

на странице самой корзины.

Еще необходимо менять состояние корзины в зависимости от того будет она пустой или в ней будут какие-то товары.

В самой корзине для каждой модели должен быть счетчик с возможностью выбирать количество штук данной модели.

И в корзине каждый раз должна пересчитываться итоговая стоимость при добавлении, удалении или изменении количества позиций товара.

И если вы хотите системно всему этому научиться, то приглашаю вас на свой курс по фронт-энд разработке на JavaScript.

В этом видео я рассказал лишь про практическую часть.

Помимо этого, есть еще 4 модуля, где я даю все теоретические знания.

Здесь собрана вся полезная информация, которая необходима для практики.