JS Casino
html
<!DOCTYPE html>
<html>
<head>
<title>Casino</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
</head>
<body>
<h1>Random Number Game</h1>
<h3>Generate a Number between 0 and <span class="maxNum"></span></h3>
<form class="gameForm">
<input class="rangeInput" type="range" min="0" max="200" />
</form>
<div class="numBox">
Guess the number:
<form class="numForm">
<input class="inputNum" type="number" style="width: 50px" />
<button>play!</button>
</form>
</div>
<div class="paintChose"></div>
<h4 class="paintResult"></h4>
<script src="index.js"></script>
</body>
</html>
js
const form = document.querySelector(".numForm"),
range = document.querySelector(".rangeInput"),
inputNum = form.querySelector(".inputNum"),
maxNum = document.querySelector(".maxNum"),
paintChose = document.querySelector(".paintChose"),
paintResult = document.querySelector(".paintResult");
function result(myNum, randNum){
paintChose.innerText=`You chose: ${myNum}, the machine chose ${randNum}`;
myNum = parseInt(myNum);
if (myNum === randNum){
paintResult.innerText=`You won!`;
}
else if(myNum > randNum || myNum < 0){
paintResult.innerText =`This is wrong number.`;
}
else{
paintResult.innerText=`You lose!`;
}
}
function makeRandNum(e){
e.preventDefault();
const myNum = inputNum.value;
const maxValue = range.value;
const randNum = Math.ceil(Math.random() * maxValue);
result(myNum, randNum);
}
function handleInput(){
const maxNumValue = range.value;
maxNum.innerText = `${maxNumValue}`;
form.addEventListener("submit", makeRandNum);
}
function init(){
range.oninput = handleInput;
}
init();
target.oninput = functionRef;
=>range.oninput으로 range value를 실시간으로 받는다.
handleInput()
range value를 받아 출력하고 form을 submit할시 makeRandNum함수를 실행한다.
makeRandNum()
event.preventDefault()로 다시 제출하는것을 막고
내가 입력한 값 myNum
range로 설정한 최대 값 myValue
랜덤으로 생성된 값 randNum 을 만든다.
이 때 randNum 은 Math.random()으로 랜덤한 값의 범위를 maxValue만큼으로 지정해 주고, Math.ceil을 해줘 소수점 아래 자리가 안나오게 해준다.
result()
내가 입력한 값과 랜덤으로 생성된 값을 인자로 받아 비교해 두 값이 같으면 이기고, 같지 않으면 지는 결과를 출력한다.
이 때 이기는 값이 제대로 출력되지 않아 문제를 살펴봤었는데, 내가 입력한 값은 문자열이기 때문에 비교했을 때 항상 두 값이 같지 않게 나온것이였다.
그렇기 때문에 내가 입력한 문자열을 parseInt()를 사용해 정수로 변환해야 한다.
'FRONT > JAVASCRIPT' 카테고리의 다른 글
| 01.프로그래밍이란? (0) | 2021.06.14 |
|---|---|
| [노마드코더] 바닐라 JS로 크롬앱 만들기 마지막(quotes, weather) (0) | 2021.06.10 |
| [노마드코더] 바닐라 JS로 크롬앱 만들기 8일차 (todo) (0) | 2021.06.07 |
| [javascript] LocalStorage에 select option 값 저장하기 (0) | 2021.06.05 |
| [노마드코더] 바닐라 JS로 크롬앱 만들기 6일차(greeting, todo) (0) | 2021.06.04 |