바닐라 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들은
간단한 문제이니 구현은 어렵지 않다. 이것도 정답이 아니라 하나의 방법일뿐,
방법은 무궁무진하니 본인의 스타일대로 만들어도 무관하다. 기능만 정상적으로 구현되면 그만,
끝까지 화이팅
Author And Source
이 문제에 관하여(바닐라 JS 챌린지 - 7일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seungmini/바닐라-JS-크롬-앱-만들기-챌린지-7일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)