JS) Random number

Cecilia·2023년 1월 2일

목록 보기

31/36

내가 만든 Random Number Game 코드를 기록해보자!

<!--HTML-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Random Number Game</h1>
    <form>
      <div>
        Generate a number between 0 and
        <input type="number" min="0" />
        <span style="visibility: hidden">숫자를 입력해 주세요</span>
      </div>
      <div>
        Guess the number:
        <input type="number" min="0" />
        <button type="submit">Play!</button>
        <span style="visibility: hidden">숫자를 입력해 주세요</span>
      </div>
    </form>
    <div class="infoDiv"></div>
    <div class="resultDiv"></div>
    <div class="warningDiv"></div>
    <script src="index.js"></script>
  </body>
</html>

//Javascript
const generateNumber = document.querySelector("form > :first-child > input");
const guessNumber = document.querySelector("form > :last-child > input");
const btn = document.querySelector("button");

const infoDiv = document.querySelector(".infoDiv");
const resultDiv = document.querySelector(".resultDiv");
const warningDiv = document.querySelector(".warningDiv");

const warningSpan1 = document.querySelector("form > :first-child > span");
const warningSpan2 = document.querySelector("form > :last-child > span");

//btn click -> 비교 시작
function clickBtn(event) {
  event.preventDefault();

  const getNumber = generateNumber.value; //유저가 설정한 숫자 범위
  const getUserNumber = guessNumber.value; //프로그램과 비교할 숫자

  //0 ~ generateNumber 이하 값 중 컴퓨터가 랜덤으로 지정한 값.
  const machineNumber = Number(Math.round(Math.random() * getNumber));

  //input validation
  if (!getNumber) {
    warningSpan1.style.visibility = "visible";
    warningSpan1.style.color = "red";
    warningSpan2.style.visibility = "hidden";
  } else if (!getUserNumber) {
    warningSpan2.style.visibility = "visible";
    warningSpan2.style.color = "red";
    warningSpan1.style.visibility = "hidden";
  } else {
    warningSpan1.style.visibility = "hidden";
    warningSpan2.style.visibility = "hidden";

    //information
    infoDiv.innerHTML = `You chose: <span style="font-weight: bold">${guessNumber.value}</span>, the machine chose: <span style="font-weight: bold">${machineNumber}</span>`;

    //유저가 입력한 값이 비교할 값보다 클때
    if (getNumber < getUserNumber) {
      warningDiv.innerHTML = "입력한 값이 설정한 범위값보다 큽니다!";
      warningDiv.style.color = "pink";
      infoDiv.innerHTML = "";
      resultDiv.innerHTML = "";

      //win
    } else if (getUserNumber > machineNumber) {
      resultDiv.innerHTML = "You won!";
      warningDiv.innerHTML = "";

      //lose
    } else if (getUserNumber < machineNumber) {
      resultDiv.innerHTML = "You lost!";
      warningDiv.innerHTML = "";

      //tie
    } else if (getUserNumber == machineNumber) {
      resultDiv.innerHTML = "ended in a tie!";
      warningDiv.innerHTML = "";
    }
  } //if문
} //clickBtn

btn.addEventListener("click", clickBtn);

//**해결해야할 문제**
//1. machineNumber 0 안뜸 => Math.round()로 0도 나오게 해결함. 정수를 반환하기 때문에 parseInt() 사용 X
//2. 유효성검사(Generate number, Guess number) => 버튼 클릭시 visibility: hidden -> visible로 변경하여 해결함.
//3. 유효성검사 통과시 warningDiv 다시 hidden으로 변경 => ok.
//4. 버튼 다시 클릭시 기존에 있던 info, result 없애기 => innerHTML 다시 이해하여 해결함.
//5. Guess number가 Generate number보다 크면 작동 안 되게 => warningDiv 생성하여 해결함.
//6. 음수는 안 됨! =>  min="0" 해결.

나는 addEventListener 기능 중 submit이 아닌 click으로 만들어보았다.
submit으로 하려니 유효성 검사가 불편해져서 click으로 했다.
HTML input에 required를 넣을 수도 있지만,
required로 나오는 알람이 그닥 예쁘지 않기 때문이다... 😅

그리고 Math.round() 사용은 조금 더 알아보고 써야할듯하다.
아마 내일 조금 더 정돈된 코드를 다시 올리지 않을까!

🎉 2023.01.03 => 아래 코드로 변경!

// const warningSpan1 = document.querySelector("form > :first-child > span");
// const warningSpan2 = document.querySelector("form > :last-child > span");
const [warningSpan1, warningSpan2] = document.getElementsByTagName("span");

Cecilia

'이게 최선일까?'라는 고찰을 통해 끝없이 성장하고, 그 과정을 즐기는 프론트엔드 개발자입니다. 사용자의 입장을 생각하며 최선의 편의성을 찾기 위해 노력합니다.

JS) Random number

JavaScript

JS) 선택자(DOM에서 Element 노드 찾기)

JS) Array() 생성자

0개의 댓글