50 Project In 50 Days-Form wave input

const lables = document.querySelectorAll('.form-control label');

lables.forEach((label) => {
  label.innerHTML = label.innerText
    .split('')
    .map(
      (letter, idx) =>
        `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
    )
    .join('');
});

forEach 는 아래 코드를 콘솔로그로 찍으면 2 4 6 으로 찍힌다. 출력만 하고 끝난다.

const arr = [1, 2, 3];

arr.forEach(num => {
  console.log(num * 2);
});// 2 4 6

map은 반복하면서 새 배열을 만들어 반환

const arr = [1, 2, 3];

const result = arr.map(num => num * 2);

console.log(result); // [2, 4, 6]

label.innerText
→ label 안에 있는 글자를 가져옴. 예: "Hello"

.split('')
→ 글자를 한 글자씩 쪼개 배열로 만듦.
"Hello" → ["H", "e", "l", "l", "o"]

.map((letter, idx) => ...)
→ 각 글자를 태그로 감쌈.

letter : 한 글자 (예: "H")

idx : 순서 (0, 1, 2...)

transition-delay:${idx * 50}ms → 글자마다 0.05초씩 딜레이를 줘서 애니메이션 효과 가능.

예:

"H" → <span style="transition-delay:0ms">H</span>
"e" → <span style="transition-delay:50ms">e</span>
"l" → <span style="transition-delay:100ms">l</span>

.join('')
→ 배열을 다시 문자열로 합침.