index.js
const guessForm = document.getElementById("js-guess");
const result = document.getElementById("js-result");
const maxNumber = document.getElementById("maxNumber");
function handleGuessSubmit(e) {
e.preventDefault();
const guessInput = guessForm.querySelector("input");
if (guessInput.value === "" && maxNumber === "") {
return;
}
const max = maxNumber.value;
const random = Math.ceil(Math.random() * max);
const userGuess = parseInt(guessInput.value, 10);
const resultSpan = result.querySelector("span");
resultSpan.innerHTML = `
You chose: ${userGuess},
the machine chose: ${random}.<br />
<strong>${userGuess === random ? "You won!" : "You lost!"}</strong>
`;
}
guessForm.addEventListener("submit", handleGuessSubmit);index.html
<!DOCTYPE html>
<html>
<head>
<title>JS Casino</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Random Number Game</h1>
<div>
<h3 class="js-title">
Generate a number between 0 and <input id="maxNumber" type="number" />
</h3>
</div>
<form id="js-guess">
<label>Guess the number:</label>
<input type="number" max="200" min="5" />
<button>Play!</button>
</form>
<div id="js-result">
<span></span>
</div>
<script src="src/index.js"></script>
</body>
</html>
'바닐라JS' 카테고리의 다른 글
| [바닐라JS] Code Challenge (0) | 2023.01.01 |
|---|---|
| [바닐라 JS] DAY 6 (0) | 2023.01.01 |
| [바닐라JS] DAY 4 element (1) | 2022.12.29 |
| [바닐라JS] DAY3 : function (2) | 2022.12.29 |
| [바닐라JS] DATA TYPE & Array (0) | 2022.12.27 |