Skip to content

Commit

Permalink
feat: added filter for projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@SerhiiRepinskyi
SerhiiRepinskyi committed Oct 20, 2023
1 parent 83ba1d7 commit 1ebe88e
Showing 1 changed file with 69 additions and 23 deletions.
92 changes: 69 additions & 23 deletions portfolio.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,24 +123,38 @@ <h1 class="title-section hidden">Portfolio</h1>

<ul class="filters-list">
<li>
<button type="button" class="btn-secondary btn-secondary--all">Усі</button>
<button
type="button"
class="btn-secondary btn-secondary--all"
onclick="filterProjects('all')"
>
Усі
</button>
</li>
<li>
<button type="button" class="btn-secondary">Веб-сайти</button>
<button type="button" class="btn-secondary" onclick="filterProjects('web')">
Веб-сайти
</button>
</li>
<li>
<button type="button" class="btn-secondary">Додатки</button>
<button type="button" class="btn-secondary" onclick="filterProjects('app')">
Додатки
</button>
</li>
<li>
<button type="button" class="btn-secondary">Дизайн</button>
<button type="button" class="btn-secondary" onclick="filterProjects('design')">
Дизайн
</button>
</li>
<li>
<button type="button" class="btn-secondary">Маркетинг</button>
<button type="button" class="btn-secondary" onclick="filterProjects('marketing')">
Маркетинг
</button>
</li>
</ul>

<ul class="grid-portfolio">
<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="web">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -165,7 +179,9 @@ <h1 class="title-section hidden">Portfolio</h1>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand All @@ -176,7 +192,7 @@ <h2 class="project__card-title">Технокряк</h2>
</article>
</li>

<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="design">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -201,7 +217,9 @@ <h2 class="project__card-title">Технокряк</h2>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand All @@ -212,7 +230,7 @@ <h2 class="project__card-title">Постер New Orlean vs Golden Star</h2>
</article>
</li>

<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="app">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -237,7 +255,9 @@ <h2 class="project__card-title">Постер New Orlean vs Golden Star</h2>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand All @@ -248,7 +268,7 @@ <h2 class="project__card-title">Ресторан Seafood</h2>
</article>
</li>

<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="marketing">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -273,7 +293,9 @@ <h2 class="project__card-title">Ресторан Seafood</h2>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand All @@ -284,7 +306,7 @@ <h2 class="project__card-title">Проєкт Prime</h2>
</article>
</li>

<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="app">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -309,7 +331,9 @@ <h2 class="project__card-title">Проєкт Prime</h2>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand All @@ -320,7 +344,7 @@ <h2 class="project__card-title">Проєкт Boxes</h2>
</article>
</li>

<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="web">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -345,7 +369,9 @@ <h2 class="project__card-title">Проєкт Boxes</h2>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand All @@ -356,7 +382,7 @@ <h2 class="project__card-title">Inspiration has no Borders</h2>
</article>
</li>

<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="design">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -381,7 +407,9 @@ <h2 class="project__card-title">Inspiration has no Borders</h2>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand All @@ -392,7 +420,7 @@ <h2 class="project__card-title">Видання Limited Edition</h2>
</article>
</li>

<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="marketing">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -417,7 +445,9 @@ <h2 class="project__card-title">Видання Limited Edition</h2>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand All @@ -428,7 +458,7 @@ <h2 class="project__card-title">Проєкт LAB</h2>
</article>
</li>

<li class="grid-portfolio__item">
<li class="grid-portfolio__item" data-category="app">
<article class="project">
<a href="#" class="project__link">
<div class="thumb">
Expand All @@ -453,7 +483,9 @@ <h2 class="project__card-title">Проєкт LAB</h2>
/>
</picture>
<p class="thumb__overlay">
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів. Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи приватну особу.
Ресурс пропонує комплексні пропозиції з різним рівнем функціоналу та сервісів.
Все це дозволить відвідувачу отримати вичерпні відомості про компанію чи
приватну особу.
</p>
</div>
<div class="project__card">
Expand Down Expand Up @@ -577,5 +609,19 @@ <h2 class="project__card-title">Growing Business</h2>
</div>
</footer>
<script src="./js/menu.js"></script>

<script>
function filterProjects(category) {
const projects = document.querySelectorAll('.grid-portfolio__item');
projects.forEach(project => {
const projectCategory = project.getAttribute('data-category');
if (category === 'all' || category === projectCategory) {
project.style.display = 'block';
} else {
project.style.display = 'none';
}
});
}
</script>
</body>
</html>

0 comments on commit 1ebe88e

Please sign in to comment.