searchEffect05

searchEffect05

filter()를 이용하여 속성의 중요도 보여주기

원본 소스 보기 원본 사이트

---

HTML

중요도에 따라서 확인하기 위한 .search__click 속성 갯수 보여주는 .search__info 속성 리스트 .search__list

코드보기

<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-star2="1"><a href="#">1개 이상</a></li>
                <li data-star2="2"><a href="#">2개 이상</a></li>
                <li data-star2="3"><a href="#">3개 이상</a></li>
                <li data-star2="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>

CSS

마우스 hover시의 색상 변화 등

코드보기

/* header */
#header {
    display: flex;
    justify-content: space-between;
}

#header nav {
    margin: 10px;
}

#header nav li {
    position: relative;
    display: inline;
}

#header nav li a {
    width: 30px;
    height: 30px;
    border: 1px solid var(--htmlColor);
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-family: "NexonLv1Gothic";
}

#header nav li.active a {
    background-color: var(--htmlColor);
    color: #fff;
}

#header nav li .sub {
    position: absolute;
    left: 0;
    top: 35px;
    width: 400px;
}

#header nav li .sub li a {
    width: auto;
    background-color: transparent;
    color: var(--htmlColor);
    border: 0;
    text-align: left;
    line-height: 1.2;
}

#header nav li .sub li.active a {
    text-decoration: underline;
}

/* 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;
}

.search__wrap > h1 {
    font-family: "Tmon";
    color: var(--htmlColor);
    font-size: 6vw;
    margin-bottom: 10px;
}

.search__box {
    margin-bottom: 20px;
}

.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: 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: 5px;
    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: 50px 0;
}
.search__list .line li {
    background: #e3eaf5;
    padding: 10px 30px;
    margin-bottom: 5px;
    border-radius: 10px;
}
.search__list .line li:hover {
    background: #c1d7f7;
    cursor: pointer;
}
.search__info {
    text-align: right;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px 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-color: 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;
}
.desc {
    color: #fff;
}
.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;
}

JAVASCRIPT

switch를 이용하여 data.star의 숫자 값을 그에 맞는 문자로 변환한다. li 안에 있는 각각의 star를 클릭했을 때에 이벤트를 발생시킨다. dataset에 있는 스타를 가져오고, 데이터 값이 타켓과 데이터 값이 같으면 출력.

const cssProperty = [
    { star: 1, name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." },
    .
    .
    .
];
const serchList = document.querySelector(".search__list ul");
const searchClick = document.querySelectorAll(".search__click ul li");

// 출력하기
function updateList(list) {
    listCSS = "";

    for (const data of list) {
        //listCSS += `<li>${data.name} : ${data.desc}<em>${data.star}</em></li>`;

        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;
        }
    }

    serchList.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; //dataset으로 값 가져오는 
        const target2 = star.dataset.star2;
        const filterList = cssProperty.filter(data => data.star == target || data.star >= target2)

        updateList(filterList);
    });
});