javascript-29: js-randomGame
<body>
<h1 id="a">Random Number Game</h1>
<h3></h3>
<form id="setting">
<label for="maxnumber">Gnerate a number between 0 and</label>
<input
id="maxnumber"
type="number"
required
min="0"
placeholder="양수만 입력하세요"
/>
</form>
<h3></h3>
<form id="user">
<label for="usernumber">Guess the number:</label>
<input id="usernumber" type="number" required min="0" />
<input type="submit" value="Play!" />
</form>
<div id="resultmsg" class="hidden">
<h4></h4>
<span id="msg" class="hidden"></span>
</div>
<script src="./index.js"></script>
</body>
.hidden {
display: none;
}
#setting > label {
font-weight: bold;
font-size: 20px;
}
#resultmsg > h4 {
font-weight: 500;
}
#resultmsg > span {
font-weight: bold;
font-size: 21px;
}
const maxNumber = document.querySelector("#setting");
const maxNumberInput = document.querySelector("#setting input");
const userNumber = document.querySelector("#user");
const userNumberInput = document.querySelector("#user input");
function handleinput(event) {
event.preventDefault();
const number = maxNumberInput.value;
const randomNumber = Math.abs(Math.ceil(Math.random() * number));
const userSetNumber = userNumberInput.value;
const resultMsg = document.querySelector("#resultmsg");
const Msg = document.querySelector("#resultmsg span");
resultMsg.classList.remove("hidden");
const inputResult = document.querySelector("#resultmsg h4");
inputResult.innerHTML = `You chose: ${userSetNumber}, the machine chose: ${randomNumber}.`;
if (userSetNumber > randomNumber) {
Msg.classList.remove("hidden");
Msg.innerHTML = "You won!";
} else if (userSetNumber < randomNumber) {
Msg.innerHTML = "You lost!";
Msg.classList.remove("hidden");
} else {
Msg.classList.remove("hidden");
Msg.innerHTML = "You draw! One more time!";
}
}
userNumber.addEventListener("submit", handleinput);
- 제출시 초기화 안되게 하기 (preventDefault())
- 랜덤숫자 불러오기 (Math.random() * num)
- 소수점 숫자 올림하기 (Math.ceil)
- input 입력값 불러오기 (input.value)
- js로 html elemet에 특정 값 넣기 (innerHTML)
- 클래스이름 추가 및 제거 (ClassList.add/remove)
- 절대값으로 변환 (Math.abs)
nico’s away
<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>
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);
- 차이점:
- input과 form에서 제출된 값은
문자열임. 나중에 숫자를 비교하기 위해 정수형태로 바꿔주는 코드
- parseInt()함수는 문자열을 정수 형태로 바꿔주는 함수입니다.
맨 마지막의 10은 10진수로 변경하라는 의미입니다.
- hidden 같은 style관련 코딩을 하지 않았음
- 2가지 조건에대해서만 작성했고, if 조건 ? X : Y 를 사용함 (X: 조건이맞을경우, Y: 조건이 틀릴 경우)
- input과 form에서 제출된 값은
최종
<body>
<h1 id="a">Random Number Game</h1>
<h3></h3>
<form id="setting">
<label for="maxnumber">Gnerate a number between 0 and</label>
<input
id="maxnumber"
type="number"
required
min="0"
placeholder="양수만 입력하세요"
/>
</form>
<h3></h3>
<form id="user">
<label for="usernumber">Guess the number:</label>
<input id="usernumber" type="number" required min="0" />
<input type="submit" value="Play!" />
</form>
<div id="resultmsg">
<h4></h4>
<span id="msg"></span>
</div>
<script src="./index.js"></script>
</body>
#setting > label {
font-weight: bold;
font-size: 20px;
}
#resultmsg > h4 {
font-weight: 500;
}
#resultmsg > span {
font-weight: bold;
font-size: 21px;
}
const maxNumber = document.querySelector("#setting");
const maxNumberInput = document.querySelector("#setting input");
const userNumber = document.querySelector("#user");
const userNumberInput = document.querySelector("#user input");
function handleinput(event) {
event.preventDefault();
const number = maxNumberInput.value;
const randomNumber = Math.abs(Math.ceil(Math.random() * number));
const userSetNumber = parseInt(userNumberInput.value, 10);
const resultMsg = document.querySelector("#resultmsg");
const Msg = document.querySelector("#resultmsg span");
resultMsg.classList.remove("hidden");
const inputResult = document.querySelector("#resultmsg h4");
inputResult.innerHTML = `You chose: ${userSetNumber}, the machine chose: ${randomNumber}.`;
userSetNumber === randomNumber
? (Msg.innerHTML = "You Won!")
: (Msg.innerHTML = "You Lost!");
}
userNumber.addEventListener("submit", handleinput);
댓글남기기