Помогите оптимизировать скрипт

Вопрос-ответ JavaScript
1

Помогите оптимизировать скрипт. В в курс JS вошел недавно. Точно знаю, что этот кусок кода JS можно сделать лучше, к примеру через функции, чтобы исключить повторяемость кода. Вариант сделать через обычный ховер в css не походит< нужно реализовать именнно через JS.
Задача: Сдвигать елементы-карточек вверх при наведении на них курсором, а затем опускать их вниз, когда курсор покинет область карточки

html-код

<section class="cards-section">
        <div class="wraper">
            <h2 class="cards-section__title">Discover Nature Experiences</h2>
            <div class="cards-section__container">
                <div class="cards-section__card resort ">
                    <img src="/images/resort_img.jpg" alt="">
                    <div class="cards__shade">
                        <h3 class="cards__title">Resort</h3>
                    </div>
                </div>
                <div class="cards-section__card camping">
                    <img src="/images/camping_img.jpg" alt="">
                    <div class="cards__shade">
                        <h3 class="cards__title">Camping</h3>
                    </div>
                </div>
                <div class="cards-section__card beach">
                    <img src="/images/beach_img.jpg" alt="">
                    <div class="cards__shade">
                        <h3 class="cards__title">Beach</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

css - стили

.cards-section{
    text-align: center;
    margin-bottom: 150px;
}

.cards-section__container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: -30px;
}

.cards-section__card{
    border-radius: 20px;
    margin: 30px;
}
 
.cards__shade{
    text-align: left;
    min-height: 285px;
    padding-left: 47px;
    padding-top: 58px;
}

.resort{
    transition-duration: 0.5s;
    background: #BC1A6E;
}
.camping{
    transition-duration: 0.5s;
    background: #CC2D4A;
}
.beach{
    transition-duration: 0.5s;
    background: #D93B30;
}

js - скрипт

let resort = document.querySelector(".resort")
let camping = document.querySelector(".camping")
let beach = document.querySelector(".beach")

resort.addEventListener("mouseover", function(){   
    resort.style.transform = "translateY(-25px)";
});
resort.addEventListener("mouseout", function(){
    resort.style.transform = "translateY(0px)";
});

camping.addEventListener("mouseover", function(){   
    camping.style.transform = "translateY(-25px)";
});
camping.addEventListener("mouseout", function(){
    camping.style.transform = "translateY(0px)";
});

beach.addEventListener("mouseover", function(){   
    beach.style.transform = "translateY(-25px)";
});
beach.addEventListener("mouseout", function(){
    beach.style.transform = "translateY(0px)";
});
2 
const targets = [...document.querySelectorAll('.cards-section__card')]
targets.forEach((target) => {
	target.addEventListener("mouseover", function(){   
	    target.style.transform = "translateY(-25px)";
	});
	target.addEventListener("mouseout", function(){
	    target.style.transform = "translateY(0px)";
	});
})

В коде есть нюанс. document.querySelectorAll('.cards-section__card') возвращает не массив, а массивоподобный объект. Это значит что свойство length и доступ к элементам у него есть, а вот методов массива нет. Я использую spread operator ... чтобы разместить элементы из результата document.querySelectorAll('.cards-section__card') в массив чтобы потом воспользоваться методом для итерации по элементам.

3

Спасибо, открыли глаза на новые функции. Не подскажете хорошие курсы JS, связанные в frontend?

4

У меня нет хороших советов. Вот тут есть ветка с обсуждениями, может там найдешь подсказку

5

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