안녕하세요 느종입니다
오늘은 저번 시간에 만들었던 나라 수도 퀴즈 시작 화면에 이어서 메인 화면을 만들어보겠습니다. input 태그를 활용하기 때문에 기존에 만들었던 OX퀴즈와는 코드가 살짝 다를 수 있습니다. 그럼 시작하도록 하겠습니다. 함께 공부해요!
메인 화면 페이지
메인 화면 페이지입니다. 상단에 하트(기회)가 추가 되었고, 하단에 input 태그와 정답 확인 버튼을 추가하였습니다. 그 외에는 기존의 OX퀴즈와 동일합니다. 그럼 html코드를 작성하도록 하겠습니다. css 코드는 저번 포스팅에 한번에 다 올려 놓았으니 참고하시면 됩니다.
자바스크립트 코드
[ scripts.js ]
1. quizList : 수도 퀴즈의 내용을 담는 배열입니다.
2. correctList : 수도 퀴즈의 정답을 담는 배열입니다.
3. inputText : input 태그를 담는 변수입니다.
4. checkBtn : 정답 확인 버튼 태그를 담는 변수입니다.
5. count : 퀴즈 번호를 담는 변수입니다.
6. lifeCount : 기회(목숨)를 담는 변수입니다.
7. enteredText : 사용자가 입력한 텍스트를 담는 변수입니다.
8. chapter : 시작 화면, 메인 화면, 결과 화면을 구분 짓기 위한 변수입니다.
9. startBtnClassName : class가 start-button인 태그를 담는 변수입니다.
10. inputBtnClassName : class가 input-button인 태그를 담는 변수입니다.
11. init() : 초기화 함수입니다. 위에서 말했던 변수들을 새로 시작하거나, 다시 시작 할 때 이 곳에서 초기화해줍니다.
[ scripts.js ]
12. 시작 하기 버튼을 누르면 메인 화면으로 바뀌기 때문에 chater에 quiz라는 변수를 넣어줍니다.
13. life.style.display = "block" : 기회(목숨)이 다시 나타나야되므로 display를 block으로 바꾸어줍니다.
14. 🧡 : 하트를 표시하는 html 코드 입니다.
15. setQuizFunc() : 퀴즈 문제를 설정하는 함수입니다. 시작하거나 다음 문제로 넘어 갈 때 입력을 해주어야 합니다.
16. inputText.addEventListener('change', ~ : 사용자가 input 태그 안에 텍스트를 입력한 후에 입력창을 벗어나게 되면 이벤트가 발생합니다.
17. enteredText = e.target.value.replace(/(\s*)/g, "") : 정규표현식을 활용하여 사용자가 입력창에 텍스틀 입력할 때 빈 공백을 제거해줍니다.
18. if(inputText.value === "" || enteredText === "") : 입력창 혹은 enteredText 변수에 값이 들어 있지 않다면 alert를 활용하여 정답을 입력해달라는 이벤트를 발생합니다.
19. inputText.value = "" : 정답 확인 버튼을 누른 후에는 입력창을 비워줍니다.
[ scripts.js ]
20. count++ : 다음 문제로 넘어가기 위해 count에 1씩 더해줍니다.
21. 5문제 모두 다 풀었을 경우 결과 화면으로 넘어가고, chater에는 result변수를 넣어줍니다. 하단에 각각의 화면은 toggle을 이용하여 hidden class를 추가 및 삭제하는 방법으로 구성하였습니다.
22. checkingCorrect() : 정답이 맞았는지 틀렸는지 유무를 확인하는 함수입니다.
23. if(correctList[count - 1] === enteredText) : 정답이 맞았을 경우에는 다음 문제로 넘어갑니다.
24. lifeCount-- : 정답이 틀렸을 경우 1씩 빼줍니다.
25. if(lifeCount < 1) : lifeCount가 0이 되면 처음부터 다시 시작하도록 구성하였습니다.
오늘은 메인 화면까지 코드를 작성해보았는데요. 하나하나 세세하게 적다 보니 글이 길어진 것 같네요. 다음 포스팅에서는 결과 화면까지 코드를 작성하여 나라수도퀴즈 웹페이지를 마무리 짓도록 하겠습니다.