Image Filters using HTML, CSS and JavaScript
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Image Filters</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
main h1 {
margin: 1rem;
}
.btn-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 0rem 1rem;
}
.btn {
padding: 6px;
width: 5rem;
margin: 7px;
border: 2px solid black;
border-radius: 8px;
background: white;
cursor: pointer;
}
.img-container {
padding: 1rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.img-container img {
width: 10rem;
margin: 1rem;
border-radius: 10px;
}
/* Media query: Responsive design */
@media screen and (min-width: 1789px) {
.img-container {
width: 100rem;
}
}
</style>
<body>
<main>
<h1>Image Galary</h1>
<div class="btn-container">
<button type="button" class="btn" data-filter="all">All</button>
<button type="button" class="btn" data-filter="dinosours">Dinosours</button>
<button type="button" class="btn" data-filter="dragon">Dragon</button>
<button type="button" class="btn" data-filter="flower">FLowers</button>
<button type="button" class="btn" data-filter="unique">Unique</button>
<button type="button" class="btn" data-filter="panda">Panda</button>
<button type="button" class="btn" data-filter="tree">Tree</button>
<button type="button" class="btn" data-filter="fire">Fire</button>
<button type="button" class="btn" data-filter="mouse">Mouse</button>
<button type="button" class="btn" data-filter="house">House</button>
</div>
<div class="img-container">
<img src="./images/baby_tree.jpg" alt="Baby tree" class="tree">
<img src="./images/baby_tree1.jpg" alt="Baby tree" class="tree">
<img src="./images/baby_tree2.jpg" alt="Baby tree" class="tree">
<img src="./images/dinosaurs.jpg" alt="Dinosaurs" class="dinosours">
<img src="./images/dragon.jpg" alt="Dragon" class="dragon">
<img src="./images/fire.jpg" alt="Fire" class="fire">
<img src="./images/flower.jpg" alt="Flower" class="flower">
<img src="./images/flower1.jpg" alt="Flower1" class="flower">
<img src="./images/flower2.jpg" alt="Flower2" class="flower">
<img src="./images/flower3.jpg" alt="Flower3" class="flower">
<img src="./images/flower4.jpg" alt="Flower4" class="flower">
<img src="./images/house.jpg" alt="House" class="house">
<img src="./images/mouse.jpg" alt="Mouse" class="mouse">
<img src="./images/mouse1.jpg" alt="Mouse1" class="mouse">
<img src="./images/mouse1.jpg" alt="Mouse1" class="mouse">
<img src="./images/pandas.jpg" alt="Pandas" class="panda">
<img src="./images/pandas1.jpg" alt="Pandas1" class="panda">
<img src="./images/unique.jpg" alt="Unique" class="unique">
</div>
<script>
const btns = document.querySelectorAll('.btn');
const images = document.querySelectorAll('.img-container img');
btns.forEach((btn) => {
btn.addEventListener('click', (e) => {
const filter = e.target.dataset.filter; //provide button value
images.forEach((img) => {
if (filter === "all") {
img.style.display = 'block';
}
else {
if (img.classList.contains(filter)) {
img.style.display = 'block';
}
else {
img.style.display = 'none';
}
}
});
});
});
</script>
</body>
</html>
0 Comments