Search Effect 05

Search Effect05

이번 시간에는 filter()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다.
별을 클릭하면 중요도와 함께 속성 설명이 나옵니다.

---

원본 사이트 보기 원본 소스 보기

01. HTML

코드 보기

{
    <main id="main">
    <div class="search__wrap">
        <span>filter()를 이용하여 속성의 중요도 보여주기</span>
        <h1>CSS 속성 검색하기</h1>
      
        <div class="search__click">
            <ul>
                <li data-star="0"><a href="#">☆☆☆☆☆</a></li>
                <li data-star="1"><a href="#">★☆☆☆☆</a></li>
                <li data-star="2"><a href="#">★★☆☆☆</a></li>
                <li data-star="3"><a href="#">★★★☆☆</a></li>
                <li data-star="4"><a href="#">★★★★☆</a></li>
                <li data-star="5"><a href="#">★★★★★</a></li>
            </ul>
            <ul>
                <li data-num="1"><a href="#">1개 이상</a></li>
                <li data-num="2"><a href="#">2개 이상</a></li>
                <li data-num="3"><a href="#">3개 이상</a></li>
                <li data-num="4"><a href="#">4개 이상</a></li>
            </ul>
        </div>
      
        <div class="search__info">
            <div>찾은 속성 갯수 : <span class="num">0</span></div>
        </div>
      
        <div class="search__list">
            <ul class="line">
      
            </ul>
        </div>
      
      </div>
</main>
}

02. CSS

코드 보기

{
    /* main */
    #main {
        margin: 50px 10px;
    }
    .search__wrap {
        max-width: 1400px;
        margin: 0 auto;
        border: 3px solid #223547;
        border-radius: 20px;
        background-color: #F1F3F6;
        padding: 30px;
        text-align: center;
    }
    .search__wrap > span {
        font-size: 20px;
        margin-bottom: 20px;
        display: inline-block;
    }
    .search__wrap > h1 {
        font-family: 'Tmon';
        color: #223547;
        font-size: 6vw;
        margin-bottom: 10px;
    }
    .search__box {
        margin-bottom: 40px;
    }
    .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 #223547;
        padding: 15px 40px;
        width: 70%;
        border-radius: 50px;
        font-size: 20px;
    }
    
    .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-bottom: 5px;
        text-align: left;
        transition: all 0.3s;
        cursor: pointer;
    }
    .search__list span:hover {
        background-color: var(--htmlColor);
        color: #fff;
    }
    .search__list em {
        float: right;
        font-style: normal;
    }
    .search__list .line {
        margin-top: 50px 0;
    }
    .search__list .line li {
        background: #e3eaf5;
        padding: 10px 30px;
        margin-bottom: 5px;
        border-radius: 50px;
    }
    .search__list .line li:hover {
        background: #d3e2fa;
        cursor: pointer;
    }
    .search__info {
        text-align: right;
        margin-bottom: 30px;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--htmlColor);
    }
    .search__info .type {
        text-align: center;
        margin-bottom: 10px;
    }
    .search__info  .keyword {
        text-align: center;
        margin-bottom: 10px;
    }
    .search__info  .keyword span {
        border: 2px solid var(--htmlColor);
        border-radius: 50px;
        padding: 10px;
        display: inline-block;
        margin-bottom: 4px;
    }
    .search__info  .keyword span:hover {
        background-color: var(--htmlColor);
        color: #fff;
        cursor:pointer;
    }
    .search__desc {
        padding: 20px 40px 20px 60px;
        margin-bottom: 50px;
        border-radius: 50px;
        display: inline-block;
        background: var(--htmlColor);
        color: #fff;
        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='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 16.958L21.5 21.958' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 22px 17px;
    }
    .search__click {
        margin-top: 10px;
        margin-bottom: 30px;
    }
    .search__click li {
        display: inline;
        margin: 5px;
    }
    .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;
    }   
}

03. JAVASCRIPT

스위치문과 매개변수를 사용해서 클릭시 중요도가 나오게 만들었습니다.

{
    const cssProperty = [...];
    //선택자
    const searchList = document.querySelector(".search__list ul");
    const searchClick = document.querySelectorAll(".search__click ul li");

    //출력하기 (매개변수 사용)
    function updateList(list){
    listCSS = "";

    for(const data of list){
        switch(data.star){
            case 0:
            listCSS += `<li>${data.name} : ${data.desc}<em>☆☆☆☆☆</em></li>`;
            break;
            case 1:
            listCSS += `<li>${data.name} : ${data.desc}<em>★☆☆☆☆</em></li>`;
            break;
            case 2:
            listCSS += `<li>${data.name} : ${data.desc}<em>★★☆☆☆</em></li>`;
            break;
            case 3:
            listCSS += `<li>${data.name} : ${data.desc}<em>★★★☆☆</em></li>`;
            break;
            case 4:
            listCSS += `<li>${data.name} : ${data.desc}<em>★★★★☆</em></li>`;
            break;
            case 5:
            listCSS += `<li>${data.name} : ${data.desc}<em>★★★★★</em></li>`;
            break;
            default:
            listCSS += `<li>${data.name} : ${data.desc}<em>값이 없음</em></li>`;
            break;
        }
    }

    searchList.innerHTML = listCSS;

    const searchList2 = document.querySelectorAll(".search__list ul li");
    document.querySelector(".num").textContent=searchList2.length;
    }
    updateList(cssProperty);

    //클릭하기
    searchClick.forEach((star) => {
    star.addEventListener("click",()=>{
        const target = star.dataset.star;
        const target2 = star.dataset.num;
        const filterList = cssProperty.filter(data => data.star == target || data.star >= target2 );
        
        
        updateList(filterList);
    });
    })
}