CSS 속성 검색 이벤트

2분 동안 CSS 속성 검색하기

2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다.

2:00

검색하기

버튼을 누르면 게임이 시작됩니다.

전체 속성 개수 : 0

맞힌 개수 : 0

mo0647@naver.com

소스 보기

JAVASCRIPT

HTML

CSS

const cssProperty = [
    { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " },
    { num: 2, name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다." },
    { num: 3, name: "align-items", desc: " 교차축에서 아이템 정렬 하는 속성입니다. 주로 flex에서 item들을 정렬할 때 사용됩니다." },
    { num: 4, name: "align-self", desc: " 특정 item의 정렬을 따로 하고 싶을 때 사용합니다." },
    { num: 5, name: "all", desc: " CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값로 설정할 수 있습니다." },
    { num: 6, name: "animation", desc: " 애니메이션과 관련된 속성을 일괄적로 처리합니다." },
    { num: 7, name: "animation-delay", desc: " 애니메이션 지연 시간을 설정합니다." },
    { num: 8, name: "animation-direction", desc: " 애니메이션 움직임 방향을 설정합니다." },
    { num: 9, name: "animation-duration", desc: " 애니메이션 움직인 시간을 설정합니다." },
    { num: 10, name: "animation-fill-mode", desc: " 애니메이션이 끝난 후의 상태를 설정합니다." },
    { num: 11, name: "animation-iteration-count", desc: " 애니메이션의 반복 횟수를 설정합니다." },
    { num: 12, name: "animation-name", desc: " 애니메이션 keyframe 이름을 설정합니다." },
    { num: 13, name: "animation-play-state", desc: " 애니메이션 진행상태를 설정합니다." },
    { num: 14, name: "animation-timeline", desc: " 애니메이션의 타임라인을 설정합니다." },
    { num: 15, name: "animation-timing-function", desc: " 애니메이션 움직임의 속도를 설정합니다." },
    { num: 16, name: "appearance", desc: " 운영체제 및 브라우저에 기본적로 설정되어 있는 테마를 기반로 요소를 표현한다." },
    { num: 17, name: "aspect-ratio", desc: " 요소의 크기를 비율대로 조정할 수 있게 한다." },
    { num: 18, name: "backdrop-filter", desc: " 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다." },
    { num: 19, name: "backface-visibility", desc: " 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다." },
    { num: 20, name: "background", desc: " 백그라운드 속성을 일괄적로 설정합니다. " }
    <-- 생략 -->
];
document.querySelector(".search__info span").innerHTML = cssProperty.length;

const searchTime = document.querySelector(".time span");
const searchList = document.querySelector(".search__list");
const searchAnswers = document.querySelector(".search__answers");
const searchMissAnswers = document.querySelector(".search__missAnswers");
const searchStart = document.querySelector(".search__box .start");
const searchInput = document.querySelector("#search");
const searchAudio = document.querySelector("#audio");
const musicPlay = document.querySelector(".search__audio .play");
const musicStop = document.querySelector(".search__audio .stop");
const searchScoreNow = document.querySelector(".search__info .now");
const searchResult = document.querySelector(".search__result .result");
const searchResultWrap = document.querySelector(".search__result");
const searchRestart = document.querySelector(".search__result .restart");

let timeReamining = 120,  // 남은 시간
    timeInterval = "",
    score = 0,      // 점수
    answers = {};   // 새로운 정답
    

function updateList(){
    cssProperty.forEach(data => {
        searchList.innerHTML += `<span>${data.name}</span>`;
    })
}
updateList();

// 게임 시작하기
function startQuiz(){
    // 시작 버튼 숨기기
    searchStart.style.display = "none";
    searchList.style.display = "none";

    // 다시 시작할 때 기존 데이터 초기화
    searchAnswers.innerHTML = "";
    searchMissAnswers.innerHTML = "";

    // 시간 설정(1초에 한번씩 줄어듦)
    timeInterval = setInterval(reduceTime, 1000);

    // 속성 리스트 없애기

    // 음악 추가
    music();

    // 점수 계산
    let score = 0;

    // 정답 체크
    checkAnswers();
}

// 음악 재생
function music(){
    musicStop.addEventListener("click", () => {
        musicStop.style.display = "none";
        musicPlay.style.display = "block";
        searchAudio.pause();
    })
    musicPlay.addEventListener("click", () => {
        musicPlay.style.display = "none";
        musicStop.style.display = "block";
        searchAudio.play();
    })
    searchAudio.play();
}

// 인풋 체크하기
function checkInput(){
    let input = event.currentTarget.value.trim().toLowerCase();  // 사용자가 입력한 값 가져오기

    if(answers.hasOwnProperty(input) && !answers[input]){
        answers[input] = true;

        // 정답 표시
        searchAnswers.style.display = "block";
        searchAnswers.innerHTML += `<span>${input}</span>`;

        // 점수 반영
        score++;
        searchScoreNow.innerText = score;

        // 정답 초기화
        searchInput.value = "";
    }
}

// 정답 체크하기 : 정답을 객체 파일로 만들기
function checkAnswers() {
    cssProperty.forEach(item => {
        let answer = item.name.trim().toLocaleLowerCase();
        answers[answer] = false;
    });
}
    
// 오답 보여주기
function missAnswers(){
    searchMissAnswers.style.display = "block";

    cssProperty.forEach(item => {
        let answer = item.name.trim().toLocaleLowerCase();
        if(answers[answer] == false){
            searchMissAnswers.innerHTML += `<span>${item.name}</span>`
        }
    })
}

// 시간 설정하기 0:00
function reduceTime(){
    timeReamining--;

    if(timeReamining == 0) endQuiz();

    searchTime.innerText = displayTime();
}

// 시간 표시하기
function displayTime(){
    if(timeReamining <= 0){
        return "0:00";
    } else {
        let minutes = Math.floor(timeReamining / 60);
        let seconds = timeReamining % 60;

        // 초 단위가 한자리수일 때 0 추가
        if(seconds < 10) seconds = "0" + seconds;
        return minutes + ":" + seconds;
    }
}

// 게임이 끝났을 때
function endQuiz(){
    
    // 시작 버튼 만들기
    searchStart.style.display = "block";
    searchStart.style.pointerEvents = "none";

    // 오답 보여주기
    missAnswers();

    // 음악 끄기
    searchAudio.pause();

    // 시간 정지
    clearInterval(timeInterval);

    // 메시지 출력
    searchResultWrap.classList.add("show");
    let point = Math.round(score / cssProperty.length * 100);
    searchResult.innerHTML = `게임이 종료되었습니다.<br>${cssProperty.length}개 중 ${score}개를 맞혔습니다.<br>점수는 ${point}점입니다.`;
}

// 다시 시작하기
function restart(){
    searchResultWrap.classList.remove("show");
    searchAudio.play();

    startQuiz();
    timeReamining = 120;  // 시간
    score = 0;
    searchScoreNow.innerText = 0;
}

// 버튼 이벤트
searchStart.addEventListener("click", startQuiz); // 게임 시작
searchInput.addEventListener("input", checkInput);
searchRestart.addEventListener("click", restart); 

$(searchResultWrap).draggable();

<main id="main">
    <div class="search__wrap">
        <div class="search__audio">
            <span class="play">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15 6.3706C15 4.65827 12.9884 3.73774 11.6926 4.85712L8.36317 7.73321C7.99989 8.04704 7.53583 8.21972 7.05576 8.21973L5.49998 8.21974C4.11928 8.21975 3 9.33903 3 10.7197V14.0127C3 15.3934 4.11929 16.5127 5.5 16.5127H7.0558C7.53587 16.5127 7.99993 16.6854 8.36322 16.9992L11.6926 19.8753C12.9884 20.9947 15 20.0741 15 18.3618V12.3662V6.3706Z" fill="#223547" stroke="#223547" stroke-width="1.5"/>
                    <path d="M18 15.3667C18.6279 14.531 19 13.4923 19 12.3667C19 11.2411 18.6279 10.2024 18 9.3667" stroke="#223547" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M20 18.3667C21.2558 16.6954 22 14.6179 22 12.3667C22 10.1155 21.2558 8.03802 20 6.3667" stroke="#223547" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
            </span>
            <span class="stop">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 6.3706C14 4.65827 11.9884 3.73774 10.6926 4.85712L7.36317 7.73321C6.99989 8.04704 6.53583 8.21972 6.05576 8.21973L4.49998 8.21974C3.11928 8.21975 2 9.33903 2 10.7197V14.0127C2 15.3934 3.11929 16.5127 4.5 16.5127H6.0558C6.53587 16.5127 6.99993 16.6854 7.36322 16.9992L10.6926 19.8753C11.9884 20.9947 14 20.0741 14 18.3618V12.3662V6.3706Z" fill="#223547" stroke="#223547" stroke-width="1.5"/>
                    <path d="M18 14.1215L22.2427 9.87891" stroke="#223547" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M18 9.87894L22.2427 14.1216" stroke="#223547" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
            <audio id="audio" src="../assets/audio/music_audio10.mp3" loop="loop"></audio>
        </div>
        <span>CSS 속성 검색 이벤트</span>
        <h1><a href="searchEffect.html">2분 동안 CSS 속성 검색하기</a></h1>
        <p class="desc">
            2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다.<br>
            속성이 기억나지 않으면, 힌트 보기를 1회 이용할 수 있습니다.
        </p>
        <div class="time">
            <span>2:00</span>
        </div>
        <div class="search__box">
            <label for="search">검색하기</label>
            <input type="text" id="search" placeholder="CSS 속성을 입력해 주세요" />
            <div class="start">버튼을 누르면 게임이 시작됩니다.</div>
        </div>
        <div class="search__info center">
            <div>전체 속성 개수 : <span class="num">0</span></div>
            <div>맞힌 개수 : <span class="now">0</span></div>
        </div>
        <div class="search__answers"></div>
        <div class="search__missAnswers"></div>
        <div class="search__list"></div>
        <div class="search__result">
            <div class="svg__wrap">
                <-- 애니메이션 svg 생략 -->
                <div class="result"></div>
                <button class="restart">다시 도전하기</button>
            </div>
        </div>
    </div>
</main>

#main {
    margin: 50px 10px;
}
.search__wrap {
    max-width: 1400px;
    margin: 0 auto;
    border: 3px solid var(--htmlColor);
    border-radius: 20px;
    background-color: #f1f3f6;
    padding: 30px;
    text-align: center;
}
.search__wrap > span {
    font-size: 20px;
    margin-bottom: 20px;
    display: inline-block;
    color: var(--htmlColor);
}
.search__wrap > h1 {
    font-family: "Tmon";
    color: var(--htmlColor);
    font-size: 5vw;
    margin-bottom: 10px;
}
.search__wrap > h1 a {
    font-family: "Tmon";
    color: var(--htmlColor);
    font-size: 5vw;
    margin-bottom: 10px;
}
.search__wrap .time {
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    border-radius: 50%;
    margin: 20px auto 0px auto;
    background: var(--htmlColor);
}
.search__wrap .time span {
    color: #fff;
    font-size: 34px;
    font-weight: 100;
}
.search__box {
    margin-bottom: 20px;
    position: relative;
}
.search__box label {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}
.search__box input {
    border: 2px solid var(--htmlColor);
    padding: 15px 40px;
    width: 30%;
    border-radius: 50px;
    font-size: 20px;
    margin-top: 20px;
}
.search__box .start {
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    background: #223547;
    width: 30%;
    border-radius: 50px;
    font-size: 20px;
    border: 2px solid var(--htmlColor);
    padding: 15px 40px;
    color: #fff;
    cursor: pointer;
  }
.search__list li {
    text-align: left;
    line-height: 1.7;
}
.search__list li.hide {
    display: none;
}
.search__list li.show {
    display: block;
}
.search__list span {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--htmlColor);
    border-radius: 50px;
    margin: 5px;
    text-align: left;
    cursor: pointer;
}
.search__list span:hover {
    background-color: var(--htmlColor);
    color: #fff;
    transition: all 0.3s;
}
.search__list em {
    float: right;
    font-style: normal;
}
.search__list .line {
    margin-top: 70px;
    margin-bottom: 50px;
}
.search__list .line li {
    background: #e3eaf5;
    margin-bottom: 5px;
    border-radius: 10px;
    padding: 10px 30px;
}
.search__list .line li:hover {
    background: #c2d5f5;
    cursor: pointer;
}
.search__info {
    text-align: right;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--htmlColor);
    color: var(--htmlColor);
}
.search__info.center {
    display: flex;
    justify-content: center;
    grid-gap: 10px;
    padding-bottom: 20px;
}
.search__info .type {
    margin-bottom: 10px;
    text-align: center;
}
.search__info .all {
    display: inline;
    margin-bottom: 10px;
}
.search__info .all span {
    border-bottom: 2px solid var(--htmlColor);
    border-radius: 5px;
    padding: 10px;
    display: inline-block;
    margin-bottom: 4px;
    font-weight: 500;
}
.search__info .all span:hover {
    background-color: var(--htmlColor);
    color: #fff;
    cursor: pointer;
}
.search__info .keyword {
    display: inline;
    margin-bottom: 10px;
}
.search__info .keyword span {
    border-bottom: 2px solid var(--htmlColor);
    border-radius: 5px;
    padding: 10px;
    display: inline-block;
    margin-bottom: 4px;
    font-weight: 500;
}
.search__info .keyword span:hover {
    background-color: var(--htmlColor);
    color: #fff;
    cursor: pointer;
}
.search__info div:nth-child(3) {
    text-align: right;
}
.search__info div:nth-child(4) {
    text-align: right;
}
.search__info .searchResult.hide {
    display: none;
}
.search__answers {
    border-bottom: 2px dashed var(--htmlColor);
    padding-bottom: 40px;
    padding-top: 10px;
}
.search__answers span {
    display: inline-block;
    background: var(--htmlColor);
    padding: 10px 20px;
    color: #fff;
    border-radius: 30px;
    margin: 3px;
}
.search__missAnswers {
    border-bottom: 2px dashed var(--htmlColor);
    padding: 40px 0;
    margin-bottom: 30px;
}
.search__missAnswers span {
    display: inline-block;
    border: 1px solid var(--htmlColor);
    color: var(--htmlColor);
    padding: 10px 20px;
    border-radius: 30px;
    margin: 3px;
}
.search__desc {
    padding: 20px 40px 20px 60px;
    margin-bottom: 30px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 16.958L21.5 21.958' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: var(--htmlColor);
    color: #fff;
    border-radius: 50px;
    background-repeat: no-repeat;
    background-position: 24px 18px;
}
.search__click {
    margin-top: 10px;
    margin-bottom: 30px;
}
.search__click li {
    display: inline;
}
.search__click li a {
    display: inline-block;
    border: 1px solid var(--htmlColor);
    border-radius: 50px;
    padding: 10px 20px;
    margin: 5px 0;
}
.search__click li a:hover {
    background-color: var(--htmlColor);
    color: #fff;
}
.search__audio {
    cursor: pointer;
    margin-bottom: 10px;
}
.search__audio .play {
    display: none;
}
.search__result {
    position: fixed;
    left: 1vw;
    top: 1vw;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: white;
    border: 5px solid #223547;
    transform: scale3d(0, 0, 0);
    z-index: 1;
    align-items: center;
    color: #223547;
    font-weight: 300;
    justify-content: center;
    display: none;
}
.search__result.show {
    display: flex;
    animation: rubberBand 1s 0.6s ease forwards;
}
.search__result .result {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4;
}
.search__result .restart {
  background: #223547;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 20px;
  padding: 5px 20px;
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
}
@keyframes rubberBand {
    from {
      transform: scale3d(1, 1, 1);
    }
    30% {
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      transform: scale3d(1.05, 0.95, 1);
    }
    to {
      transform: scale3d(1, 1, 1);
    }
}
@media (max-width: 1360px) {
    .search__box .start {
        width: 60%;
    }
    .search__box input {
        width: 60%;
    }
}
@media (max-width: 730px){
    .search__box .start {
        width: 80%;
    }
    .search__box input {
        width: 80%;
    }
}
@media (max-width: 600px) {
    .search__wrap {
        padding: 20px;
    }
    .search__wrap > h1 {
        font-size: 44px;
    }
    .search__wrap > span {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .search__box input {
        font-size: 16px;
        padding: 12px 30px;
    }
    .search__box .start {
        font-size: 16px;
        padding: 12px 30px;
    }
}