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

CSS 속성 검색하기

CSS 속성 갯수 : 0

소스 보기

Javascript

HTML

CSS

// 출력하기
const searchInfo = document.querySelector('span.num');
const searchList = document.querySelector('.search__list ul');
const starData = [
    '👎🏿👎🏿👎🏿👎🏿👎🏿',
    '👍👎🏿👎🏿👎🏿👎🏿',
    '👍👍👎🏿👎🏿👎🏿',
    '👍👍👍👎🏿👎🏿',
    '👍👍👍👍👎🏿',
    '👍👍👍👍👍',
];

function updateList(list) {
    let listCSS = "";

    for(const data of list) {
        listCSS += `${data.name} : ${data.desc} ${starData[data.star]}`;
    }
    searchList.innerHTML = listCSS;
    searchInfo.innerHTML = list.length;
}

updateList(cssProperty);

// 클릭하기
const searchClick = document.querySelectorAll('.search__click ul li');
const searchClick2 = document.querySelectorAll('.search__click ul')[1].querySelectorAll('li');

searchClick.forEach((star, idx) => {
    star.addEventListener('click', (e) => {
        e.preventDefault();
        const target = idx || star.dataset.star;
        const filterList = cssProperty.filter((data) => {
            return data.star == target;
        });
        updateList(filterList);
    });
});

searchClick2.forEach((star, idx) => {
    star.addEventListener('click', (e) => {
        e.preventDefault();
        const target = idx + 1;
        const filterList = cssProperty.filter((data) => {
            return data.star >= target;
        });
        updateList(filterList);
    });
});

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

        <div class="search__info">
            <div>CSS 속성 갯수 : <span class="num">0</span></div>
        </div>
        
        <div class="search__list">
            <ul class="line"></ul>
        </div>
    </div>
</main>

.search__wrap>span {
    font-size: 20px;
    margin-bottom: 20px;
    display: inline-block;
}

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

.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 50px;
    width: 70%;
    border-radius: 50px;
    font-size: 20px;
}

.search__list {}

.search__list li {
    text-align-last: left;
    line-height: 1.7;
}

.search__list li.hide {
    display: none;
}

.search__list li.hide.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 li em {
    float: right;
    font-style: normal;
}

.search__list .line {
    margin-top: 50px;
}

.search__list .line li {
    background: #e3eaf5;
    padding: 10px 30px;
    margin-bottom: 10px;
    border-radius: 30px;
    cursor: pointer;
}

.search__list .line li:hover {
    background: #d7e0f0;
}

.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: 14px;
}

.search__info .keyword span:hover {
    background-color: var(--htmlColor);
    color: #fff;
    cursor: pointer;
}

.search__info .keyword span.active {
    background-color: var(--htmlColor);
    color: #fff;
}

.search__desc {
    border: 2px solid var(--htmlColor);
    padding: 20px 40px 20px 75px;
    margin-bottom: 50px;
    border-radius: 50px;
    display: inline-block;
    color: #fff;
    background-color: var(--htmlColor);
    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: 20px 15px;
    background-size: 50px 30px;
}

.search__click {
    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: 10px 0;
}

.search__click li a:hover {
    background-color: var(--htmlColor);
    color: #fff;
}