#TIL27


ボタンをクリックすると一致するデータのみが表示されます(フィルタ)
1.

HTML


  <section id="work" class="section scroll-spy">
    <div class="section__container">
      <h1>My work</h1>
      <h3>Projects</h3>
      <div class="work__categories">
        <button class="category__btn selected" data-filter="*">
          All<span class="category__count">3</span>
        </button>
        <button class="category__btn" data-filter="front-end">
          Front-end<span class="category__count">3</span>
        </button>
        <button class="category__btn" data-filter="back-end">
          Back-end<span class="category__count">4</span>
        </button>
        <button class="category__btn" data-filter="mobile">
          Mobile<span class="category__count">2</span>
        </button>
      </div>
      <div class="work__projects">
        <a href="#" class="project" target="_blank" data-type="front-end">
          <img class="project__img" src="./images/projects/youtube.PNG" alt="Youtube">
          <div class="project__description">
            <h3>YouTube Site</h3>
            <span>Clone coding with HTML and CSS</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="back-end">
          <img class="project__img" src="./images/projects/header.PNG" alt="responsive-nav-bar">
          <div class="project__description">
            <h3>Responsive Navbar</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="mobile">
          <img class="project__img" src="./images/projects/overwatch.PNG" alt="Youtube">
          <div class="project__description">
            <h3>Overwatch Site</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="front-end">
          <img class="project__img" src="./images/projects/youtube.PNG" alt="Youtube">
          <div class="project__description">
            <h3>YouTube Site</h3>
            <span>Clone coding with HTML and CSS</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="back-end">
          <img class="project__img" src="./images/projects/header.PNG" alt="responsive-nav-bar">
          <div class="project__description">
            <h3>Responsive Navbar</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="mobile">
          <img class="project__img" src="./images/projects/overwatch.PNG" alt="Youtube">
          <div class="project__description">
            <h3>Overwatch Site</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="front-end">
          <img class="project__img" src="./images/projects/header.PNG" alt="responsive-nav-bar">
          <div class="project__description">
            <h3>Responsive Navbar</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="back-end">
          <img class="project__img" src="./images/projects/overwatch.PNG" alt="Youtube">
          <div class="project__description">
            <h3>Overwatch Site</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
      </div>
    </div>
  </section>

JavaScript

  • Remove selection from the previous item and select the new one
  • <script>
      const workBtnContainer = document.querySelector('.work__categories');
      const projectContainer = document.querySelector('.work__projects');
      const projects = document.querySelectorAll('.project');
      workBtnContainer.addEventListener('click', (e) => {
        const filter = e.target.dataset.filter || e.target.parentNode.dataset.filter;
        if (filter === null) {
          return;
        }
    
        const actvie = document.querySelector('.category__btn.selected');
        actvie.classList.remove('selected');
        const target = e.target.nodeName === 'BUTTON' ? e.target : e.target.parentNode;
        target.classList.add('selected');
    
        projects.forEach((project) => {
          console.log('type:',project.dataset.type);
          if ( filter === '*' || filter === project.dataset.type) {
            project.classList.remove('invisible');
          } else {
            project.classList.add('invisible');
          }
        });
      });
     </script>

    CSS

    .project.invisible {
      display: none;
    }
     
    2.

    HTML


      <section id="movies">
        <h2 class="hide">영화정보</h2>
        <div class="inner">
          <ul class="movies__menu">
            <li><button class="btn btn--gray selected" data-filter="*">박스오피스</button></li>
            <li><button class="btn btn--gray" data-filter="chart1">최신개봉작</button></li>
            <li><button class="btn btn--gray" data-filter="chart2">상영예정작</button></li>
            <li><button class="btn btn--gray" data-filter="chart3">큐레이션</button></li>
          </ul>
    
          <div class="swiper-container all " data-type="*"> 
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./img/[email protected]" alt="" class="poster" />
                <div class="movie">
                  <div class="title">
                    <img src="./img/19.PNG" alt="" class="icon" />
                    <h5>침묵</h5>
                  </div>
    
                  <div class="btn-group">
                    <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                    <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
                  </div>
                  <div class="rank">1</div>
                </div>
              </div>
              <div class="swiper-slide">
                <img src="./img/[email protected]" alt="" class="poster" />
                <div class="movie">
                  <div class="title">
                    <img src="./img/19.PNG" alt="" class="icon" />
                    <h5>신세계</h5>
                  </div>
    
                  <div class="btn-group">
                    <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                    <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
                  </div>
                  <div class="rank">2</div>
                </div>
              </div>
              <div class="swiper-slide">
                <img src="./img/[email protected]" alt="" class="poster" />
                <div class="movie">
                  <div class="title">
                    <img src="./img/15.PNG" alt="" class="icon" />
                    <h5>마스터</h5>
                  </div>
    
                  <div class="btn-group">
                    <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                    <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
                  </div>
                  <div class="rank">3</div>
                </div>
              </div>
              <div class="swiper-slide">
                <img src="./img/[email protected]" alt="" class="poster" />
                <div class="movie">
                  <div class="title">
                    <img src="./img/15.PNG" alt="" class="icon" />
                    <h5>마약왕</h5>
                  </div>
    
                  <div class="btn-group">
                    <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                    <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
                  </div>
                  <div class="rank">4</div>
                </div>
              </div>
              <div class="swiper-slide">
                <img src="./img/[email protected]" alt="" class="poster" />
                <div class="movie">
                  <div class="title">
                    <img src="./img/19.PNG" alt="" class="icon" />
                    <h5>her</h5>
                  </div>
    
                  <div class="btn-group">
                    <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                    <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
                  </div>
                  ...
                  

    Javascript


    // MOVIES FILTERING
    <script>
    const moviesMenu = document.querySelector('#movies .movies__menu');
    const slides = document.querySelectorAll('#movies .swiper-container');
    moviesMenu.addEventListener('click', function (event) {
      const filter = event.target.dataset.filter;
      // console.log('filter:', filter);
      if (filter === null) {
        return;
      }
      // MOVIES SELECTED BUTTON
      const active = moviesMenu.querySelector('.btn.selected');
      if (active != null) {
        active.classList.remove('selected');
      }
      event.target.classList.add('selected');
    
    
      slides.forEach(function (slide) {
        // console.log('type:', slide.dataset.type);
        if (filter === slide.dataset.type) {
          slide.classList.remove('invisible');
        } else {
          slide.classList.add('invisible');
        };
      });
    });
    </script>

    CSS

    #movies .swiper-container.invisible {
      display: none;
    }