Оценить код, Может как-то улучшить

100
16 февраля 2022, 10:20

Ребят, не оценивайте верстку и адаптивность. Главное - js код, а именно фильтрация https://github.com/RomeoC0der/ProductFilter - ссылка на сурс Я beginner и буду рад критике

let samsung = document.getElementById('Samsung'); 
let xiaomi = document.getElementById('Xiaomi'); 
let apple = document.getElementById('Apple'); 
 
let filter = data => 
{ 
	var dat = data.getAttribute('data'); 
	var checkbox = data; 
	if(dat.toLowerCase() == 'samsung') 
	{ 
		if(checkbox.checked == true) 
		{ 
			samsung.style.display = "flex"; 
		} 
		else 
		{ 
		samsung.style.display = "none"; 
		} 
	} 
	if(dat.toLowerCase() == 'xiaomi') 
	{ 
		if(checkbox.checked == true) 
		{ 
				xiaomi.style.display = "flex"; 
		} 
		else 
		{ 
				xiaomi.style.display = "none"; 
		} 
	} 
	if(dat.toLowerCase() == 'apple') 
	{ 
		if(checkbox.checked == true) 
		{ 
				apple.style.display = "flex"; 
		} 
		else 
		{ 
				apple.style.display = "none"; 
		} 
	} 
} 
function ramFilter(ram) 
{ 
let VofRAM = ram.getAttribute('RAMS'); 
let allSmarts = document.querySelectorAll('[ram=\''+VofRAM+'\']'); 
	if(ram.checked == true) 
	{ 
		for(let i = 0; i < allSmarts.length; i++) 
		{ 
			allSmarts[i].style.display = "flex"; 
		} 
	} 
	else 
	{ 
		for(let i = 0; i < allSmarts.length; i++) 
		{ 
			allSmarts[i].style.display = "none"; 
		} 
 
	} 
} 
 
function romFilter(rom) 
{ 
let VofROM = rom.getAttribute('ROMS'); 
let allSmarts = document.querySelectorAll('[rom=\''+VofROM+'\']'); 
	if(rom.checked == true) 
	{ 
		for(let i = 0; i < allSmarts.length; i++) 
		{ 
			allSmarts[i].style.display = "flex"; 
		} 
	} 
	else 
	{ 
		for(let i = 0; i < allSmarts.length; i++) 
		{ 
			allSmarts[i].style.display = "none"; 
		} 
 
	} 
}
body 
{ 
	padding: 0; 
	margin: 0; 
} 
* 
{ 
	box-sizing: border-box; 
} 
 
{ 
	padding: 2px !important; 
	margin: 2px !important; 
	font-size: 1.3em; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
} 
.container 
{ 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: column; 
	width: 80%; 
	height: 100%; 
	margin: 0 auto; 
	position: relative; 
	margin-top: 20vh; 
} 
.container-first-column 
{ 
	display: flex; 
	justify-content: space-around; 
	align-items: center; 
	flex-direction: row; 
	width: 100%; 
 
} 
.container-first-column img 
{ 
	width: 100%; 
	max-width: 300px; 
} 
.container-second-column img 
{ 
width: 100%; 
	max-width: 300px; 
} 
.container-third-column img 
{ 
width: 100%; 
	max-width: 300px; 
} 
.container-second-column 
{ 
	display: flex; 
	justify-content: space-around; 
	align-items: center; 
	flex-direction: row; 
	width: 100%; 
} 
.container-third-column 
{ 
	display: flex; 
	justify-content: space-around; 
	align-items: center; 
	flex-direction: row; 
	width: 100%; 
} 
.container-first-column-row 
{ 
	width: 30%; 
	padding: 5px; 
	box-shadow: 0px 0px 10px 5px  pink; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: column; 
} 
.container-second-column-row 
{ 
	width: 30%; 
	margin-top: 2vh; 
	padding: 5px; 
	box-shadow: 0px 0px 10px 5px  pink; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: column; 
} 
.container-third-column-row 
{ 
	width: 30%; 
	margin-top: 2vh; 
	padding: 5px; 
	box-shadow: 0px 0px 10px 5px  pink; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: column; 
} 
.icon 
{ 
	max-width: 100% !important; 
	width: 1rem !important; 
	padding: 1px !important; 
	margin: 5px !important; 
} 
button 
{ 
	display: flex; 
	justify-content: center; 
	align-items: center; 
} 
/* 
@media (max-width: 1454px) 
{ 
	h2{ 
		font-size: 1.3em; 
	} 
	p{ 
		font-size: 1em; 
	} 
} 
@media(max-width: 1230px) 
{ 
	h2{ 
		font-size: 1.1em; 
	} 
	p{ 
		font-size: 0.85em; 
	} 
} 
@media(max-width: 1050px) 
{ 
	h2{ 
		font-size: 0.9em; 
	} 
	p{ 
		font-size: 0.75em; 
	} 
} 
*/ 
.filter 
{ 
	display: flex; 
	width: 10%; 
	height: 100vh; 
	background: gray; 
	flex-direction: column; 
	 
	align-items: center; 
	margin-top: 20vh; 
} 
.filter-body 
{ 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: column; 
} 
.filter-body div 
{ 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: row; 
} 
input 
{ 
	margin: 0; 
	padding: 0; 
} 
.main 
{ 
	display: flex; 
	width: 100%; 
	position: relative; 
	flex-direction: row; 
} 
.filter 
{ 
	transform: translateX(-100%); 
	transition: all .5s; 
} 
 
#openFilter 
{ 
		transform: translateX(250%); 
} 
#closeFilter 
{ 
 
}
<!DOCTYPE html> 
<html> 
<head> 
	<title>Quest</title> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
 
 
 
<div class="main"> 
	 
 
 
<div class="filter"> 
	<button onclick="openMenu(this)" id="openFilter">filter</button> 
	<div class="title"> 
		<h2>Filter</h2> 
	</div> 
	<div class="filter-body"> 
		<div><p href="#">Samsung</p><input type="checkbox" name="chk" data="Samsung" onclick="filter(this)" checked = "true"></div> 
		<div><p href="#">Xiaomi</p><input type="checkbox" name="chk" onclick="filter(this)" data = "Xiaomi" checked = "true"></div> 
		<div><p href="#">Apple</p><input type="checkbox" name="chk" onclick="filter(this)"data="Apple" checked = "true"></div> 
		<div><p>RAM:</p></div> 
		<div><p>4GB </p><input type="checkbox" name="" onclick = "ramFilter(this)" RAMS="4" checked="true"></div> 
		<div><p>3GB </p><input type="checkbox" name=""onclick = "ramFilter(this)" RAMS="3" checked="true"></div> 
		<div><p>6GB </p><input type="checkbox" name=""onclick = "ramFilter(this)" RAMS="6" checked="true"></div> 
				<div><p>ROM:</p></div> 
		<div><p>64GB </p><input type="checkbox" name="" onclick = "romFilter(this)" ROMS="64" checked="true"></div> 
		<div><p>128GB</p><input type="checkbox" name=""onclick = "romFilter(this)" ROMS="128" checked="true"></div> 
		<button onclick="closeMenu(this)" id="closeFilter">close Filter</button> 
	</div> 
	<div class="filter-footer"> 
		 
	</div> 
 
</div> 
 
 
<div class="container"> 
	<div class="container-first-column" data="Samsung" id="Samsung"> 
		<div class="container-first-column-row" ram="4" rom = "64"> 
			<img src="a30.png"> 
			<h2>Samsung A30 4/64</h2> 
			<p>Inch:6.4'</p> 
			<p><img src="rezolution.png" class="icon">Rezolution: 2340x1080</p> 
			<p>Processor: Exynos 7904</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: SUPER AMOLED</p> 
			<p><img src="camera.png" class="icon">Camera: 16mp + 5mp</p> 
			<p>Front Camera: 16mp</p> 
			<p>Android: 9.0(Pie)</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
		<div class="container-first-column-row"  ram="4" rom = "64"> 
			<img src="a50.jpg"> 
			<h2>Samsung A50 4/64</h2> 
			<p>Inch:6.4'</p> 
			<p><img src="rezolution.png" class="icon">Rezolution: 2340x1080</p> 
			<p>Processor: Exynos 7904</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: SUPER AMOLED</p> 
			<p><img src="camera.png" class="icon">Camera: 16mp + 5mp</p> 
			<p>Front Camera: 16mp</p> 
			<p>Android: 9.0(Pie)</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
		<div class="container-first-column-row"  ram="6" rom = "128"> 
			<img src="a70.jpg"> 
			<h2>Samsung A70 6/128</h2> 
			<p>Inch:6.4'</p> 
			<p><img src="rezolution.png" class="icon">Rezolution: 2340x1080</p> 
			<p>Processor: Exynos 7904</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: SUPER AMOLED</p> 
			<p><img src="camera.png" class="icon">Camera: 16mp + 5mp</p> 
			<p>Front Camera: 16mp</p> 
			<p>Android: 9.0(Pie)</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
	</div> 
	<div class="container-second-column" data="Xiaomi"  id="Xiaomi"> 
		<div class="container-second-column-row"  ram="4" rom = "128"> 
			<div><img src="note7.jpg"></div> 
			<h2>Xiaomi Redmi Note 7 4/128</h2> 
			<p>Inch:6.3'</p> 
			<p><img src="rezolution.png" class="icon">Rezolution: 2340x1080</p> 
			<p>Processor: Qualcomm Snapdragon 660</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: IPS (LTPS LCD)</p> 
			<p><img src="camera.png" class="icon">Camera: 48mp + 5mp</p> 
			<p>Front Camera: 13mp</p> 
			<p>Android: 9.0(Pie)</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
		<div class="container-second-column-row" ram="6" rom = "128"> 
			<div><img src="n8pro.jpg"></div> 
			<h2>Xiaomi Redmi Note 8 Pro 6/128</h2> 
			<p>Inch:6.53'</p> 
			<p><img src="icons/rezolution.png" class="icon">Rezolution: 2340x1080</p> 
			<p>Processor:  MediaTek Helio G90T</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: IPS (LTPS LCD)</p> 
			<p><img src="camera.png" class="icon">Camera: 64mp + 8mp + 2mp</p> 
			<p>Front Camera: 13mp</p> 
			<p>Android: 9.0(Pie)</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
		<div class="container-second-column-row" ram="6" rom = "128"> 
			<div><img src="k20.jpg"></div> 
			<h2>Xiaomi Redmi K20 6/128</h2> 
			<p>Inch:6.53'</p> 
			<p><img src="icons/rezolution.png" class="icon">Rezolution: 2340x1080</p> 
			<p>Processor:  MediaTek Helio G90T</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: IPS (LTPS LCD)</p> 
			<p><img src="camera.png" class="icon">Camera: 64mp + 8mp + 2mp</p> 
			<p>Front Camera: 13mp</p> 
			<p>Android: 9.0(Pie)</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
	</div> 
	<div class="container-third-column" data="Apple"  id="Apple"> 
		<div class="container-third-column-row" ram="3" rom = "64"> 
			<div><img src="iphx.jpg"></div> 
			<h2>Apple Iphone X 3/64</h2> 
			<p>Inch:5.8'</p> 
			<p><img src="rezolution.png" class="icon">Rezolution: 1242x2688</p> 
			<p>Processor:  Apple A11</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: Super Retina</p> 
			<p><img src="camera.png" class="icon">Camera: 12mp</p> 
			<p>Front Camera: 7mp</p> 
			<p>iOS 13.3</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
		<div class="container-third-column-row" ram="3" rom = "64"> 
			<div><img src="iphxs.jpg"></div> 
			<h2>Apple Iphone XS 3/64</h2> 
			<p>Inch:5.8'</p> 
			<p><img src="rezolution.png" class="icon">Rezolution: 1242x2688</p> 
			<p>Processor:  Apple A11</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: Super Retina</p> 
			<p><img src="camera.png" class="icon">Camera: 12mp</p> 
			<p>Front Camera: 7mp</p> 
			<p>iOS 13.3</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
		<div class="container-third-column-row" ram="3" rom = "64"> 
			<div><img src="iphxsmax.png"></div> 
			<h2>Apple Iphone XS Max 3/64</h2> 
			<p>Inch:6.5'</p> 
			<p><img src="rezolution.png" class="icon">Rezolution: 1242x2688</p> 
			<p>Processor:  Apple A12</p> 
			<p>Numbers of threads: 8</p> 
			<p>Display: Super Retina</p> 
			<p><img src="camera.png" class="icon">Camera: 12mp</p> 
			<p>Front Camera: 7mp</p> 
			<p>iOS 13.3</p> 
			<button><img src="cart.png" class="icon">Buy</button> 
		</div> 
	</div> 
 
</div> 
 
 
 
 
 
 
 
</div> 
 
 
 
 
 
 
<script type="text/javascript" src="slider.js"></script> 
</body> 
</html>

READ ALSO
vue Отфильтровать список по клику
javascript

vue Отфильтровать список по клику

Есть небольшой vue проект: codesandbox

 134
Как скачать изображения из множества ссылок и каждой дать свой название?
javascript

Как скачать изображения из множества ссылок и каждой дать свой название?

У меня большое количество ссылок с изображением, мне нужно их скачатьНо не просто скачать, а каждой дать название

 99
Как создать массив объектов из массивов
javascript

Как создать массив объектов из массивов

Подскажите, пожалуйста как создать массив из объектовВот пример

 86
Одно и тоже значение Math.random в переменной
javascript

Одно и тоже значение Math.random в переменной

Всем приветНачал изучать JavaScript и столкнулся с ошибкой в книге

 82