ForEach()
- 배열에 활용이 가능한 메소드.
- 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메소드.
- map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다.
classList.contains()
- 값이 존재하는지 체크한다. (true/false)
- 이 메서드를 사용해서 타이틀 클래스에 값이 존재하는지 확인한다.
세 번째 프로젝트 시-작 !
html
<body>
<div class="container">
<div class="row max-height align-items-center">
<div class="col-9 col-md-10 mx-auto img-container">
<a class="btn btn-left"><i class="fas fa-caret-left"></i></a>
<a class="btn btn-right"><i class="fas fa-caret-right"></i></a>
</div>
</div>
</div>
</body>
js
(function(){
// 이미지 파일 명
const pictures = [
"contBcg-0",
"contBcg-1",
"contBcg-2",
"contBcg-3",
"contBcg-4"
];
const btns = document.querySelectorAll('.btn');
const imgBox = document.querySelector('.img-container');
let counter = 0
btns.forEach(function(button){
button.addEventListener('click', function(){
if ( button.classList.contains('btn-left') ) {
counter--
if ( counter < 0 ) {
counter = pictures.length - 1
}
imgBox.style.backgroundImage = `url(./img/${pictures[counter]}.jpeg)`
}
if ( button.classList.contains('btn-right') ) {
counter++
if ( counter > pictures.length - 1 ) { // 마지막 이미지가 되었을 때
counter = 0
}
imgBox.style.backgroundImage = `url(./img/${pictures[counter]}.jpeg)`
}
})
})
})()
위 코드는 아래 링크에 있는 자바스크립트 프로젝트를 활용 및 참고하여 작업하였습니다.
https://jsbeginners.com/javascript-projects-for-beginners/#below-list
100+ JavaScript Projects for Beginners! [ Solutions Provided! ]
Looking for JavaScript projects to get more JavaScript practice? Here's a list of over 100 javascript projects for beginners!
jsbeginners.com
728x90
