quizEffect02 - JS로 문제 내기

HTML 구성

<h2 class="quiz__type">HTML 퀴즈</h2>
<h3 class="quiz__question">
    <span class="quiz__number"></span>
    <span class="quiz__ask"></span>
</h3>
<div class="quiz__view">
    <div class="true">정답입니다!</div>
    <div class="false">틀렸습니다!</div>
</div>
<div class="quiz__answer">
    <input type="text" placeholder="정답을 적어주세요!" class="quiz__input">
    <button class="quiz__confirm">정답 확인하기</button>
    <div class="quiz__result"></div>
</div>

 

JS 구성

const quizType = document.querySelector(".quiz__type"); //퀴즈 종류
const quizNumber = document.querySelector(".quiz__number"); //퀴즈 번호
const quizAsk = document.querySelector(".quiz__ask"); //퀴즈 질문
const quizConfirm = document.querySelector(".quiz__confirm"); //정답 확인 버튼
const quizResult = document.querySelector(".quiz__result"); //정답 결과
const quizView = document.querySelector(".quiz__view"); //강아지
const quizInput = document.querySelector(".quiz__input"); //사용자가 입력한 값


//문제 정보
const answerType = "javascript"
const answerNum = 2;
const answerAsk = "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?";
const answerResult = "javascript";

//문제 출력
quizType.textContent = answerType;
quizNumber.textContent = answerNum + ". ";
quizAsk.textContent = answerAsk;
quizResult.textContent = "정답은 : " + answerResult + " 입니다.";

quizResult.style.display = "none";

//정답 확인
//정답 버튼을 클릭하면 정답 확인은 안보이게, 숨겨진 정답을 보이게 설정
quizConfirm.addEventListener("click", () => {
    quizConfirm.style.display = "none";
    quizResult.style.display = "block";
    const usedWord = quizInput.value.toLowerCase().trim(); //클릭해야 답을 가젹오게 함 + 사용자 데이터
    console.log(usedWord); //console로 확인하기
    // quizConfirm.style.display = "none";
    // quizResult.style.display = "block";
    if(usedWord == answerResult){ //같으면 웃는 얼굴
        quizView.classList.add("like");
        quizResult.style.display = "none";
    } else {
        quizView.classList.add("dislike"); //다르면 우는 얼굴
        quizInput.style.display = "none";
    }
})

 

toLowerCase() 소문자 변환

trim() 공백 제거

 

링크 : https://sungilryuu.github.io/webs_class/javascript/effect/quizEffect02.html