<!DOCTYPE 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>Document</title>
<style>
div * {
padding: 10px;
margin: 10px;
}
[readonly] {
background-color: lightgrey;
}
</style>
</head>
<body>
<h3>์ซ์๋ง์ถ๊ธฐ ๊ฒ์</h3>
<p>
์ด ๊ฒ์์ ์ปดํจํฐ๊ฐ ์์ฑํ ์ซ์๋ฅผ ๋ง์ถ๋ ๊ฒ์์
๋๋ค.<br />
์ซ์๋ 1๋ถํฐ 100์ฌ์ด์ ์์ต๋๋ค.
</p>
<div>
<label for="num1">์ซ์</label>
<input type="text" id="num1" name="num1" size="5" />
<button type="button" onclick="guess()">ํ์ธ</button>
</div>
<div>
<label for="count">์ถ์ธกํ์</label>
<input type="text" id="count" name="conut" size="5" readonly />
</div>
<div>
<label for="hint">ํํธ</label>
<input type="text" id="hint" name="hint" readonly />
</div>
<script>
//random,nGuess ๋ณ์๊ฐ ํจ์ ๋ฐ์ ์ ์ธ๋ ์ด์ ๋ ํจ์ ์์ชฝ์ ์ ์ธํ ๊ฒฝ์ฐ,
//๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ์ซ์๋ ๋ณ๊ฒฝ๋๊ณ , ์ถ์ธกํ์๋ 0์ ๊ฐ์ง๊ธฐ ๋๋ฌธ
//์ปดํจํฐ๊ฐ 1๋ถํฐ 100์ฌ์ด์ ์์์ ๊ฐ์ ๊ฐ์ง๋๋ก ์ค์
const random = Math.floor(Math.random() * 100) + 1;
//์ถ์ธก ํ์ ๋ณ์ ์ค์
let nGuess = 0;
function guess() {
//ํ์ธ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ฌ์ฉ์๊ฐ ์
๋ ฅํ ์ซ์๋ฅผ ๊ฐ์ ธ์ค๊ธฐ
let num1 = document.querySelector("#num1").value;
//์ถ์ธกํ์ ์ฆ๊ฐ ํ ์ถ์ธกํ์ ๋์ ๋ณด์ฌ์ฃผ๊ธฐ
nGuess++;
document.querySelector("#count").value = nGuess;
let result = "";
//๊ฐ์ ธ์จ ๊ฐ๊ณผ ์ปดํจํฐ์ ๊ฐ์ ๋น๊ตํ์ฌ
if (num1 < random) {
//๊ฐ์ ธ์จ ๊ฐ์ด ์ปดํจํฐ์ ๊ฐ๋ณด๋ค ์๋ค๋ฉด ํํธ๋์ '์ถ์ธก๊ฐ์ด ์์ต๋๋ค.'
result = "์ถ์ธก๊ฐ์ด ์์ต๋๋ค.";
} else if (num1 > random) {
//ํฌ๋ค๋ฉด ํํธ๋์ '์ถ์ธก๊ฐ์ด ํฝ๋๋ค.'
result = "์ถ์ธก๊ฐ์ด ํฝ๋๋ค.";
} else if (num1 == random) {
//๊ฐ๋ค๋ฉด ํํธ๋์ '์ ๋ต์
๋๋ค.'
result = "์ ๋ต์
๋๋ค.";
}
// ๋ผ๋ ๋ฉ์์ง ์ถ๋ ฅ
document.querySelector("#hint").value = result;
}
</script>
</body>
</html>
- ๋ธ๋ผ์ฐ์ ์ถ๋ ฅ
