HTML
<!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>숫자 게임</title>
<link rel="stylesheet" href="숫자게임.css">
</head>
<body>
<div class="contWrap">
<h3>내가 생각한 숫자는?</h3>
<P class="result">(1~10 사이에 있습니다.)</P>
<div class="box">
<input type="number" value="1" max="10" min="1">
<button type="button" class="startBtn">확인</button>
</div>
</div>
</body>
<script src="숫자게임.js"></script>
</html>
CSS
body {
height: 100vh;
background: linear-gradient(120deg, #0272a4, #f6a564);
}
.contWrap {
position: relative;
width: 400px;
background: rgba(255,255,255,0.7);
padding: 50px 20px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 20px 20px 20px 20px;
}
.box {
display: inline-flex;
}
input {
margin-right: 5px;
padding: 10px 20px;
font-size: 20px;
text-align: center;
max-width: 60px;
}
button {
font-size: 20px;
padding: 7.5px 20px;
}
JavaScript
window.onload = function() {
var input = document.getElementsByTagName("input")[0];
var button = document.querySelector(".startBtn");
var result = document.querySelector(".result");
var arr = ["UP", "DOWN", "Correct!"];
var ran = 0;
button.addEventListener("click", () => {
if(ran === 0){
ran = Math.round(Math.random() * 10);
}
calc(ran);
})
function calc(ran){
var num = input.value;
if(num < ran){
result.innerHTML = arr[0];
} else if( num > ran){
result.innerHTML = arr[1];
} else{
result.innerHTML = arr[2];
}
}
}
결과화면
012
'Web' 카테고리의 다른 글
| Web Speech API - SpeechSynthesis (0) | 2022.01.19 |
|---|---|
| HTML 약어 구문 (0) | 2022.01.17 |
| TweenMax - Card Animation1 (0) | 2021.05.24 |
| 페이지 스크롤 (0) | 2021.05.15 |
| 가위바위보 문제 (0) | 2021.05.12 |
댓글