R.random.html ->main 페이지
웹 처음 배울 떄는 style 파일을 따로 만들어서 분리 할 줄 몰랐습니다.
기존 사이트에 있는 숫자맞추기 예제를 따라해보며 익혔습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Random Game</title>
<style>
h1{
margin-left: 80px;
}
body {
background-color: black;
color: white;
width : 50%;
max-width: 800px;
min-width : 480px;
margin : 0 auto; //중앙 정렬을 하겠다는 뜻
}
</style>
</head>
<body>
<h1>랜덤 숫자 맞추기</h1>
<p>1부터 100까지 랜덤 숫자를 맞춰주세요. 총 10번의 기회가 있습니다.</p>
<div class="form">
<label for="guessField">Enter a guess: </label>
<input type="text" id="guessText" class="guessField">
<input type="submit" value="Summit guess" class="submitButton">
</div>
<div class="resultField">
<p class ="inputNumber"></p>
<p class ="result"></p>
<p class = "hint"></p>
</div>
<script src = "Random1.js">
</script>
</body>
</html>Random1.js
// 필요한 엘리먼트들 선언
let randomNumber = Math.floor(Math.random() * 100)+1;
const inputNumber = document.querySelector(".inputNumber");
const result = document.querySelector(".result");
const hint = document.querySelector(".hint");
const guessField = document.querySelector(".guessField");
const submitButton = document.querySelector(".submitButton");
let count =1;
let resetButton;
// 숫자를 입력 시
function checkGuess() {
let userGuess =Number(guessField.value);
if( count ===1){
inputNumber.textContent='Previous : ';
}
inputNumber.textContent += userGuess+ ' ';
if(userGuess === randomNumber){
result.textContent ="축하드립니다 정답을 맞추셨습니다.";
result.style.backgroundColor ='green';
hint.textContent = '';
setGameOver();
} else if(count ===10){
result.textContent ="게임이 종료되었습니다."
result.style.backgroundColor ='red';
hint.textContent = '';
setGameOver();
} else{
result.textContent ='틀리셨습니다 다시 입력해주세요';
result.style.backgroundColor ='red';
if(randomNumber > userGuess){
hint.textContent = '입력 하신 숫자가 너무 작습니다';
}
else if(randomNumber < userGuess){
hint.textContent = '입력하신 숫자가 너무 큽니다.';
}
}
count++;
guessField.value ='';
guessField.focus();
}
//제출 버튼 누를시
submitButton.addEventListener('click', checkGuess);
// 10번 이상 틀렸을 시
function setGameOver(){
guessField.disabled = true;
submitButton.disabled =true;
resetButton = document.createElement('button');
resetButton.textContent ='게임 다시 시작';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
// 게임 다시 시작 시
function resetGame() {
count =1;
const resetField = document.querySelectorAll('.resultField p');
for(let i =0; i<resetField.length ; i++){
resetField[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
submitButton.disabled = false;
guessField.value ='';
guessField.focus();
inputNumber.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random()*100)+1;
}
'Web -front > HTML,CSS,JS' 카테고리의 다른 글
| 예제 만들면서 배우기 4. Hello world 급 예제 Todolist 만들기. (0) | 2021.03.13 |
|---|---|
| 예제 만들면서 배우기 3. 1~9까지 숫자 빠르게 맞추기 (0) | 2021.03.13 |
| 예제 만들면서 배우기 2 . 간단한 POS기 만들기 (0) | 2021.03.13 |