form이 있고 js 에서 지정한 조건을 만족하면 다음 div으로 넘어간다. 만족하지 않으면 배경색이 바뀌고 애니메이션이 호출된다.
html은 input창을 여러개를 div으로 감싸서 만든다. 그리고 가장 첫 번째 div을 제외하고 나머지 div의 class에 inactive라고 부여한다. input창 오른쪽 끝에 있는 화살표 i 를 눌러 다음 div으로 넘어가는 형식이다. css에 active 클래스를 만들어서 opacity를 1로 inactive는 0으로 해주면 현재 div을 제외하고 다 사라진다.
function animate() {
const arrows = document.querySelectorAll(".fa-arrow-down")
arrows.forEach(arrow => {
arrow.addEventListener("click", () => {
const currentInput = arrow.previousElementSibling;
const parent = arrow.parentElement
const next = arrow.parentElement.nextElementSibling
if (currentInput.type === "text" && validationUser(currentInput)) {
nextSlide(parent, next)
}
})
})
}
function validationUser(user) {
if (user.value.length < 6) {
error()
} else {
return true;
}
}
function error() {
document.querySelector("body").style.backgroundColor = "red"
}
animate()하나씩 살펴보면 먼저 animate란 함수를 만들고 arrows란 변수에 html에서 .fa-arrow-down를 다 가져온다. 그리고 그 arrows에 forEach를 하고 각 arrow element에 이벤트 리스너를 건다. arrow를 클릭할 때마다 실행되는 콜백함수를 만들고 그 안에 arrow를 중심으로 sibling(input 태그), parent(현재 div), next(다음 div)을 html에서 가져온다. 그리고 if문으로 조건을 만족해 다음 div으로 넘어갈 수 있는 함수를 만들어 주면 된다.
validationUser() 함수는 user를 파라메터로 받는다. 여기서 user는 유저가 input에 입력한 value값이다. 그리고 if문으로 조건을 만들고 true가 반환되게 하면 된다. 다시 위로 올라가서 if와 else if로 각 div마다 단계를 넘어가는 것을 설정할 거니까 타입이 user인지 그리고 validationUser()가 true인지 if문에 작성하고 맞다면 nextslide() 함수를 실행한다.
function nextSlide(parent, next) {
parent.classList.add("inactive")
next.classList.remove("inactive")
next.classList.add("active")
}
nextSlide 함수는 지금 div를 숨기고 다음 div을 보여주는 함수다. 그래서 파라메터로 parent와 next 두 개를 받으면 된다.
if (currentInput.type === "text" && validationUser(currentInput)) {
nextSlide(parent, next)
} else if (validationEmail(currentInput) && currentInput.type === "email") {
nextSlide(parent, next)
} else if (validationPassword(currentInput) && currentInput.type === "password") {
nextSlide(parent, next)
} else {
parent.style.animation = "shake 0.1s ease-in"
alert("short")
}똑같이 email, password 에 해당하는 validation 함수를 만들고 두 조건(type과 true)에 해당되면 다음 div으로 넘어가게 설정하고 조건에 부합하지 않는다면 미리 만들어둔 shake 애니메이션을 추가하면 동적인 움직임을 만들 수 있다. 그 외 error 함수나 기타 함수들을 추가하면 된다!
