Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Ürünler Sayfası</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
		}

		header {
			background-color: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
		}

		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 20px;
		}

		.product {
			border: 1px solid #ddd;
			margin: 10px;
			padding: 10px;
			width: 30%;
		}

		.product img {
			max-width: 100%;
		}

		.product h2 {
			margin: 10px 0;
		}

		.product p {
			font-size: 18px;
			font-weight: bold;
			margin: 10px 0;
		}

		.filter {
			background-color: #f1f1f1;
			padding: 20px;
			position: fixed;
			left: 0;
			top: 80px;
			width: 20%;
		}

		.filter h2 {
			margin-top: 0;
		}

		.filter label {
			display: block;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.filter input[type="checkbox"],
		.filter select {
			margin-bottom: 10px;
			width: 100%;
		}

		.search {
			margin-bottom: 20px;
			text-align: center;
		}

		.search label {
			display: block;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.search input[type="text"] {
			margin-right: 10px;
			width: 60%;
		}

		.search button {
			background-color: #333;
			color: #fff;
			border: none;
			padding: 10px 20px;
			font-size: 16px;
			font-weight: bold;
			cursor: pointer;
		}

		.search button:hover {
			background-color: #444;
		}
	</style>
</head>
<body>
	<header>
		<h1>Ürünler Sayfası</h1>
	</header>
	<div class="filter">
		<h2>Filtrele</h2>
		<label for="category">Kategori:</label>
		<select id="category">
			<option value="">Hepsi</option>
			<option value="elektronik">Elektronik</option>
			<option value="giyim">Giyim</option>
			<option value="ev">Ev</option>
			<option value="spor">Spor</option>
		</select>
		<label for="price">Fiyat Aralığı:</label>
		<select id="price">
			<option value="">Hepsi</option>
			<option value="0-50">0-50</option>
			<option value="50-100">50-100</option>
			<option value="100-200">100-200</option>
			<option value="200-500">200-500</option>
			<option value="500+">500+</option>
		</select>
		<label for="brand">Marka:</label>
		<input type="checkbox" id="brand1" name="brand1" value="sony">
		<label for="brand1">Sony</label>
		<input type="checkbox" id="brand2" name="brand2" value="samsung">
		<label for="brand2">Samsung</label>
		<input type="checkbox" id="brand3" name="brand3" value="apple">
		<label for="brand3">Apple</label>
	</div>
	<div class="search">
		<label for="search-text">Ara:</label>
		<input type="text" id="search-text" name="search-text" placeholder="Ürün adı...">
		<button>Ara</button>
	</div>
	<div class="container">
		<div class="product" data-category="elektronik" data-price="399.99" data-brand="samsung">
			<img src="https://via.placeholder.com/300x200.png?text=Ürün+1" alt="Ürün 1">
			<h2>Ürün 1</h2>
			<p>399.99 TL</p>
			<a href="#">Detaylar</a>
		</div>
		<div class="product" data-category="giyim" data-price="59.99" data-brand="nike">
			<img src="https://via.placeholder.com/300x200.png?text=Ürün+2" alt="Ürün 2">
			<h2>Ürün 2</h2>
			<p>59.99 TL</p>
			<a href="#">Detaylar</a>
		</div>
		<div class="product" data-category="ev" data-price="199.99" data-brand="ikea">
			<img src="https://via.placeholder.com/300x200.png?text=Ürün+3" alt="Ürün 3">
			<h2>Ürün 3</h2>
			<p>199.99 TL</p>
			<a href="#">Detaylar</a>
		</div>
		<div class="product" data-category="spor" data-price="749.99" data-brand="adidas">
			<img src="https://via.placeholder.com/300x200.png?text=Ürün+4" alt="Ürün 4">
			<h2>Ürün 4</h2>
			<p>749.99 TL</p>
			<a href="#">Detaylar</a>
		</div>
	</div>
	<script>
		const categoryFilter = document.querySelector('#category');
		const priceFilter = document.querySelector('#price');
		const brandFilters = document.querySelectorAll('input[type="checkbox"]');
		const searchBtn = document.querySelector('.search button');
		const searchText = document.querySelector('#search-text');
		const products = document.querySelectorAll('.product');

		function filterProducts() {
			for (let i = 0; i < products.length; i++) {
				let product = products[i];
								let category = categoryFilter.value;
				let priceRange = priceFilter.value;
				let brandFiltersChecked = [];
				brandFilters.forEach(function (brandFilter) {
					if (brandFilter.checked) {
						brandFiltersChecked.push(brandFilter.value);
					}
				});
				let brand = brandFiltersChecked.join(',');
				let searchTextValue = searchText.value.toLowerCase();

				if (category !== 'all' && product.dataset.category !== category) {
					product.style.display = 'none';
					continue;
				}

				let productPrice = parseFloat(product.dataset.price);
				if (priceRange === '0' || (priceRange === '50-100' && productPrice < 50) || (priceRange === '100-200' && (productPrice < 100 || productPrice > 200)) || (priceRange === '200-500' && (productPrice < 200 || productPrice > 500)) || (priceRange === '500+' && productPrice < 500)) {
					product.style.display = 'none';
					continue;
				}

				if (brand !== '' && !product.dataset.brand.split(',').some(r => brand.includes(r))) {
					product.style.display = 'none';
					continue;
				}

				if (searchTextValue !== '' && !product.querySelector('h2').textContent.toLowerCase().includes(searchTextValue)) {
					product.style.display = 'none';
					continue;
				}

				product.style.display = 'block';
			}
		}

		categoryFilter.addEventListener('change', filterProducts);
		priceFilter.addEventListener('change', filterProducts);
		brandFilters.forEach(function (brandFilter) {
			brandFilter.addEventListener('change', filterProducts);
		});
		searchBtn.addEventListener('click', filterProducts);
		searchText.addEventListener('keyup', filterProducts);
	</script>
</body>

</html>
Editor is loading...