화면에 나타나는 문장(자바 문법)을 정확히 입력해야 다음 화면으로 넘어가도록 구현해보았습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JAVA TAJA</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-color: #FFFFF6;
}
.main {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 370px;
width: 700px;
position: absolute;
display: block;
}
.site-name {
display: block;
font-size: 110px;
color: #00004B;
font-weight: bold;
font-style: italic;
text-align: center;
}
.sentence {
font-size: 40px;
color: #A6A6A6;
margin: 50px auto 15px 65px;
font-weight: lighter;
font-family: sans-serif;
display: inline-block;
}
span{
font-size: 40px;
color: #A6A6A6;
margin: 50px auto 15px 65px;
font-weight: lighter;
font-family: sans-serif;
display: inline-block;
}
input[type="text"]{
background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: #CE3636;
font-size: 40px;
font-family: sans-serif;
font-weight: lighter;
color : black;
outline: none;
width: 81%;
display: inline-block;
margin-left: 65px;
transition: 0.9s;
}
input[type="text"]:focus{
border-color: green;
}
.shakeIt{
animation: shake 0.3s;
animation-iteration-count: 1;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.refresh-enter {
width: 160px;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
float: right;
margin: 5px 50px 0 0;
}
.refresh-spin {
background-image: url('images/refresh.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 45px;
height: 45px;
display: inline-block;
cursor: pointer;
-webkit-animation-duration: 200ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: spin;
-moz-animation-duration: 200ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-ms-animation-name: spin;
-ms-animation-duration: 200ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-out;
animation-name: spin;
animation-duration: 200ms;
animation-iteration-count: 1;
animation-timing-function: ease-out;
}
#refresh{
background-image: url('images/refresh.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 45px;
height: 45px;
display: inline-block;
cursor: pointer;
}
.spin-refresh{
-webkit-animation-name: spin;
-webkit-animation-duration: 200ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: spin;
-moz-animation-duration: 200ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-ms-animation-name: spin;
-ms-animation-duration: 200ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-out;
animation-name: spin;
animation-duration: 200ms;
animation-iteration-count: 1;
animation-timing-function: ease-out;
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
button{
width: 100px;
height: 45px;
color: white;
font-size: 20px;
border-radius: 8px;
background-color: #CE3636;
outline: none;
transition: 0.4s;
display: inline-block;
}
button:hover {
color: #CE3636;
background-color: white;
}
.spinner {
width: 150px;
height: 200px;
font-size: 70px;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
}
.spinner > div {
width: 6px;
display: inline-block;
height: 100%;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect1 {
background-color: red;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.spinner .rect2 {
background-color: orange;
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
background-color: yellow;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
background-color: green;
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
background-color: blue;
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.spinner .rect6 {
background-color: navy;
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.spinner .rect7 {
background-color: black;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
</head>
<body oncopy="return false" oncut="return false" onpaste="return false" onload="replaceSentence()">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<div class="rect6"></div>
<div class="rect7"></div>
</div>
<div class="main">
<label class="site-name">JAVA TAJA</label>
<span><label class="s1" id="s1"></label><label class="s2" id="s2"></label></span>
<input type="text" id="typed" placeholder="Type the method above to enter" onkeyup="redirection(event)"/>
<div class="refresh-enter">
<div id="refresh" onclick="refresh()"></div>
<button>Enter</button>
</div>
</div>
<input type="hidden" class="sentence" id="sentence"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//입력값 확인
function redirection(event) {
console.log($('#typed').prop("selectionStart")); //커서 포지션
var x = event.key; //입력값 저장
console.log("x=" + x);
var input_textfield = document.getElementById('typed');
var input = input_textfield.value;
var sentence = document.getElementById('sentence').value;
var sentence_obj = document.getElementById('sentence');
var cursorPosition = $('#typed').prop("selectionStart");
var input_color = $("input").css('color');
console.log("input=" + input); //입력값
console.log("input.legnth=" + input.length);
console.log("sentence=" + sentence); //입력해야 할 문장
console.log("===============================");
if(x === 'Enter'){ //엔터 키 입력 시
if(input === sentence){
showLoading(); //로딩 화면
setTimeout(function(){ window.location="main.jsp"; }, 2200); //2.2초 대기 후 메인화면으로 이동
}else{ // 입력값이 틀릴 때
console.log("input color="+input_color);
$(input_textfield).addClass('shakeIt');
setTimeout(function() {
$(input_textfield).css({"color":"red"});
setTimeout(function() {
$(input_textfield).removeClass('shakeIt');
$(input_textfield).css({"color":input_color});
}, 500);
}, 1);
}
}
if(sentence.substring(0,input.length) == input.substring(0,input.length)){
console.log("input.legnth=" + input.length);
$(input_textfield).css({"color":"green"});
var s1 = sentence.substring(0, input.length);
var s2 = sentence.substring(input.length, sentence.length);
$('#s1').text(s1);
$('#s1').css({"color":"green"});
$('#s2').text(s2);
}else{
console.log("input.legnth=" + input.length);
$(input_textfield).css({"color":"red"});
var s1 = sentence.substring(0, input.length);
var s2 = sentence.substring(input.length, sentence.length);
$('#s1').text(s1);
$('#s2').text(s2);
$('#s1').css({"color":"red"});
}
}
//버튼 클릭
$("button").click(function(){
var input_textfield = document.getElementById('typed');
var input = input_textfield.value;
var sentence = document.getElementById('sentence').value;
var input_color = $("input").css('color');
if(input === sentence){
showLoading();
setTimeout(function(){ window.location="main.jsp"; }, 2200);
}else{
console.log("input color="+input_color);
$(input_textfield).addClass('shakeIt');
setTimeout(function() {
$(input_textfield).css({"color":"red"});
setTimeout(function() {
$(input_textfield).removeClass('shakeIt');
$(input_textfield).css({"color":input_color});
}, 500);
}, 1);
}
});
//로딩 화면
function showLoading() {
$(".main").css({"display": "none"});
$(".spinner").css({"display": "block"});
}
var sentences = ['System.out.println("Hello Java");',
'Connection conn = null;',
'int[] arr = new int[6];',
'int k = Integer.parseInt(str);',
'BigInteger a = BigInteger.ZERO;',
'Collections.sort(array);',
'if(p^q >= q);',
'double k = Math.sqrt(n);',
'thread.setPriority(10);',
'char c = string.charAt(14);',
'Welcome to JAVA TAJA',
'private long cyphertext;',
'public class Student(){}'];
//문장 랜덤으로 뿌려주기
var current = 0;
function replaceSentence() {
while(true){
var a = Math.ceil(Math.random()*12);
if(a != current){
current = a;
break;
}
}
var currentSentence = sentences[current];
$('#sentence').val(currentSentence);
$('#s1').text(currentSentence);
}
function refresh(){
$('#refresh').addClass('refresh-spin');
setTimeout(function() {
location.reload();
}, 100);
}
</script>
</body>
</html>
'PROGRAMMING > HTML & CSS' 카테고리의 다른 글
| 폼(FORM)안에서 버튼 클릭시 자동으로 제출(SUBMIT)되는 문제 (0) | 2018.04.23 |
|---|---|
| 너비(width)에 패딩(padding)도 포함이 되나요? (0) | 2018.04.15 |
| HTML+CSS만으로 만든 카드형 레이아웃(card layout) (0) | 2018.04.09 |
| 토글버튼(toggle button) + 로그인 폼(login form) (0) | 2018.03.24 |
| 이클립스에서 웹프로젝트 실행할 웹브라우저 설정하기 (0) | 2018.03.01 |