부트스트랩 http://bootstrapk.com/getting-started/#download
부트스트랩 다운로드 후 이클립스 webapp 파일에 js,css파일 추가
page.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!doctype html>
<html lang="utf-8">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">
<title>Navbar Template · Bootstrap v5.1</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/navbars/">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet">
</head>
<script type="text/javascript" src="page.js"></script>
<body>
<main>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">숫자 맞추기 게임</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
</div>
</div>
</nav>
<br>
<div class="row">
<div class="col">
<input type="text" id="min" onkeyup='printNum()' class="form-control" placeholder="최소값" aria-label="First name">
<div id='result'></div>
</div>
~
<div class="col">
<input type="text" id="max" onkeyup='printNum()' class="form-control" placeholder="최대값" aria-label="Last name">
<div id='result'></div>
</div>
<div class="col">
<button type="button" class="btn btn-primary" onClick="gameStart();">난수 발생</button>
</div>
</div>
<br>
<div class="row">
<div class="col">
<input type="number" name="num" onkeydown="enterCheck()" id="applyNum"
class="form-control" placeholder="숫자를 입력해주세요" aria-label="First name">
</div>
<div class="col">
<button type="button" class="btn btn-secondary" onclick="applyNum();">숫자입력</button>
</div>
</div>
<br>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 200px"></textarea>
<label for="floatingTextarea2">
<div class="log" id="Trace">
</div>
</label>
</div>
<br>
<h2>Challenge log</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">입력한 숫자</th>
<th scope="col">결과</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</main>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>자바스크립트
page.js
var targetNum;
var startStatus = false;
var cnt = 0;
var compare = "";
var min;
var max;
var result = false;
function printNum(){
min = document.getElementById('min').value;
console.log("최소값 : ", min);
max = document.getElementById('max').value;
console.log("최대값 : ", max);
}
function gameStart(){
targetNum = Math.floor(Math.random()*(max-min+1)+min)
console.log("맞춰야될 숫자 : ", targetNum);
}
function Trace() {
this.clear = function() {
document.querySelector('.log').innerHTML = "";
}
this.log = function(msg) {
var count = document.querySelector('.log');
var p = document.createElement('p');
p.id = 'pid';
p.innerHTML = msg;
count.appendChild(p);
let node = document.getElementById('pid');
console.log(node)
console.log(document.querySelector('#pid'));
}
}
var trace = new Trace();
function applyNum(){
var resultTable = document.querySelector('table');
document.getElementById("Trace").value ='';
var userNum = document.querySelector('input[name="num"]').value;
if(userNum == "" || userNum == undefined){
alert('값을 입력하세요');
Reset.focusInput(); // inputFocus도 따로 빼기
}else{
if(targetNum == userNum){
compare = "정답입니다";
Reset.endStatus();
cnt++;
alert( cnt + '번 만에 숫자를 맞췄습니다');
}else{
if(targetNum > userNum){
compare = userNum+"보다 높아요";
}else{
compare =userNum+"보다낮아요";
}
cnt++;
}
log = userNum+"를 입력했어요, "+compare+"!";
trace.log(log);
document.querySelector('input[name="num"]').value = "";
console.log(cnt, '번째 도전 :' , userNum);
}
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td1.innerHTML=cnt;
td2.innerHTML=userNum;
td3.innerHTML=compare;
tr.append(td1);
tr.append(td2);
tr.append(td3);
resultTable.append(tr);
console.log("tr",tr);
}
function Reset() {
this.clearStatus = function(){ // 초기화상태
document.querySelector('.gameStartText').style.display = "block";
document.querySelector('.reStart').style.display = 'none';
document.querySelector('input[name="num"]').disabled = false;
document.querySelector('input[name="num"]').value = "";
trace.clear();
cnt = 0;
}
this.endStatus = function(){
document.querySelector('input[name="num"]').disabled = true;
}
this.focusInput = function(){
document.querySelector('input[name="num"]').focus();
}
}
var Reset = new Reset();
function enterCheck(){
if(event.keyCode === 13){
applyNum();
}
}
개발꿈나무