<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="link">
<a href="#" class="all">Todos</a>
<a href="#" class="blue">Azul</a>
<a href="#" class="orange">Naranja</a>
<a href="#" class="gray">Gris</a>
</div>
<div class="container">
<div class="box blue"></div>
<div class="box gray"></div>
<div class="box orange"></div>
<div class="box orange"></div>
<div class="box blue"></div>
<div class="box gray"></div>
<div class="box orange"></div>
<div class="box blue"></div>
<div class="box gray"></div>
<div class="box orange"></div>
<div class="box orange"></div>
<div class="box blue"></div>
<div class="box gray"></div>
<div class="box orange"></div>
<div class="box blue"></div>
<div class="box gray"></div>
<div class="box orange"></div>
<div class="box orange"></div>
<div class="box blue"></div>
<div class="box gray"></div>
<div class="box orange"></div>
<div class="box blue"></div>
<div class="box gray"></div>
<div class="box orange"></div>
<div class="box orange"></div>
<div class="box blue"></div>
<div class="box gray"></div>
<div class="box orange"></div>
</div>
<script src="./javascript.js"></script>
</body>
</html>
.container {
margin: auto;
width: 1100px;
display: flex;
flex-wrap: wrap;
}
.link a {
text-decoration: none;
color: black;
}
.box {
width: 150px;
height: 150px;
transition: 1s;
margin: 10px;
}
.box.gray {
background-color: #6C757D;
}
.box.blue {
background-color: #537D91;
}
.box.orange {
background-color: #F77754;
}
.disabled {
width: 0;
height: 0;
opacity: 0;
visibility: hidden;
margin: 0;
}
const filterThings = (e) => {
const link = e.target;
let thingToFilter = '';
if (link.classList.contains('orange')) {
thingToFilter = 'orange';
} else if (link.classList.contains('blue')) {
thingToFilter = 'blue';
} else if (link.classList.contains('gray')) {
thingToFilter = 'gray';
} else {
thingToFilter = 'all';
}
document.querySelectorAll('.box').forEach(box => {
if (box.classList.contains(thingToFilter) || thingToFilter === 'all') {
box.classList.remove('disabled');
} else {
box.classList.add('disabled');;
};
});
}
document.querySelectorAll('.link a').forEach(a => {
a.addEventListener('click', filterThings);
})