게임이나 웹사이트에서 특정 행동을 했을 때 알림 문구 또는 경고 문구가 조그맣게 떴다가 사라지는 효과를 주고 싶을 때, setTimeout() 메서드로 해결할 수 있다.

영상으로 만드니 뭔가 귀엽기도 하고..

1. HTML, CSS 코드 작성하기

간단한 div 태그를 만들어 하위에 p 태그 안에 안내 문구를 써 준다. 그리고 그 알림창 div에 class와 id값을 notification-container로 설정해 줬다.

  <div class="notification-container" id="notification-container">
    <p>You have already entered the letter</p>
  </div>

그리고 나서 알림창의 CSS 속성을 설정해준다. 원래 모습은 bottom: -50px;로 화면 아래에 안 보이게 숨겨져 있다가, .show 클래스가 추가되면 transform: translateY(-50px);로 나타나게 했다. 그리고 나서 transition: transform 0.3s ease-in-out;으로 스륵 올라가는 효과를 주었다.

.notification-container {
  background: rgba(0,0,0,.3);
  border-radius: 10px 10px 0 0 ;
  padding: 15px 20px;
  position: absolute;
  bottom: -50px;
  transition: transform 0.3s ease-in-out;
}

.notification-container.show {
  transform: translateY(-50px);
}

만약 알림창이 밑에서 슥 올라오는 모양이 아니라 그냥 화면에서 나타났다가 사라지는 효과를 주고 싶다면, 기존에 display: none; 상태로 두고, .show 클래스가 추가되면 display: block; 또는 display: flex 등으로 바뀌도록 하면 된다.

.notification-container {
  background: rgba(0,0,0,.3);
  border-radius: 10px;
  padding: 15px 20px;
  position: absolute;
  bottom: 50px;
  display: none;
}

.notification-container.show {
  display: block;
}

2. Javascript 코드 작성하기

먼저 아까 만들어 둔 div 태그를 getElementById로 가져온다.

const notification = document.getElementById('notification-container')

그리고 이 글에서 가장 중요한 showNotification() 함수를 만들어 준다. 함수를 호출하면 notification의 클래스에 show가 추가되고 나서, 2초 후 바로 show 태그가 다시 제거된다. setTimeout() 메서드를 통해 2,000 밀리세컨의 시간, 즉 2초의 딜레이 후 알림창이 사라지도록 한다.

// Show notification
const showNotification = () => {
  notification.classList.add('show')
  setTimeout(() => {
    notification.classList.remove('show')
  }, 2000)
}

showNotification() 함수를 적용한다. 키보드의 똑같은 값을 두 번 눌렀을 때 알림창이 떴다가 사라지도록 하는 코드다. 조건에 맞는 값을 중복해서 눌렀을 때도, 틀린 값을 중복해서 눌렀을 때도 알림창이 뜬다.

//keydown letter press
window.addEventListener('keydown', (e) => {
  // only want alphabet keys to get into the eventlistener
  if (e.keyCode >= 65 && e.keyCode <= 90) {
    const letter = e.key
    //we want only letters that are not already pressed
    if (selectedWord.includes(letter)) {
      if (!correctLetters.includes(letter)) {
        correctLetters.push(letter)
        displayWord()
      } else {
        //if same correct key pressed
        showNotification()
      }
    } else {
      if (!wrongLetters.includes(letter)) {
        wrongLetters.push(letter)
        updateWrongLettersEl()
      } else {
        //if same wrong key pressed
        showNotification()
      }
    }
  }
})