❗️ 요구사항
- 첫 번째 input에 숫자를 넣어 범위를 설정한다.
- 0부터 출력 범위 내에서 랜덤한 숫자를 출력하게 만든다.
- 유저가 고른 숫자와 컴퓨터가 뽑은 숫자가 화면에 함께 출력되도록 한다.
- 유저가 입력한 숫자와 컴퓨터가 출력한 숫자가 동일할 경우 'You won!'을, 다를경우 'You Lost!' 문구가 나타나게 만든다
💡 코드
⭕️ 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>Random - Game</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Random Number Game</h1>
<form id="enter">
Generate a number between 0 and
<input type="number" id="max"/>
<div id="guess">
Guess the number:
<input type="number" />
<button>Play!</button>
</form>
<div id="choose">
<span></span>
<span></span>
</div>
<span id="result"></span>
<script src="game.js"></script>
</body>
</html>⭕️ javascript
const allForm = document.querySelector("#enter");
const guessInput = document.querySelector("#guess input");
const youChosen = document.querySelector("#choose span:first-child");
const machineChosen = document.querySelector("#choose span:last-child");
const result = document.querySelector("#result");
function genRandom(min, max) {
const ranNum = Math.floor(Math.random() * (max - min + 1) + min);
return ranNum;
}
function buttonClick(event) {
event.preventDefault();
let max = document.getElementById("max").value;
const guessInputNumber = Number(guessInput.value);
const randomNumber = genRandom(0, max);
youChosen.innerText = `You chose:${guessInputNumber}`;
machineChosen.innerText = `, machine chose: ${randomNumber}`;
if (guessInputNumber === randomNumber) {
result.innerText = "You won!";
} else {
result.innerText = "You lost!";
}
}
allForm.addEventListener("submit", buttonClick);문제 출처: 노마더코드
투명인간