Codice HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript Portfolio Filter</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
      <link rel="stylesheet" href="style.css">
  
</head>

<body>

  <section class="main text-center">
  <div class="container">
    <h1>JAVASCRIPT PORTFOLIO FILTER</h1>
    
    <ul class="list-unstyled row">
      <li class="col-md active" data-class="all">ALL</li>
      <li class="col-md" data-class="design">WEB DESIGN</li>
      <li class="col-md" data-class="development">WEB DEVELOPMENT</li>
      <li class="col-md" data-class="graphic">GRAPHIC DESIGN</li>
      <li class="col-md" data-class="seo">SEARCH ENGINE</li>
      <li class="col-md" data-class="ui">UI / UX</li>
    </ul>
  </div>
  <div class="container-fluid ">
    <div class="col-md-3 images" data-class="ui">
      <img src="https://picsum.photos/300/200?random=1" alt="">
    </div>
    <div class="col-md-3 images" data-class="development">
      <img src="https://picsum.photos/300/200?random=2" alt="">
    </div>
    <div class="col-md-3 images" data-class="ui">
      <img src="https://picsum.photos/300/200?random=3" alt="">
    </div>
    <div class="col-md-3 images" data-class="design">
      <img src="https://picsum.photos/300/200?random=4" alt="">
    </div>
    <div class="col-md-3 images" data-class="development">
      <img src="https://picsum.photos/300/200?random=5" alt="">
    </div>
    <div class="col-md-3 images" data-class="design">
      <img src="https://picsum.photos/300/200?random=6" alt="">
    </div>
    <div class="col-md-3 images" data-class="graphic">
      <img src="https://picsum.photos/300/200?random=7" alt="">
    </div>
    <div class="col-md-3 images" data-class="seo">
      <img src="https://picsum.photos/300/200?random=8" alt="">
    </div>
  </div>
</section>
 
    <script  src="function.js"></script>

</body>
</html>

Codice css


.main{
    padding: 50px 0;
}

.main h1{
    font-size: 42px;
    color: #333;
    font-weight: 700;
}

.main p{
    font-size: 18px;
    color: #687074;
    width: 70%;
    margin: 15px auto;
}

.main p a {
	text-decoration: none;
	color: #ec1c23;
	font-weight: 900;
}

.main ul{
    margin-top: 50px;
}

.main ul li{
    padding: 10px 15px;
    border: 2px solid #333;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all .5s ease;
	color: #333;
}

.main ul li.active,
.main ul li:hover{
    background-color: #ec1c23;
    color: #FFF;
    border: 2px solid #ec1c23;
}

.main ul li:last-of-type{
    margin-right: 0 ;
}

.main ul li:nth-of-type(3),
.main ul li:nth-of-type(4),
.main ul li:nth-of-type(5){
    flex-grow: 2
}

.main .container-fluid{
  overflow: hidden;
  padding: 0;
}

.main .container-fluid .col-md-3{
    padding: 0;
    float: left;
    transition: all 5s ease-in-out
}

.main .container-fluid img{
    width: 100%
}

@media (max-width: 767px){
    .main .container-fluid img{
        margin-bottom: 15px
    }
}

Codice js


const listItems = document.querySelectorAll('.main li');
const allimages = document.querySelectorAll('.main .container-fluid .images');

function toggleActiveClass(active){
    listItems.forEach(item => {
      item.classList.remove('active');
    })
    active.classList.add('active');
}

function toggleimages(dataClass){
    if(dataClass === 'all'){
        for(let i = 0; i<allimages.length; i++){
            allimages[i].style.display = 'block';
        }
    }else{
        for(let i = 0; i<allimages.length; i++)
            allimages[i].dataset.class === dataClass ? allimages[i].style.display = 'block' : allimages[i].style.display = 'none';
    }
}

for(let i = 0; i < listItems.length; i++){
    listItems[i].addEventListener('click', function(){
        toggleActiveClass(listItems[i]);
        toggleimages(listItems[i].dataset.class);
    });
}

Lascia un commento