본 포스팅은 Florin Pop 유튜브 채널을 보고 학습한 내용을 바탕으로 작성되었습니다.
😺 만들고자 하는 것
위 사진처럼, 퀴즈를 불러오고 정답을 맞출 수 있는 시스템을 만들어 보려고 한다.
물론, 퀴즈를 불러오는 API는 구현되어 있지 않으므로 하드코딩으로 진행할 것이다.
😺 HTML 분석
먼저, 화면 가운데에 위치해 있는 가장 큰 div가 있고, 안에서 두 부분으로 나누어진다.
첫번째는, 문제와 답안을 랜더링하는 div가 이다.
이 부분에서 문제와 답안으로 다시 나누어 진다. 문제는 h2를, 답안은 ul> li를 사용하고 li 내부에서 input과 label을 합쳐 단 하나의 정답만 클릭 할 수 있도록 구현할 것이다.
두번째는, 답안을 클릭하고 제출하는 button이다.
😺 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</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="quiz_container" id=>
<div class="question_container">
<h2 id="question">Question</h2>
<ul>
<li>
<input type="radio" class="answer" id="a" name="answer">
<label id="a_text" for="a">answer</label>
</li>
<li>
<input type="radio" class="answer" id="b" name="answer">
<label id="b_text" for="b">answer</label>
</li>
<li>
<input type="radio" class="answer" id="c" name="answer">
<label id="c_text" for="c">answer</label>
</li>
<li>
<input type="radio" class="answer" id="d" name="answer">
<label id="d_text" for="d">answer</label>
</li>
</ul>
</div>
<button id="submit">submit</button>
</div>
</body>
</html>😺 HTML 코드 작성한 결과
😺 CSS 작업
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
box-sizing: border-box;
}
body{
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
align-items: center;
justify-content: center;
display: flex;
}
.quiz_container{
width: 600px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100 , 100, 100,0.1);
max-width: 100%;
overflow: hidden;
}
.question_container{
margin: 4rem;
}
h2{
text-align: center;
}
ul{
list-style: none;
padding: 0;
}
ul li{
margin: 0 1rem;
font-size: 1.1rem;
}
ul li label{
cursor: pointer;
}
button{
width:100%;
background-color: #8e44ad;
color: white;
font-family: inherit;
display: block;
padding : 1.3rem;
border: none;
font-size: 1.1rem;
}
button:hover{
background-color: #732d91;
}
button:focus{
outline: none;
background-color: #5e3370;
}폰트는 구글 폰트를 사용했다.
또한, 배경화면의 색상은 그라데이션으로 여기에서 참조했고,
나머지 색상은 여기를 참조했다.
😺 CSS 작업 결과
😺 JS작업
let quizData = [
{
question : "[www.naver.com]에서 www의 뜻으로 올바른것은?",
a : "World Wide Web",
b : "West Wide Web",
c : "Worst Wide Web",
d : "Whole Wide Web",
correct : "a"
},
{
question : "JS에서 다음 코드의 결과는? [console.log(0.1 + 0.2 == 0.3);]",
a : "true",
b : "false",
c : "undefinded",
d : "null",
correct : "b"
},
{
question : "JS에서 다음 코드의 결과는? [console.log('a' + 'b');]",
a : "ab",
b : "error",
c : "93",
d : "undefinded",
correct : "a"
},
{
question : "Merge Sort의 시간복잡도로 올바른것은?",
a : "N^2",
b : "N",
c : "NlogN",
d : "모두 아님",
correct : "c"
},
]
const questionEl = document.getElementById("question")
const a_textEl = document.getElementById("a_text");
const b_textEl = document.getElementById("b_text");
const c_textEl = document.getElementById("c_text");
const d_textEl = document.getElementById("d_text");
const quiz = document.getElementById("quiz")
const button = document.getElementById("submit")
const answersEls = document.querySelectorAll('.answer')
let cur = 0;
let score = 0;
//퀴즈 불러오는 함수
function loadQuiz(){
questionEl.innerText = quizData[cur].question
a_textEl.innerText = quizData[cur].a
b_textEl.innerText = quizData[cur].b
c_textEl.innerText = quizData[cur].c
d_textEl.innerText = quizData[cur].d
}
//무슨 답 골랐는지 찾아오는 함수
function getSelected(){
let selected = undefined;
answersEls.forEach(ele => {
if(ele.checked){
selected = ele.id
}
})
return selected
}
//답 체크 해제하는 함수
function deSelectAnswer(){
answersEls.forEach(element => {
element.checked = false
});
}
//버튼에 이벤트 부여
button.addEventListener('click', () => {
if(getSelected() === quizData[cur].correct){
score++;
}
cur++;
if (cur >= quizData.length ){
quiz.innerHTML = `<h2>총 ${quizData.length}문제 중 ${score} 문제를 맞추셨습니다.
</h2> <button onclick="location.reload()">Reload</button>`
}else{
loadQuiz();
deSelectAnswer();
}
})
loadQuiz();😺 느낀점
여전히 CSS 작업이 조금 오래 걸린다. js의 경우는 어떻게 검색을 해야 할 지 알고있어서 검색하면 쉽게 문제를 해결할 수 있지만, CSS는 많이 몰라서 그런지 어떻게 잘 검색할 지 몰라서 오래 걸리는 것 같다.
'프로젝트 > 10 Javascript Project Challenge' 카테고리의 다른 글
| 1. 새해 카운트다운 웹 (0) | 2021.11.02 |
|---|
댓글