Portfolio Filter. – codezillaye

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="/filter.css">
</head>
<body>
    <div class="container">
        <div class="filter-buttons">
            <button class="filter-btn" data-filter="all">All Categories</button>
            <button class="filter-btn" data-filter="web-design">Web Design</button>
            <button class="filter-btn" data-filter="app">App</button>
            <button class="filter-btn" data-filter="graphic-design">Graphic Design</button>
        </div>

        <div class="portfolio-items">
            <div class="portfolio-item web-design">
                <img src="https://codezillaye.com/wp-content/uploads/2024/06/landing-page2.png" alt="Web Design Project 1">
                <h3>Web Design Project 1</h3>
            </div>
            <div class="portfolio-item web-design">
                <img src="https://codezillaye.com/wp-content/uploads/2024/06/b5landing.png" alt="Web Design Project 2">
                <h3>Web Design Project 2</h3>
            </div>
            <div class="portfolio-item app">
                <img src="https://codezillaye.com/wp-content/uploads/2024/06/t5landing.png" alt="App Project 1">
                <h3>App Project 1</h3>
            </div>
            <div class="portfolio-item graphic-design">
                <img src="https://codezillaye.com/wp-content/uploads/2024/06/clip3.png" alt="Graphic Design Project 1">
                <h3>Graphic Design Project 1</h3>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

*, *::after, 
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    clip-path: polygon(0 0, 78% 0, 100% 58%, -15% 100%, 0 85%);
   
}

.container {
    /* width: 100%; */
    height: 80%;
    /* margin-top: 1rem; */
    /* margin: 0 auto; */
    padding-left: 15px;
    padding-right: 15px;
}

.filter-buttons {
    text-align: center;
    margin: 20px 0;
}

.filter-btn {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #673ab7e8;
    color: #fff;
    cursor: pointer;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.filter-btn:hover {
    background-color: #555;
}

.portfolio-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.portfolio-item {
    width: 30%;
    margin: 15px 0;
    padding: 20px;
    box-shadow: 0 0 15px #f68fb1;
    background-color: #e91e63;
    display: none; /* Hide items by default */
}

.portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

 Js File /*--filtering logic to show or hide items based on the selected category.--*/
document.addEventListener('DOMContentLoaded', function () {
  const filterButtons = document.querySelectorAll('.filter-btn');
  const portfolioItems = document.querySelectorAll('.portfolio-item');

  filterButtons.forEach(button => {
      button.addEventListener('click', () => {
          const filter = button.getAttribute('data-filter');

          portfolioItems.forEach(item => {
              if (filter === 'all' || item.classList.contains(filter)) {
                  item.style.display = 'block';
              } else {
                  item.style.display = 'none';
              }
          });

          filterButtons.forEach(btn => btn.classList.remove('active'));
          button.classList.add('active');
      });
  });

  // Initially display all items
  document.querySelector('.filter-btn[data-filter="all"]').click();
});