- 자 오늘은 어제 만든 강아지가 정답을 맞추면 웃고 정답을 틀리면 우는 것을 만들어 보겠습니다.
- 일단 완성본입니다!!
- 이제 코드를 뜯어보도록하죠
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap")
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");
const quizQuestionNum = quizWrap.querySelector(".qiuz__question em");
const quizQuestion = quizWrap.querySelector(".qiuz__question span");
const quizDesc = quizWrap.querySelector(".quiz__desc")
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
const dogWrap = quizWrap.querySelector(".dog__wrap")
const quizFooter = quizWrap.querySelector(".quiz__footer")
// 문제 정보
const infoType = "정보처리 기능사 : ";
const infoTime = "2011년 5회";
const infoNumber = "2";
const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는것은?";
const infoAnswer = "슬라이드";
const infoDesc = "슬라이드는 프리젠테이션의 화면 전체를 말하며, 개체는 화면을 구성하는 개개의 요소를 말한다."
// 문제 출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuestionNum.textContent = infoNumber;
quizQuestion.textContent = infoQuestion;
quizDesc.textContent = infoDesc;
quizAnswerResult.textContent = infoAnswer;
// 정답 & 해설 숨기기
quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";
// 사용자 정답
quizAnswerConfirm.addEventListener("click", function(){
// 정답 버튼 제거
quizAnswerInput.style.display = "none"; // 인풋 박스 숨김
quizAnswerConfirm.style.display = "none"; // 정답 확인 버튼 숨김
quizAnswerResult.style.display = "block"; // 정답 나타내기
quizFooter.style.display = "block"; // 해설 보이기
const userAnswer = quizAnswerInput.value.trim();
if(infoAnswer == userAnswer){
dogWrap.classList.add("like");
} else {
dogWrap.classList.add("dislike");
}
});
</script>- 사실 html과 CSS는 크게 달라진 점이 없기 때문에 오늘도 자바스크립트에 집중하도록 하겠습니다.
- 설명부분과 우측상단에 문제번호가 추가된 것 말고는 내용 상에는 변한게 없습니다.
- 일단 기본적인 부분은(번호를 넣거나 문제를 넣는 내용적인 부분들) 어제 것과 같기 때문에 설명을 생략하겠습니다.
- 이게 사소해 보이지만 중요한 것인데 html를 짤 때 규격에(?) 맞춰서 짠다면 코드의 재활용이 가능하다는 점입니다.
- 덕분에 저희는 달라지는 요소들만 바꾸면 된다는 것이죠!!
- 출력과 숨기기는 어제 했으니 오늘은 사용자의 정답을 받아와서 정답을 클릭해줬을 때 그것이 정답이 맞는지 확인해주는 것을 만들어 보겠습니다.
<input class="input" type="text" placeholder="정답을 적어주세요!"></input>- 아 참!! 그전에 사용자가 적는 답을 입력받아야 되는 부분인데 그냥 div로 만들면 입력받을 수 없음으로 용도에 맞는 input 태그로 정답을 적을 칸들 만들어 주어야합니다!! 이거 빼고는 진짜 특이사항 없습니당 히히..
- 자 우선 const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input"); 이라는 선택자를 만들어 주어 사용자가 입력한 정답을 quizAnswerInput이라는 변수로 저장을 해주었습니다.
- 그 후 quizAnswerConfirm.addEventListener("click", function(){}; 을통해 정답을 클릭했을 때 함수가 실행하도록 해주었습니다.
- 클릭했을 때 정답확인버튼과 입력한 정답 값이 사라지고 정답이 나오며 해설이 보이게 해주는 것 까지는 어제 한 것에서 내용만 바꾸어주면 됩니다.
- 이제 메인!! 클릭했을 때 정답이 맞는지 틀린지 판단하고 결과에 따라 강아지의 상태를 바꾸어 주는 것입니다.
- 정답이 맞는지 틀린지 확인한다? 이거 먼가 익숙하지 않나요?? 맞습니다!! 바로 if 문을 사용하는 것이죠!!
const userAnswer = quizAnswerInput.value.trim();
if(infoAnswer == userAnswer){
dogWrap.classList.add("like");
} else {
dogWrap.classList.add("dislike");
}- 일단 변수를 선언해 줍니다. userAnswer가 사용자가입력한 값이 되도록 하는 것이죠.
- 어라 근데 .value()?? .trim()?? 처음보는 것들의 정체가 무엇인지 궁금하시죠? 안궁금해도어쩔수가없.....
- 자 그럴줄 알고 제가 알아왔습니다!!
- .value()란 메소드에 일종으로 사용하면 해당 요소의 현재 값을 가져올 수 있습니다. 이 값은 사용자가 폼 요소에 입력한 값이 될 수 있습니다.
- .trim() 이란 문자열 뒷쪽에 있는 공백이 있어도 같다고 인식하게 해줍니다. 이것이 없다면 "슬라이드"와 "슬라이드 "를 다르다고 인식하지만 이것이 있다면 같은 답으로 인식해줍니다.
- 자 이제 if문을 통해 사용자가 입력한 정답과 제가 입력해 놓은 정답이 같을 때와 다를 때 어떻게 할 지 알려주면 됩니다.
- classList는 속성중에 하나로 이 속성을 사용하여 클래스를 추가, 제거 및 토글할 수 있습니다.
- 한마디로 요소.classList.add("추가할 클래스 명")를 해주면 해당요소에 원하는 클래스를 추가해 줍니다!!
- 이것을 통해 정답을 맞췄을 땐 "like"라는 클라스를 추가해주고 틀렸을 땐 "dislike"라는 클라스를 추가해 주면!!!!
- 사용자의 정답에 따라 울고 웃는 강아지가 완성됩니다!!
- 끝!!!!!