#13 - Random Choice Picker

프로젝트 목표

이 프로젝트는 콤마를 찍는 만큼 밑에 태그가 생성되고, 엔터를 누르면 랜덤으로 하나의 태그를 선택해주는 것이다.

진행 순서

1. input 적을 수 있는 공간만들기
2. 입력할때마다 태그 생성하도록 함수 호출하기
3. 함수에서 문장을 콤마를 기준으로 나누어 배열에 저장
4. 배열에 따라 태그 노드를 생성하기
5. 랜덤으로 태그 노드 선택하기

✨ HTML

태그 생성해두기

js에서 동적으로 만들어지는 노드들을 담을 하나의 큰 컨테이너 태그를 미리 생성해두는 방법도 있다.

<div id="tag-container"></div>

---

✨ JavaScript

키보드 입력하는 이벤트 - keyup

keyup 이벤트는 사용자가 키보드에서 키를 눌렀다가 뗄 때 발생하는 이벤트이다.
이 이벤트는 키가 눌린 후에 발생하므로, 사용자가 입력한 값을 처리하거나 특정 동작을 수행하는 데 유용하다.

inputNode.addEventListener("keyup", (e) => {
  createTag(e.target.value); // 입력하는대로 태그 생성

  if (e.key === "Enter") { // 랜덤으로 태그 선택
    setTimeout(() => {
      e.target.value = "";
    }, 10);

    randomSelect();
  }
});

문자열 콤마를 기준으로 쪼개기 - 배열로

function createTag(sentence) {
  let tags = [];

  if (sentence.indexOf(",") > 0) { // ,가 있다면
    tags = sentence.split(","); // ,를 기준으로 잘라서 배열에 각 단어 저장
  } else { // 문장에 콤마 없으면 
    tags = []; // 배열 비우고
    tags[0] = input.value; // 첫번째 인덱스에 문장 전체를 저장
  }

  tags = tags.filter((tag) => tag.trim() !== ""); // 빈 배열 제거
// 예를 들면 hi, ,my -> ['hi', ' ', 'my'] 이렇게 되므로 빈 배열은 없애기

  tagContainerNode.innerHTML = ""; // 우선 노드 안을 비우기
  // 안비우면 치는대로 계속 태그 생성됨 --> 태그 만들기 전에 초기화 해줘야함

  tags.forEach((tag) => { // 하나의 배열마다 태그로 만들어 주기
    let tagNode = document.createElement("span");
    tagNode.textContent = tag;
    tagNode.classList.add("tag");
    tagContainerNode.appendChild(tagNode);
  });
}

타이밍 함수

• setInterval(function, 초) - 정해진 시간마다 함수를 반복해서 호출한다.
• setTimeOut(function, 초) - 정해진 시간에 함수를 한번만 호출한다.
• clearInterval - 위의 두 함수를 멈출 수 있다.

function randomSelect() {
  const times = 30;

  const interval = setInterval(() => {
    const randomTag = pickRandomTag(); 
    // 0.1초마다 랜덤 인덱스 정하는 함수 호출 
    //--> 태그 랜덤으로 정하기 --> 여러 태그가 깜빡거리는 효과

    if (randomTag !== undefined) { // 태그가 하나도 없다면 --> 콤마 없다면
      highlightTag(randomTag);

      setTimeout(() => {
        unHighlightTag(randomTag);
      }, 100); // 0.1 초 뒤에 활성화한 태그를 다시 되돌려놓는다. --> 클래스 제거
    }
  }, 100);

  setTimeout(() => { // 0.1 후에
    clearInterval(interval); // 위의 함수를 멈춤 
    // --> 반복적으로 pickRandomTag() 함수 호출하던 setInterval() 함수를 멈춤

    setTimeout(() => { // 0.1초 후에 
      const randomTag = pickRandomTag(); // 마지막으로 랜덤 태그 선택

      highlightTag(randomTag); // 최종 랜덤 태그에 클래스 입력 --> 활성화
    }, 100);
  }, times * 100); // 0.1초
}

Math.floor(Math.random() * array.length)

랜덤으로 인덱스를 고르고 싶을 때 쓰는 문장으로 익숙해져 놓으면 적용할 수 있는 곳이 많을 것 같다.

작동방식은 다음과 같다.

1. Math.random() - (0~1) 중에 랜덤으로 숫자를 고르기 (ex: 0.78)
2. Math.random() * array.length - 배열의 개수 만큼 곱하여 정수로 만든다.
   이렇게 하면 배열의 개수를 넘는 난수를 출력하지 않을 수 있다.
3. array[Math.floor(Math.random() * array.length)] - 정해진 난수를 정수부분만을 꺼내 인덱스에 넣는다.

이런방식으로 진행하면 배열안에서 랜덤으로 값을 정할 수 있다.

function pickRandomTag() {
  const tags = document.querySelectorAll(".tag");
  return tags[Math.floor(Math.random() * tags.length)];
}

classList.add / remove()

이미 css에 스타일링 해둔 클래스를 넣고 빼므로 쉽게 동적인 효과를 줄 수 있다.

function highlightTag(tag) {
  tag.classList.add("pick");
}

function unHighlightTag(tag) {
  tag.classList.remove("pick");
}

---