해당 글은 노마드 코더의 '바닐라JS' 챌린지의 내용 정리입니다.
실행 화면
주의했던 점
Machine Number를 Submit Number가 넘지 않도록 한다. Machine Number와 Submit Number의 자료형이 'Number'가 아니라면 alert 해주자.(해당 주의점은 시도하였으나, 알 수 없는 이유로 실패, 추후 다시 해볼 예정)
HTML code
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="Intro">Random Number Game</h1>
<div class="randomNumber">
<span class="randomNumberText" style="display:inline-block;">
<h2>Generate a number between 0 to</h2>
</span>
<span class="randomNumberNum" style="display:inline-block;">
<input type="number" min="0">
</span>
</div>
<div class="submitNumber">
<span class="submitNumberText" style="display:inline-block;">
<p>Guess the number: </p>
</span>
<span class="submitNumberNum" style="display:inline-block;">
<input type="number" min="0">
<button>Play!</button>
</span>
</div>
<div class="notionSection">
</div>
<div class="result">
</div>
<script src="app.js"></script>
</body>
</html> 헤맨 부분
div의 구역을 나눠서 텍스트와 input부분을 잘 맞춰서 정렬하는 것. [div의 구역 나누기]
span은 style ="display:inline-block;"을 사용해야 한 블록을 가지게 된다는 것. [span의 성질]
해결 과정에서 얻은 지식
div의 구역 나누기 span의 성질 span은 기본적으로 인라인 타입이므로, 블록의 속성인 div와 다르다. 따라서 div처럼 사용하고 싶을 땐, style속성의 display:inline-block을 사용하자.
JavaScript[JS]
const random = document.querySelector(".randomNumber");
const randomNumber = random.querySelector("input");
const submit = document.querySelector(".submitNumber");
const submitNumber = submit.querySelector("input");
const playbtn = submit.querySelector("button");
const notion = document.querySelector(".notionSection");
const result = document.querySelector(".result");
function playbtnClicked(){
const randomValue = parseInt(randomNumber.value);
const submitValue = parseInt(submitNumber.value);
let randomNum;
// if(randomValue !== 'number' && submitValue !== 'number'){
// alert("Please Write a Number!");
// }
// else
if(submitValue > randomValue){
alert("Please Guess a number between " + submitValue);
}
else{
randomNum = Math.floor(Math.random() * randomValue);
notion.innerText = "You chose: " + submitValue + " the machine chose: " + randomNum;
if(randomNum == submitValue){
result.innerText = "You Win!";
}
else result.innerText = "You Lose!";
}
}
playbtn.addEventListener("click", playbtnClicked); 헤맨 부분
input의 value에 접근하는 방법 [input의 value element] Math.floor(),ceil(),round(),random()의 사용 방법 [Math의 사용법] 변수의 멤버를 체크하는 방법 [변수와 자료형]
input의 value엔 의외로 간단하게, 해당 변수.value로 해결 됐다.
Math의 사용법(해석해보면 뭔지 짐작할 수 있다.) floor() - 내림(바닥)
