<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0; padding: 0; list-style: none;
}
h1 {
text-align : center;
padding: 30px auto;
}
.output {
width: 1000px;
height: 40px;
font-size: 24px;
line-height: 40px;
text-align : center;
border : 1px solid 45px;
margin: auto 45px;
}
ul {
width: 800px;
text-align : center;
margin: 0 auto;
}
li {
display: inline-block;
padding : 6px 13px;
border-radius: 50px;
margin: 10px 20px;
border : 3px solid #000;
border-style: outset;
}
</style>
</head>
<boby>
<h1>Word Match Puzzle</h1>
<hr>
<div class="output"></div>
<ul>
<li>동해물과</li>
<li>닳도록</li>
<li>백두산이</li>
<li>마르고</li>
<li>하느님이</li>
<li>만세</li>
<li>우리나라</li>
<li>보우하사</li>
</ul>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 각각의 li를 클릭해서 문장 완성시키기.
// 문장의 출력은 output으로
//var r = ["동해물과 ", "백두산이 ", "마르고 " ,"닳도록 ", "하느님이 ", "보우하사 ", "우리나라 ", "만세 "];
var answer = "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세";
$("ul li").on("click", function() {
var txt = $(this).text();
console.log(txt);
var outTxt = $(".output").text();
$(".output").text(`${outTxt} ${txt}`); //text(`${output} ${txt}`), (outTxt+txt)
var userAnswer = $(".output").text();
userAnswer = userAnswer.trim(); //trim()은 문자열 양 끝의 공백을 제거하는 메서드
//mdn (모질라 개발자 문서)
//배열로 한 경우 : userAnswer.split();
console.log(userAnswer);
if(userAnswer == answer) {
alert("정답입니다.");
}
});
</script>
</boby>
</html>
Engineering is the closest thing to magic that exists in the world.