[위코드] 자기소개 페이지 - 랜덤 TMI 기능 설명

1주차 과제는 자기소개 웹페이지 만들기였다.

여기서는 내 웹페이지의 랜덤 TMI 기능을 어떻게 구현했는지 설명해보려 한다.

 

구현한 기능

노란 버튼을 누르면 나에 관한 TMI를 랜덤으로 보여준다.

처음에는 '버튼을 눌러보세요'라는 문구가 뜨고, 

버튼을 누르면 내가 미리 입력해둔 3가지 TMI 중 하나를 보여준다.

 

 

소스 코드

우선 about.html 파일의 'random-area' div 안에 버튼을 만들고 디폴트 문구를 작성했다. 

<div class="random-area">
  <div class="random-title-area">
      <h2 class="random-title">랜덤 TMI</h2>
         <button class="random-btn">Click!</button>
  </div>
            
  <div class="random-contents">
  버튼을 눌러보세요!
  </div>
</div>

 

 

그런 다음 자바스크립트로 randomTMI라는 함수를 만들었다.

이 함수는 다음과 같은 일을 실행한다.

 

1) 디폴트 문구(버튼을 눌러보세요!) 삭제

2) 랜덤 숫자 생성

   - Math.random()는 실수를 랜덤으로 생성한다.

   - Math.random() * 2는 0에서 2까지로 생성 범위를 좁힌다.

   - Math.floor()는 실수를 정수로 변환한다.

   - 즉, Math.floor(Math.random() * 2))는 0에서 2사이의 정수를 랜덤으로 생성한다.

3) 나온 숫자에 따라 변수 tmi에 다른 문구를 저장한다.

4) about.html에 tmi 변수에 저장된 문구를 삽입한다.

function randomTMI(){
    // 1) 디폴트 문구(버튼을 눌러보세요!) 삭제
    const contents = document.querySelector('.random-contents');
    contents.innerHTML = '';

    // 2) 0에서 2사이의 정수를 랜덤으로 생성
    const randomNum = Math.floor(Math.random() * 2);
    
    // 3) 숫자에 따라 tmi 변수에 다른 문구 저장 
    let tmi;
    switch (randomNum){
        case 0:
            tmi= '달리기를 좋아한다.'
            break;
        case 1:
            tmi = '하와이안 셔츠가 많다.'
            break;
        case 2:
            tmi = '빵을 아주 아주 좋아한다.'
            break;
    }
	
    // 4) HTML에 tmi 문구 삽입
    contents.innerHTML = tmi;
}

 

 

이제 버튼을 누르면 randomTMI 함수가 호출되게 만들어야 한다.

그러기 위해 같은 자바스크립트 파일 상단에 아래 코드를 작성한다.

아래 코드는 다음과 같은 일을 한다.

 

돔 컨텐츠가 로드되면 

1) 해당 페이지가 about인지 확인한다.

2) about 페이지라면 버튼에 이벤트 리스너로 randomTMI 함수를 건다.

// 1) 돔 컨텐츠 로드 시 
document.addEventListener('DOMContentLoaded', function(){
   // 2) about 페이지인 경우
   if (document.querySelector('.about')){
        // 3) 버튼의 이벤트 리스너로 randomTMI 함수 걸기 
        document.querySelector(".random-btn").addEventListener('click', () => randomTMI());
    }
}

 

이제 유저가 버튼을 누르면 미리 입력된 3가지 TMI 중 하나가 화면에 뜰 것이다.