728x90
ํด์ฆ ์ฃผ๊ด์ ์ ํ
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ์ฌ ์น๋์์ธ๊ธฐ๋ฅ์ฌ ํ๊ธฐ๋ฌธ์ ๋ฅผ ์ฃผ๊ด์ ์ ํ ํด์ฆ๋ก ์ ์ํด๋ณด๊ธฐ!
์ฃผ๊ด์ ์ ํ์ผ๋ก ์ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์์ค
ํด์ฆ๋ฐ์ค์ ๋ฒํธ, ํด์ฆ ๋ฌธ์ , ๋ต ๋ฑ์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ๋ณด์ฌ์ค๋ค.
ํจ์์ if๋ฌธ์ ํตํด ์ฌ์ฉ์๊ฐ ๋ต์ ์์ฑํ ๊ฒฝ์ฐ ์ ๋ต or ์ค๋ต์ ๋ํ ์ด๋ฒคํธ๊ฐ ์คํ๋๋๋ก ํ๋ค.
//์ ํ์
const quizType = document.querySelector(".quiz__type"); //ํด์ฆ์ข
๋ฅ
const quizNumber = document.querySelector(".quiz__question .number"); //ํด์ฆ ๋ฒํธ
const quizAsk = document.querySelector(".quiz__question .ask"); //ํด์ฆ ์ง๋ฌธ
const quizConfirm = document.querySelector(".quiz__answer .confirm"); //ํด์ฆ ํ์ธ ๋ฒํผ
const quizResult = document.querySelector(".quiz__answer .result"); //์ ๋ต ๊ฒฐ๊ณผ
const quizInput = document.querySelector(".quiz__answer .input"); //์ฌ์ฉ์ ์ ๋ต
const quizView = document.querySelector(".quiz__view"); //๊ฐ์์ง
//๋ฌธ์ ์ ๋ณด
const answerType = "์น๋์์ธ๊ธฐ๋ฅ์ฌ";
const answerNum = "2";
const answerAsk = "๊ธฐ์
์ ์๋ก์ด ์ด๋
๊ตฌ์ถ์ ํ์ํ ์ด๋ฏธ์ง์ ์ปค๋ฎค๋์ผ์ด์
์์คํ
์ ์๋์ , ๊ณํ์ ์ผ๋ก ๋ง๋ค์ด๋ด๋ ๊ธฐ์
์ด๋ฏธ์ง ํตํฉ ์ ๋ต์?";
let answerResult = "CIP";
//๋ฌธ์ ์ถ๋ ฅ
quizType.innerText = answerType;
quizNumber.innerText = answerNum + ". ";
quizAsk.textContent = answerAsk; // textContent์ innerText๋ ๊ฐ์ ์คํ๋ฌธ์ด๋ค.
quizResult.textContent = "์ ๋ต์ : " + answerResult + " ์
๋๋ค.";
//์ ๋ต ์จ๊ธฐ๊ธฐ
quizResult.style.display = "none";
//์ ๋ตํ์ธ
// quizConfirm.addEventListener("click", () => {}); ๊ผญ ํ๋ฌธ์ฅ์ผ๋ก ๋จผ์ ์ด ๋ค ์ ์ธํด์ฃผ๊ธฐ
//์ ๋ต์ ํด๋ฆญํ์ ๋ ์ ๋ต ์คํ ํ์ดํ ํจ์๋ก!
quizConfirm.addEventListener("click", () => {
//css์คํ์ผ์ ํ ๋ฒ์ ์์ฑํ์ฌ ์ ๋ต ์ค๋ต ๋ชจ๋ ์คํ๋๋๋ก ํ๋ค. (if๋ฌธ์ ์ผ์ผํ ์ฃผ์ง ์์๋ ๋๋ค.)
quizInput.style.display = "none"; // ์ธํ๋ฐ์ค๋ฅผ ์จ๊ธฐ๊ธฐ
quizResult.style.display = "block"; //๋ฒํผ์ ํด๋ฆญํ ๊ฒฝ์ฐ ์ ๋ต ๋ํ๋ด๊ธฐ
quizConfirm.style.display = "none"; //์ ๋ตํ์ธ๋ฒํผ ์จ๊ธฐ๊ธฐ
//์ฌ์ฉ์ ์ ๋ต
//value๊ฐ์ ์ ์ผ๋ฉด ์ฌ์ฉ์๊ฐ ์์ฑํ ๋ต์ ํ์ธํ ์ ์๋ค.
const userWord = quizInput.value.toLowerCase().trim();
answerResult = answerResult.toLowerCase().trim(); //์๋ฌธ์๋ก ๋ณํ ๋ฐ ์ฌ๋ฐฑ์ ์์ ์ค๋ค.
//์ฌ์ฉ์ ์ ๋ต == ๋ฌธ์ ์ ๋ต
if (userWord == answerResult) {
//์ ๋ต์ผ ๋
quizView.classList.add("like");
} else {
//์ค๋ต์ผ ๋
quizView.classList.add("dislike");
}
});
!๊ธฐ์ตํด์ผ ํ ๋ฌธ๋ฒ!
์ฌ์ฉ์๊ฐ ์๋ฌธ์ ๋ฐ ์ฌ๋ฐฑ์ ํฌํจ ์์ฑํด๋ ์ ๋ต์ฒ๋ฆฌ๊ฐ ๋ ์ ์๋๋ก ํด์ค๋ค.
const userWord = quizInput.value.toLowerCase().trim();
answerResult = answerResult.toLowerCase().trim();
ํ์ดํ ํจ์๋ก ๋ฒํผ์ ํด๋ฆญํ์ ๋ ์ด๋ฒคํธ๋ฅผ ์คํํด์ค๋ค.
quizConfirm.addEventListener( "click", () => {});
์ฌ์ฉ์์ ๋ต์ด ์ ๋ต ์ผ ๊ฒฝ์ฐ ๊ฐ์์ง๊ฐ ์์ผ๋ฉฐ, ์ค๋ต์ผ ๊ฒฝ์ฐ ์ธ์์ง๋๋ค.
if (userWord == answerResult) {
//์ ๋ต์ผ ๋
quizView.classList.add("like");
} else {
//์ค๋ต์ผ ๋
quizView.classList.add("dislike");
}
์์์ ํ ์คํธ ์ค์ ํ๊ธฐ
innerText()
textContent() //๋ ๋ค ๊ฐ์ ํํ์ด๋ค.
๊ฒฐ๊ณผ๋ณด๊ธฐ
728x90
'EFFECT' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Search] ๊ฒ์ ์ ํ ์ฌ์ดํธ ๋ง๋ค๊ธฐ02 (4) | 2022.08.17 |
---|---|
[Search] ๊ฒ์ ์ ํ ์ฌ์ดํธ ๋ง๋ค๊ธฐ01 (5) | 2022.08.17 |
ํด์ฆ ๋ฌธ์ ๋ง๋ค๊ธฐ04 (6) | 2022.08.08 |
ํด์ฆ ๋ฌธ์ ๋ง๋ค๊ธฐ03 (4) | 2022.08.06 |
ํด์ฆ ๋ฌธ์ ๋ง๋ค๊ธฐ01 (1) | 2022.08.04 |
๋๊ธ