Hangman (5) - displayWord()

이 포스트는 Udemy에 올라온

Brad Traversy의 20 Web Projects With Vanila JavaScript 강의를 보고 정리하는 내용입니다!

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

이번 프로젝트에서 나를 괴로움과 멘붕에 빠트린 함수.......................

 

 

우선 게임을 처음 시작했을 때는

기본적으로 

 

 

 

 

function displayWord() {
  wordEl.innerHTML = `
    ${selectedWord
      .split("")
      .map(
        (letter) => `
          <span class="letter">
            ${correctLetters.includes(letter) ? letter : ""}
          </span>
        `
      )
      .join("")}
  `;

  const innerWord = wordEl.innerText.replace(/\n/g, "");

  if (innerWord === selectedWord) {
    finalMessage.innerText = "Congratulations! You won! 😃";
    popup.style.display = "flex";
  }
}

 

selectedWord에 split("")을 해주면 단어들을 하나하나씩 나눠서 배열에 넣어준다

wizard=> ["w","i","z","a","r","d"]

이제 이 배열을 map 함수에 loop through해준다.

 

 

처음으로 w가 들어온다.

만약 이 w가 이미 사용자가 시도한 알파벳리스트인 correctLetters에 포함되어 있다면

<span class="letter">w</span>

포함되어 있지 않다면

<span class="letter"></span>가

배열에 들어간다.

 

 

 

만약 사용자가 w,a,d까지 맞춘 상황이라면

 

[<span class="letter">w</span>,

<span class="letter"></span>,

<span class="letter"></span>,

<span class="letter">a</span>,

<span class="letter"></span>,

<span class="letter">d</span>]

가 map을 통해 생성된 새로운 배열.

(화면에는 w _ _ a _ d )

 

 

이 배열이 이제 join('')을 만나 하나의 string이 된다!

(parameter로 ''가 들어갔기 때문에 콤마 없이 쭈욱 연결된다.)

 

<span class="letter">w</span>

<span class="letter"></span>

<span class="letter"></span>

<span class="letter">a</span>

<span class="letter"></span>

<span class="letter">d</span>

 

 

 

이 string이 wordEl의 innerHTML에 들어가게 되고

이게 UI로 display 된다...

 

(오늘 처음 이 코드 봤을 때는 무슨 소린지 도통 이해를 못해서 좌절했었음 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

너무 슬펐다ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

그래도 지금은 좀 개운해ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ)

 

 

 

 

wordEl의 innerText를 받아오면 span 같은 inner element를 제외하고 trimmed된 text만 가져온다.

위의 경우 wad

 

 

 

만약 이 innerText가 selectedWord와 같다면, 즉 단어를 다 맞췄다면

finalMessage에 축하한다는 말을 넣어주고

popup창을 띄운다.

 

 

 

 

 

 

 

 

 

 

 

---

 

 

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

오늘 이 코드 이해한 것만으로도 고생 많았따 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

 

오전에 이거 처음 배웠을 때는 정말 멘붕이었는데

이해 못해서 그냥 몇번을 반복해서 타이핑했고

하다보니까 이해하게 됐다 ㅠㅠㅠㅠㅠㅠㅠㅠ

 

 

오늘 오전보다 조금 더 성장한 것 같아서 기쁘다 ~~~~~~~~~~~~~~