С сегодняшнего дня я буду делать 10 проектов за 10 дней. Эти проекты создаются в основном с помощью HTML, CSS и Javascript.
Проект №1 = ( ) =› {Расширение карточек}
В этом проекте я реализую основы HTML, CSS и Javascript. Расширение карт — первый проект, который будет показан в этой статье. Будет пять карт, которые расположены рядом по горизонтали. Что делает мой последний сайт, так это то, что когда я нажимаю на любую из карточек, эта карточка расширяется и покрывает почти весь вид.
Мой Index.html содержит только контейнер div, который включает пять div. Пять div имеют один и тот же класс. Мне нужно представление стека, которое будет отображаться бок о бок по горизонтали. Для этого необходимо использовать свойство flex. Контейнер div, имя класса которого также является контейнером с пятью div, должен быть написан как display flex.
В Index.html всего пять разделов, поэтому давайте продолжим с style.css, который позволяет мне располагать панели в центре представления и придавать им эстетичный вид. Во-первых, начал с кузова. Тело должно иметь свойство flex, а также justify-content: center, align-items: center, чтобы разместить контейнер в центре представления. Он также должен иметь высоту 100 vh, чтобы покрыть весь размер представления. Контейнер также должен иметь display: flex. Я не хочу покрывать всю ширину представления, поэтому ширина контейнера: 90vw.
Важной частью является раздел класса панели. Он имеет background-size: auto 100%, чтобы изображение отображалось в исходном размере. Background-position: center, чтобы центрировать изображение, и no-repeat, потому что я не хочу повторять изображение. 50px углового радиуса должно быть достаточно, чтобы углы выглядели красивее. Критическая часть касается свойства flex. Когда я нажимаю на каждую панель, я хочу, чтобы она отображалась больше, поэтому я должен определить flex: 0,5 по умолчанию. При щелчке этому свойству flex будет присвоено значение 5. Кроме того, переход: flex 0.7s easy in делает эффект плавного перехода после щелчка.
Я создал активный класс для div. При нажатии любой из карточек к этому div будет добавлено свойство активного класса, которое расширяет div. Итак, .panel.active: { flex: 5 } будет достаточно, чтобы развернуть выбранную карточку.
Я создал скелет с помощью HTML, красиво выглядел с помощью CSS. Теперь пришло время добавить немного функциональности. Джаваскрипт!
Прежде всего, я должен превратить весь класс панели в константу. Я могу использовать querySelectorAll(.panel) для получения всех элементов div, имя класса которых — панель.
У меня есть массив, называемый панелями. Я могу использовать цикл for или forEach и добавить в класс свойство «active». Мне нужен прослушиватель событий, чтобы сделать это.
Сделав это, мне удалось добавить свойство активного класса к любой карте, на которую нажали, но здесь есть проблема. Когда я нажимаю на любую карту, эта карта будет иметь активный класс. Мне нужно удалить старую, потому что я хочу видеть только одну карту за раз. Для этого я создаю функцию с именем removeActiveClasses() и реализую ее перед добавлением активного свойства. Таким образом, окончательный код показан ниже.
