Привет, мой друг.
На этот раз мы собираемся сделать что-то более практичное, визуальное и ориентированное на фронт.
Кроме того, поскольку JavaScript имел несколько обновлений на протяжении многих лет, вы были бы удивлены, увидев все различные вещи, которые мы теперь можем создать, без необходимости в рамках.
Просто хороший старый ваниль JS.
Хочешь знать, что это такое? Ну, давайте прыгнем прямо!
Что мы собираемся построить?
Это будет этот симпатичный компонент, который отображает цитату при нажатии на изображение своего автора.
И все это работает с простой HTML, CSS и JS.
Вот как это выглядит.
Что нам нужно
Разметка
Давайте начнем с разметки. Во -первых, нам понадобится контейнер для компонента и некоторое пространство как для автора, так и для цитаты.
Это может быть что -то вроде этого …
...
Теперь мы можем добавить текст цитаты и название автора.
...
Наконец, давайте добавим код для кнопки и изображения автора.
Это почти весь код, который нам понадобится, чтобы это произошло.
Вы можете изменить эту разметку по своему вкусу или адаптировать ее, если используете препроцессор. Что -то вроде Мопс Например.
Стиль
Теперь для стиля, это еще одна вещь, которую вы можете свободно изменить, чтобы сделать конечный результат, какой вы хотите.
Кроме того, если вы хотите использовать другого препроцессора, такого как Sass или Stylus, идите вперед. (Первый – мое личное предпочтение)
В этом случае я буду использовать этот стиль.
.switcher {
margin: 1rem;
background-color: #fff;
border: 1px solid #eee;
border-radius: 8px;
font-family: "Helvetica", sans-serif;
margin-bottom: 1.875rem;
max-width: 550px;
}
.btn-image {
display: block;
height: 100%;
width: 100%;
}
.author-btn {
border: 0.125rem solid #4caf50;
border-radius: 50%;
height: 4.5rem;
padding: 0.02rem;
margin-bottom: 1rem;
margin-left: 1rem;
margin-top: 1rem;
overflow: hidden;
transition: opacity 0.2s ease-out;
width: 4.5rem;
}
.author-btn:focus {
opacity: 1;
outline: 0;
}
.author-btn-dimmed {
border-color: #bdbdbd;
border-width: 0.0625rem;
opacity: 0.5;
}
.quotes {
margin-top: 1rem;
background-color: #fafafa;
}
.title {
margin: 0;
padding: 0.5rem 0;
text-align: center;
}
.quote-container {
background-color: #fafafa;
width: 100%;
}
.quote-container-hidden {
display: none;
}
.quote {
border-bottom: 0.06rem solid #e0e0e0;
width: 100%;
}
.quote-text {
width: calc(100% - 2rem);
margin-left: 1rem;
}
.quote-author {
margin: 1rem 0;
}
JavaScript
А теперь здесь приходит забавная часть. Или я должен сказать Интерактивный часть.
Пришло время дать ему немного движения и Groovin ‘с небольшим количеством JS.
Во -первых, нам нужно получить ссылки на элементы, с которыми мы будем взаимодействовать.
const authorsList = document.querySelectorAll(".author-btn");
const quotesList = document.querySelectorAll(".quote-container");
Теперь нам нужно добавить слушателя событий, когда кнопка автора будет нажата. Мы сделаем для всех авторов с этим кодом.
authorsList.forEach((author) => {
author.addEventListener('click', handleClick)
})
Для этого Handleclick Функция, мы должны получить значение индекса для этой конкретной кнопки. Это может быть что -то вроде этого.
function handleClick(event) {
const selectedQuote = parseInt(event.currentTarget.dataset.index, 10);
showQuote(selectedQuote);
}
Теперь, когда у нас есть этот конкретный индекс, мы назовем вспомогательную функцию, которая сделает «переключение» выбранной цитаты.
Эта функция Showquote Буду в основном сравнить, что отображается активная цитата, и какая новая цитата будет отображаться.
Для этого нам нужно отслеживать, что является нашим нынешним индексом. Что -то подобное подойдет
let quoteIndex = 0;
Это пойдет в начале файла вместе с списками авторов и кавычек.
Теперь, чтобы реализовать отсутствующую функцию. Вот что сделает трюк.
function showQuote(index) {
if(index === quoteIndex) return;
authorsList[quoteIndex].classList.toggle("author-btn-dimmed");
quotesList[quoteIndex].classList.toggle("quote-container-hidden");
authorsList[index].classList.toggle("author-btn-dimmed");
quotesList[index].classList.toggle("quote-container-hidden");
quoteIndex = index;
}
И то, что мы делаем здесь, – это игра переключения классов CSS с небольшой анимацией, чтобы получить этот «переключение» эффект.
И это в двух словах, все необходимое для того, чтобы компонент работал.
Сделать все это вместе
Хорошо, со всеми этими частями мы можем взаимодействовать с ним и увидеть, как они работают.
Мы можем добавить больше авторов и кавычек, дублируя разметку для каждого из них и добавив соответствующий текст.
Смотрите этот кодепен Для примера построенного компонента.
И, как я уже говорил, есть ли некоторые изменения и корректировки, которые вы хотите сделать в этот компонент, не стесняйтесь изменить их на содержание вашего сердца.
Вывод
Ну, вот и это! Полностью функционирующая компонент переключения цитаты, полностью построенный с простым старым ванильным JS и некоторыми HTML & CSS.
Интересно, какие динамичные вещи, которые мы можем создать, просто используя технологии Lean Web.
Это не значит, что рамки не полезны или плохи. Но зная, как система работает без куча абстракций, она дает нам лучшее понимание и позволяет нам делать нашу работу намного лучше.
Вместо того, чтобы не знать, как все работает, и в зависимости от милости «всякий раз, когда программа хочет работать должным образом».
Вот и все для этого поста. Как всегда большое спасибо за чтение. Если у вас есть какие -либо вопросы или комментарии, отправьте их на мой путь через Маленькая синяя птица Анкет
Фотография capnsnap на
Оригинал: “https://dev.to/juanfrank77/build-a-quote-switcher-with-vanilla-js-140o”