[JavaScript 연습] 랜덤 숫자 맞추기

랜덤 숫자 맞추기 게임

정답 숫자의 범위와 선택 할 숫자를 input에 입력하고 버튼을 클릭하면
결과를 도출하는 게임을 만들고자 합니다.

  <h1>Random Number Game</h1>
  <label for="select-num" style="font-size:20px; font-weight: 600">Generate a number between 0 and</label>
  <input id="select-num" type="number">
  <br>
  <br>
  <label for="take-num" style="font-weight:600">Guess the number</label>
  <input id="take-num" type="number">
  <p class="info"></p>
  <h3 class="result"></h3>
  <button>paly!</button>

html 구조입니다.

두 개의 입력란을 만들고, 입력란에 대한 부기설명을 label로 해줬습니다.
나중에 내부 텍스트를 넣어줄 info라는 클래스를 가진 p태그와
result라는 클래스를 가진 h3태그를 만들어 뒀습니다.

const btn = document.querySelector("button");
const info = document.querySelector(".info");
const result = document.querySelector(".result");

function game() {
    const selectNum = document.querySelector("#select-num").value;
    const takeNum = Number(document.querySelector("#take-num").value);
    const rendomNum = Math.ceil(Math.random() * selectNum);

    if(selectNum < 0 || selectNum < takeNum || takeNum < 0 ){
      alert('모든 입력값은 0이상 이여야 하며, 범위는 0이상 입력값 이하가 되어야 합니다.')
      
    }else if(selectNum && takeNum){
      info.innerText = `You chose ${takeNum}, the machine ${rendomNum} `;

      if (takeNum === rendomNum) {
        result.innerText = "You Win!";
      } else {
        result.innerText = "You Lose!";
      }
    }else {
      alert('입력란을 모두 채워주세요.')
    }
  }

btn.addEventListener("click", game);

• js에서 해줘야 할 내용은 내용이 빈 p,h3 태그에 내용을 출력 시켜줘야 하고.
  범위에 맞는 랜덤 숫자를 만들어 줘야 하며,
  입력란의 value들을 인식해서 결과 값을 반환해야 합니다.

• 그러기 위해 내용을 출력해줄 그리고 눌러야 할 버튼 element들을 불러옵니다.
  그리고 game함수를 만들어서 그 안에 랜덤 숫자를 만들어 줍니다.
  이어서 입력란의 value들을 불러옵니다.

• 함수 내에서 숫자와 값을 불러와야 하는 이유는 함수를 호출 할 때마다
  바뀌는 value와 숫자를 만들거나 불러와줘야 하기 때문입니다.

• 첫 번째 if문으로 입력란에 입력한 값들이 음수인지를 체크합니다.
  그리고 범위보다 입력값이 높은지도 체크해 그럴 경우 모든 입력 값은 0 이상, 범위는 입력값 이하가 되어야 한다고 출력해 줍니다.

• 두번째 else if 문에는 정상적으로 입력 했을 때
  info (p태그)에 입력 정보와 랜덤 출력 숫자를 출력해 줍니다.
  그리고 그 안에 if문을 활용하여 result(h3)에, 랜덤 숫자와 입력 숫자가 같을 경우 win 아닐 경우 lose를 출력해 주도록 작성합니다.

간단하게 html 구조를 짜고 함수를 만들어 줬다면,
버튼에 이벤트를 연결해 줍니다. 끝 -
결과 ㄱ

노마드 코더 javascript 챌린지 과제로 랜덤한 숫자를 맞추는
간단한 게임? 을 만드는 과정을 정리했습니다 :)