DAY01.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>Document</title>
    <style>
        #wrapper {
  position:relative;
  width:300px;
  height:400px;
  margin:0 auto;
  text-align:center;
  border:10px solid rgb(33, 90, 50);
  border-radius:10px;
  outline:1.5px dotted #fff;
  outline-offset:-6px;        
}
h1 {
  margin-top:0;
  padding:10px;
  background-color:rgb(81, 156, 62);
  color:white;
}
form {
  margin-top:40px;
}
input[type="text"] {
  width:120px;
  height:40px;
  padding:0;
  border:#ccc 1px solid;
}
.btn {
  width:50px;
  height:40px;        
  /* border-radius:50%; */
  padding:10px 3px;
  border:#ccc 1px solid;        
        
}      
.btn-1 {
  background-color:azure;  
}
.btn-2 {
  background-color:khaki;
}
#display {
  font-size:30px;
  margin-top:70px;
}
.output {
  font-size:20px;
  font-weight:bold;
}
#counter {
  position:absolute;
  left:0;     
  bottom:0;
  width:100%;
  height:30px;

}
.footer {
  background-color:rgb(86, 141, 86);
  color:white;
  line-height:30px;
}

.quest {        
  font-family:arial;
  font-size:30px;
  color:darkorange;
  text-shadow:1px 1px 3px #222;
  padding:2px 1px;
}
    </style>
</head>

<body>
    <div id="wrapper">
        <h1>숫자 맞히기 게임</h1>
        <p>1에서 100 사이의 수를 입력하세요.</p>
        <from action="">
            <label><input type="text" id="try" autocapitalize="off" autofocus onkeypress="enterkey()"></label>
            <input type="button" value="확인" id="check" class="btn btn-1" onclick="finding()" >
            <input type="button" value="다시" id="reset" class="btn btn-2" onclick="window.location.reload()">
        </from>
        <div id="disply" class="output"></div>
        <div id="counter" class="footer"></div>
    </div>
    <script>
        var counter = 0;
var randomNumber = parseInt(Math.random()*100)+1;

function enterkey() {
	if (window.event.keyCode == 13) {
    	finding();
    }
    else {
        return;
    }
}

function finding() {
    var userNumber = document.getElementById("try").value;
    if(userNumber >= 1 && userNumber <= 100){
        if(randomNumber > userNumber) {
            document.getElementById("disply").innerText = "UP!";
        }
        else if(randomNumber < userNumber) {
            document.getElementById("disply").innerText = "DOWN!";
        }
        else if(randomNumber == userNumber) {
            document.getElementById("disply").innerText = "정답!";
            disply.style.color="red";
        }
        counter += 1;
        document.getElementById("counter").innerText = `${counter}`;
    }
    else {
        alert("1 ~ 100까지의 수만 입력하세요!");
    }
}

    </script>
</body>
</html>