quizEffect02

https://garenchoi.github.io/webs_class/javascript/effect/quizEffect02.html

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 quizTrue = document.querySelector(".quiz__view .true");  //정답
const quizFalse = document.querySelector(".quiz__view .false");//오답
const quizView = document.querySelector(".quiz__view");        //퀴즈 화면
const quizInput = document.querySelector(".quiz__input");      //정답 입력 박스

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

// 문제 출력	
quizType.textContent = answerType;			//quizType에 answerType(javascript)출력
quizNumber.textContent = answerNum + ".";	//quizNumber에 answerNum + "."(1.) 출력
quizAsk.textContent = answerAsk;			//quizAsk에 answerAsk(컨텐츠의 구조를 정의하는 마크업 언어는 무엇일까요?) 출력
quizResult.textContent = `정답은 : ${answerResult} 입니다.`;		//quizResult(정답 결과)에 "정답은 : javascript 입니다." 출력

//정답 숨기기
quizResult.style.display = "none"			//quizResult(정답 결과)에 스타일 display none 추가

//정답 확인
quizConfirm.addEventListener("click", () => {				//quizConfirm(정답 확인 버튼)을 클릭 했을 때 이벤트 설정
    quizConfirm.style.display = "none";						//quizConfirm에 스타일 display none 추가
   
    let quizValue = quizInput.value.toLowerCase().trim();	//quizValue에 사용자가 입력한 값 저장
    
    if(quizValue==answerResult){			//quizValue가 answerResult와 같을 때
        quizView.classList.add("like");		//quizView에 클래스 like 추가
    } else {								//quizValue가 answerResult와 같지 않을 때
        quizView.classList.add("dislike");	//quizView에 클래스 dislike 추가
        quizResult.style.display = "block";	//quizResult에 스타일 display block 추가
        quizInput.style.display = "none";	//quizInput에 display none 추가
    }
});