<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Filtro de contenido</title>
    <meta name="description"
        content="Implementación de un filtro con Javascript para filtrar los contenidos de una página web">
    <meta name="robots" content="noindex, follow">
    <link rel="stylesheet" href="style.css">
    <script src="javascript.js"></script>
</head>

<body>
    <div class="container">
        <h1>Implementación de un filtro de objetos</h1>
        <p class="inline" class="bold">Filtrar por:
        <ol class="filtro">
            <li><a href="#todos" class="active">Todos</a></li>

            <li><a href="#rojo">Rojo</a></li>
            <li><a href="#azul">Azul</a></li>
            <li><a href="#naranja">Naranja</a></li>
            <li><a href="#verde">Verde</a></li>
        </ol>
        </p>

        <div class="boxContainer">
            <div class="box rojo"></div>
            <div class="box azul"></div>
            <div class="box azul"></div>
            <div class="box verde"></div>
            <div class="box naranja"></div>
            <div class="box naranja"></div>
            <div class="box verde"></div>
            <div class="box rojo"></div>
            <div class="box azul"></div>
            <div class="box rojo"></div>
            <div class="box rojo"></div>
            <div class="box verde"></div>
            <div class="box naranja"></div>
            <div class="box naranja"></div>
            <div class="box verde"></div>
        </div>
    </div>
</body>

</html>
@font-face {
  font-family: myFont;
  src: url(https://pablomonteserin.com/wp-content/themes/m/fonts/Poppins-Regular.ttf);
}
h1,
p {
  margin: 15px;
}
.container {
  max-width: 1024px;
  margin: auto;
  font-family: myFont;
}
.boxContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 15px;
}

.verde {
  background: #a4d1c8;
}

.naranja {
  background: #f77754;
}

.rojo {
  background: #6c757d;
}

.azul {
  background: #537d91;
}

.oculta {
  overflow: hidden;
  animation: ocultar 0.5s;
  animation-fill-mode: forwards;
}

@keyframes ocultar {
  to {
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
  }
}

.inline {
  display: inline-block;
  font-weight: bold;
}

.filtro {
  display: inline-block;
  padding-left: 0;
}
.filtro a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.filtro li {
  display: inline-block;
}

.bold {
  font-weight: bold;
}
.active {
  color: #f77754 !important;
}
window.addEventListener('load', () => {
    console.log("llega")
    document.querySelectorAll('.filtro a').forEach(obj => {
        obj.addEventListener('click', e => {
            e.preventDefault();
            e.stopPropagation();
            let filtro = obj.getAttribute('href');
            filtro = filtro.substring(1, filtro.length);
            const objs = document.querySelectorAll('.box');

            if (filtro == "todos") {
                objs.forEach((obj) => {
                    obj.classList.remove("oculta");

                });
            } else {
                objs.forEach((obj) => {
                    if (obj.classList.contains(filtro)) {
                        obj.classList.remove("oculta");
                    } else {
                        obj.classList.add("oculta");
                    }
                });
            }

            document.querySelectorAll('.filtro a').forEach(link => {
                link.classList.remove('active');
            });
            e.target.classList.add('active');
        });
    });
});