[js]끝말잇기 만들기

끝말잇기 구현하기

1. 순서도 📝

2. 코드

<div class="game-wrap">
  <div><span id="order">1</span>번째 참가자</div>
  <div>제시어 : <span id="word"></span></div>
  <input type="text">
  <button>입력</button>
</div>

<script>
  const number = parseInt(prompt('참가자의 수를 입력해 주세요.'));
  const $order = document.querySelector('#order');
  const $input = document.querySelector('input');
  const $button = document.querySelector('button');
  const $word = document.querySelector('#word');
  let word;
  let newWord;

  const onClickButton = () => {
    if(!word || word[word.length -1] === newWord[0]) {
      word = newWord;
      $word.textContent = word;
      const order = Number($order.textContent);
      if(order + 1 > number) {
        $order.textContent = 1;
      } else {
        $order.textContent = order + 1;
      }
    } else {
      alert('올바른 단어가 아닙니다.')
    }
    $input.value = '';
    $input.focus();
  };

  const onInput = (event) => {
    newWord = event.target.value;
  };


  $input.addEventListener('input', onInput);
  $input.addEventListener('keypress', (e) => {
    if(e.key === 'Enter') {
      e.preventDefault();
      console.log(newWord)
      onClickButton();
    }
  });
  $button.addEventListener('click', onClickButton);

</script>