바닐라 JS 챌린지 - 7일차

랜덤 숫자게임 구현

이틀간의 코딩 과제, 지금까지 배웠던것을 모두 이용해서 랜덤숫자게임을 구현해야 한다.

사용한 기능

• html, css, JavaScript;
• <input type="text", "range", "button">;
• document.querySelector();
• eventHandler();
• if / else;
• Math.floor() / Math.random();
• add.EventListener();
• ${xxx}
• innerText

구현과정

HTML -> JavaScript -> CSS 순으로 작성하였다.

원래의 예시화면에서는 랜덤으로 출력할 숫자의 범위를 단순하게 text area 안에 넣어주는거였지만,
여기저기 조사하다가 어떤 수강생이 range 타입을 이용해서 제작한걸 보고 따라하게 됬다.

html 파일에서 range 타입의 bar 를 생성해 min = 0, max = 100 의 값으로 설정을 하고
10의 단위로 눈금을 줘서 나중에 커서로 이동하며 원하는 숫자를 input 할 수 있게 하였다.

그리고 그 밑에 랜덤으로 발생할 숫자와 일치해야될 input 값을 추가할 text area 를 만들었다.
사용자는 이곳에 입력한 숫자와 랜덤으로 발생할 숫자가 일치하면 승리하고, 틀리다면 지게 된다.

(*코드를 전부 공유하면 안된다니까 부분적으로만 올리는걸로)

range type

<input type="range" list="tickmarks" id="set-range" 
 min="0" max="100" step="1" />   --->  range type 생성

<datalist id="tickmarks">   ---> range의 눈금생성
           <option value="0" label="0"></option>
           <option value="10"></option>
           <option value="20"></option>
           <option value="30"></option>
           <option value="40"></option>
           <option value="50"></option>
           <option value="60"></option>
           <option value="70"></option>
           <option value="80"></option>
           <option value="90"></option>
           <option value="100" label="100"></option>
       </datalist>

JavaScript 파일에서는 range 의 이동값을 value 로 가져올 수 있게 하고,
textbox에 입력한 숫자와 range의 이동으로 만들어낸 범위에서 랜덤으로 출력되는 숫자가
일치한다면 이겼다는 결과를 출력해주고, 그렇지 않다면 졌다는 결과를 출력하는 핸들러 함수를 만들었다.

핸들러는 총 두가지, range의 이동에따라 값을 input 하는 handlerRange() 와
위에서 말한것처럼 숫자의 일치에 따라 결과를 text로 출력해주는 handleInputValue() 를 작성한다.

handlerRange()

function handleRange(e) {
 endNum.innerText = `숫자의 범위를 정하세요, 범위는 0부터 ${setRange.value} 까지입니다.`
}

handleInputValue()

function handleInputValue(e) {
    const machine = Math.floor(Math.random() * setRange.value) + 1; 
    inputResult.innerText = `당신의 선택:${inputNum.value}, 나의 선택:${machine}`;

    if (parseInt(inputNum.value) === machine) {
        inputResultTxt.innerText = "당신이 이겼습니다!!";
        inputResultTxt.style.color = `#72CC50`  // 이겼을때 포인트컬러로 강조해준다.
    } else {
        inputResultTxt.innerText = "당신이 졌습니다!!";
        inputResultTxt.style.color = `black`
    }
}

그리고 최종적으로 이 모든 핸들러를 실행시킬 addEventListener() 를 만들어 실행시킨다.

addEventListener()

setRange.addEventListener("input", handleRange);
setRange.addEventListener("change", handleRange);
inputBtn.addEventListener("click", handleInputValue);

이것들말고도 기본적으로 html에서 js 파일로 가져와야하는 querySelector 나 기타 css들은
간단한 문제이니 구현은 어렵지 않다. 이것도 정답이 아니라 하나의 방법일뿐,

방법은 무궁무진하니 본인의 스타일대로 만들어도 무관하다. 기능만 정상적으로 구현되면 그만,

끝까지 화이팅