Hangman (6) - Show Notification & Update Wrong Letters

이 포스트는 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

 

 

 

 

 

// Show notification
function showNotification() {
  notification.classList.add("show");

  setTimeout(() => {
    notification.classList.remove("show");
  }, 2000);
}

showNotification 함수는 간단하다.

notification의 classList에 show를 더해준다(show가 더해진 경우 transform이 되는 걸 CSS에 이미 했다.)

그리고 setTimeout을 이용해서 2초가 지나면 그 show class가 사라지고

원래대로 다시 화면에서 사라진다.

 

 

 

 

 

 

// Update the wrong letters
function updateWrongLettersEl() {
  // Display wrong letters
  wrongLettersEl.innerHTML = `
    ${wrongLetters.length > 0 ? "<p>Wrong</p>" : ""}
    ${wrongLetters.map((letter) => `<span>${letter}</span>`)}
  `;

  // Display parts
  figureParts.forEach((part, index) => {
    const errors = wrongLetters.length;

    if (index < errors) {
      part.style.display = "block";
    } else {
      part.style.display = "none";
    }
  });

  // Check if lost
  if (wrongLetters.length === figureParts.length) {
    finalMessage.innerText = "Unfortunately you lost. 😕";
    popup.style.display = "flex";
  }
}

 

 

wrongLetters array의 길이가 0보다 크다는 것은

이미 letter 몇 개 시도해봤는데 틀린 적이 있다는 뜻

그렇다면 wrong을 띄우고 아니면 공백

 

 

map method이용해서 wrongLetters에 있는 letter 하나씩 받아와서 <span>에 넣어줌

 

[<span>a</span>,<span>w</span>,<span>z</span>]

map이 이런 array를 return해주면

join('')을 쓰지 않았기 때문에

<span>a</span>,<span>w</span>,<span>z</span> 

이렇게 innerHTML에 전달되고

그러면 출력 결과에도 자동으로

,(콤마)가 들어가서

a,w,z 

이렇게 출력된다.

 

 

 

 

 

 

이제 행맨 figure의 parts들을 틀린 횟수에 맞게 하나하나씩 displa해줘야 한다.

wrongLetters array의 length를 가져오면

시도한 틀린 횟수(errors)를 알 수 있다.

 

이 errors보다 작은 figureParts의 Index는 display되고

그렇지 않은 부분은 display 되지 않게

 

나중에 wrongLetters의 length와 figureParts의 length가 같아진다면

행맨이 다 그려질만큼 시도를 했다는 뜻

게임에 졌다는 뜻~

 

finalMessage 넣어주고 popup 띄워준다.