-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
39 lines (32 loc) · 1.12 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const inputs = document.querySelectorAll(".input-field");
const toggle_btn = document.querySelectorAll(".toggle");
const main = document.querySelector("main");
const bullets = document.querySelectorAll(".bullets span");
const images = document.querySelectorAll(".image");
inputs.forEach((inp) => {
inp.addEventListener("focus", () => {
inp.classList.add("active");
});
inp.addEventListener("blur", () => {
if (inp.value != "") return;
inp.classList.remove("active");
});
});
toggle_btn.forEach((btn) => {
btn.addEventListener("click", () => {
main.classList.toggle("sign-up-mode");
});
});
function moveSlider() {
let index = this.dataset.value;
let currentImage = document.querySelector(`.img-${index}`);
images.forEach((img) => img.classList.remove("show"));
currentImage.classList.add("show");
const textSlider = document.querySelector(".text-group");
textSlider.style.transform = `translateY(${-(index - 1) * 2.2}rem)`;
bullets.forEach((bull) => bull.classList.remove("active"));
this.classList.add("active");
}
bullets.forEach((bullet) => {
bullet.addEventListener("click", moveSlider);
});