CODE KATA #6

CODE KATA 🧗‍♂️

range input을 통해 0~250 사이의 숫자를 사용자가 선택하도록하고, 선택한 범위내에서 Math.random()을 통해 정수 하나를 선택하고, 사용자가 input에 입력한 숫자와 같은 숫자인지를 play! button이 클릭되었을 때 확인하도록한다. 클릭마다 새로운 숫자를 선택한다.

요구조건

input range를 사용
사용자의 범위 설정을 실시간으로 반영
사용자의 숫자가 선택되지 않았다면 play! button이 동작하지 않도록

해결과정

set up

<<h1>Random Number Game</h1>
<h2 class="js-notice">Generate a Number between 0 and</h2>
<input type="range" class="js-range" min="0" max="250" />
<p>
  Guess the Number!
  <input class="js-input" type="number" min="0" max="250" width="200" />
  <button class="js-button">play!</button>
</p>
<span class="js-span"></span>
<h4 class="js-result"></h4>

html 파일은 다음과 같이 작성하였다. "js-notice"는 사용자의 input range의 값에 따라 해당 값을 반영하도록 하였고, "js-input"은 사용자의 입력을 받고, "js-span"과 "js-result"에서는 각각 사용자와 컴퓨터의 값과 승패여부를 반영하도록 하였다.

js 파일에서는 아래의 내용과 같이 html 태그들을 사전에 선언해 주었고,

const range = document.querySelector(".js-range");
const notice = document.querySelector(".js-notice");
const input = document.querySelector(".js-input");
const button = document.querySelector(".js-button");
const span = document.querySelector(".js-span");
const result = document.querySelector(".js-result");

init() 함수 내부에는 addEventListener()를 통해 range에는 input event에 대해, button에는 click event에 대해 반응하도록 하였다.

handleInput()

input event에 대한 반응으로 작동되는 함수 handleInput()은 사용자가 input range로 지정한 값을 notice의 내용으로 포함시키도록 하는 함수이다.

function handleInput(event) {
  const value = event.target.value;
  notice.innerText = `Generate a Number between 0 and ${value}`;
}

handleClick()

play! button을 클릭하면 발생하는 함수 handleClick()은 input.value를 value로서 저장하고, 조건문을 통해 value !== ""인 경우에만 정답 비교를 진행하도록 하여, input에 아무것도 입력이 되지 않은 경우를 무시하도록 하였다.

    const answer = Math.floor(Math.random() * range.value);
    span.innerText = `You chose : ${value}, the machine chose : ${answer}`;
    if (parseInt(value) === answer) {
      result.innerText = "YOU WIN!";
    } else {
      result.innerText = "YOU LOST!";
    }

이후 위와 같은 내용의 코드를 통해 value의 값과 answer의 값을 비교하여 해당하는 내용으로 innerText를 수정하도록 하였다.

---

실행 결과