KrooBeet - JavaScript Challenge | Выпуск #7
Дорогие друзья, хочу познакомить вас с очередной практической задачей из JS Challenge.
Эту задачу я хотел решить ещё вчера, но всё никак не мог сделать вёрстку такой, какой хотелось бы. Вернулся домой, отдохнул. Утром приехал в офис и всё стало получаться. Но я чуть-чуть схитрил. До этого выпуска я сперва добавлял элементы на страницу, затем делал стилизацию, а уже после писал функционал.
Сегодня пошёл от обратного. Просто накидал элементов на страницу. Написал для них функционал. А только потом начал их стилизовать. И получилось всё так, как и должно быть. Вообще, мне по факту нужно делать только функционал, но если смотреть в перспективе, то вёрстка и стилизация мне как-нибудь тоже пригодятся. Поэтому я заодно и эти моменты тоже практикую. Но не в этом суть поста.
По недавней традиции хотелось бы рассказать вкратце в чём заключалась задача и каким образом я её решил. Для меня эта задачка была чуть сложнее, чем предыдущие. Скорее из-за того, что пришлось изучить пару новых конструкций в JavaScript, чтобы справиться с задачей без написания велосипеда и г*внокодерства.
И так, в чём заключается задача?:
Представим, что у нас есть одностраничный сайт и на нём нужно сделать слайдер (переключатель) отзывов.
Нажали кнопочку "влево" отобразился предыдущий отзыв
Нажали кнопочку "вправо" отобразился следующий отзыв
Где будем хранить отзывы? Ну, так как настоящая база данных нам не нужна, ибо отзывов будет всего 5, мы будем хранить их в объекте, у которого будут ключи, являющиеся в свою очередь порядковыми номерами наших отзывов, а так же эти самые ключи тоже будут являться объектами, в которых будут храниться следующие данные:
Аватар автора отзыва
Его имя
Текст самого отзыва
И конечно мы не обойдёмся без функций, которые будут обрабатывать и возвращать значения и данные
Коротко о функциях, присутствующих в решении этой задачи:
Функция получения элементов getValues();
Вспомогательная функция setValues() - она будет устанавливать полученные данные в соответствующие места на нашем сайте
Сама функция setValues() будет написана внутри функции getValues(), которая и будет возвращать функцию setValues() (в видео расскажу и покажу подробнее)
Функция checkPosition() будет проверять какой именно отзыв сейчас показывается на странице. И например, если отзыв последний в объекте, то при переключении на следующий отзыв - мы будто вернёмся в начало - к первому отзыву и отобразим уже его. И наоборот. Если стоим на первом отзыве, хотим переключиться к предыдущему, то при нажатии на кнопку переместимся в конец объекта и отобразим последний отзыв в его списке.
P.S. примерно так работает алгоритм при просмотре фотографий в ВК если их несколько. Находясь на последней в к конце, если хотите переключить на следующую, то вы будете перемещены в начало списка фотографий и вновь увидите первую.
И напоследок ещё одна функция - обработчик событий. Она не будет иметь названия. Это будет анонимная функция, которая просто в качестве своего аргумента будет принимать событие, которое мы создадим. С помощью неё мы будем понимать, на какую из кнопок было совершено нажатие. А затем выполнять соответствующие инструкции.
Приятного просмотра 😉
Ссылки:
VK: https://vk.com/kroobeet/
Facebook: / kroobeet
Twitter: / kroobeet
Instagram: / kroobeet
YouTube: https://clck.ru/QpZPb
GitHub:
https://github.com/kroobeet/js-apps-p...
Теги
#kroobeet #javascript #challenge