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