[제로초] 끝말잇기

---

제로초 코드

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

<script>
  const number = Number(prompt('몇 명이 참가하나요?'));
  const $order = document.querySelector('#order');
  const $word = document.querySelector('#word');
  const $textInput = document.querySelector('.text-input');
  const $btn = document.querySelector('.btn');
  let word; // 제시어
  let newWord; // 새로운 입력한 단어

  const onClickButton = () => {
    if (!word || word[word.length - 1] === newWord[0]) { // 제시어가 비어있는가?
      // 비어 있다.
      word = newWord; // 입력한 단어가 제시어가 된다.
      $word.textContent = word;
      $textInput.value = '';
      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;
  };

  $textInput.addEventListener('input', onInput);
  $btn.addEventListener('click', onClickButton);
</script>

---

순서도 만들어보기

---

코딩 해보기

See the Pen [프로그램] 끝말잇기 by mill (@millfeel) on CodePen.