<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="conteiner">
<div class="conteiner-filter">
<h4>Цена</h4>
<input class="range" type="range" min="1000" max="4000">
<p class="h1"></p>
<h4>Название компании</h4>
<p class="name"><input type="checkbox" class="input">ASUS</p>
<p class="name"><input type="checkbox" class="input">Lenovo</p>
<p class="name"><input type="checkbox" class="input">Dell</p>
<h4>Дата выхода</h4>
<p class="date"><input type="checkbox" class="input-date">2018</p>
<p class="date"><input type="checkbox" class="input-date">2019</p>
<p class="date"><input type="checkbox" class="input-date">2020</p>
</div>
<div class="divace">
<div class="laptop 0">
<img src="https://content2.onliner.by/catalog/device/header/fbcdeb5414695db4e8f988dc60dd517a.jpeg"
alt="">
<div class="laptop-xp">
<p class="laptop-name">Фирма: ASUS</p>
<p class="laptop-prise">Цена: 1750 руб.</p>
<p class="laptop-yeur 1">Год выхода: 2019</p>
</div>
</div>
<div class="laptop 0">
<img src="https://content2.onliner.by/catalog/device/header/fbcdeb5414695db4e8f988dc60dd517a.jpeg"
alt="">
<div class="laptop-xp">
<p class="laptop-name">Фирма: ASUS</p>
<p class="laptop-prise">Цена: 3000 руб.</p>
<p class="laptop-yeur 2">Год выхода: 2020</p>
</div>
</div>
<div class="laptop 1">
<img src="https://content2.onliner.by/catalog/device/header/ceb2db608e37ad41294857f140db8275.jpeg"
alt="">
<div class="laptop-xp">
<p class="laptop-name">Фирма: Lenovo</p>
<p class="laptop-prise">Цена: 1300 руб.</p>
<p class="laptop-yeur 1">Год выхода: 2019</p>
</div>
</div>
<div class="laptop 2">
<img src="https://content2.onliner.by/catalog/device/header/429274989c772c8a8fe46e92c58a550c.jpeg"
alt="">
<div class="laptop-xp">
<p class="laptop-name">Фирма: Dell</p>
<p class="laptop-prise">Цена: 1450 руб.</p>
<p class="laptop-yeur 0">Год выхода: 2018</p>
</div>
</div>
</div>
<div class="div-conteiner-form">
<div class="form">
<p class="p-url">URL Картинки: <textarea class="in-url"></textarea></p>
<p class="p-name">Фирма: <input type="text" class="in-name"></p>
<p class="p-prise">Цена: <input type="number" class="in-prise"></p>
<p class="p-yeur">Год выхода: <input type="number" class="in-yeur"></p>
<button class="btn">Вывести</button>
</div>
</div>
</div>
<button class="conteiner-form slaid">Добавить товар</button>
<script src="script.js"></script>
</body>
</html>body {
background-color: rgb(94, 94, 189);
}
.conteiner {
background-color: blanchedalmond;
width: 95%;
height:650px;
margin: auto;
}
.conteiner-filter {
background-color: rgb(247, 202, 136);
margin: 0px;
width: 200px;
height:650px;
}
.divace {
display: grid;
grid-template-columns: repeat(2, 620px);
padding-top: 50px;
grid-row-gap: 20px;
margin-left: 200px;
margin-top: -600px;
}
.laptop {
background-color: cornflowerblue;
width: 600px;
height: 120px;
}
img {
width: 170px;
height: 120px;
}
.form {
position: static;
background-color: blueviolet;
width: 277px;
margin-left: 200px;
}
.conteiner-form {
margin-left: 25px;
border: none;
}
.laptop-xp {
float: right;
margin-right: 300px;
}document.querySelector('.range').oninput = () => {
let a = document.querySelector('.range').value;
let laptopPrise = document.querySelectorAll('.laptop-prise');
let laptop = document.querySelectorAll('.laptop');
for (let i = 0; i < laptopPrise.length; i++) {
for (let i = 0; i < laptop.length; i++) {
if (laptopPrise[i].textContent > `Цена: ${a} руб.`) {
laptop[i].style.display = 'none';
} else {
laptop[i].style.display = 'block';
}
}
document.querySelector('.h1').innerHTML = a + " Руб.";
}
}
function fun1() {
for (let i = 0; i < 3; i++) {
document.getElementsByClassName("input")[i].addEventListener("change", function (evt) {
let targetCheked = evt.target.checked
let type = i;
changeSearchS(type, targetCheked)
});
let searchSettings = { 0: 0, 1: 0, 2: 0 };
function changeSearchS(type, targetCheked) {
if (targetCheked) { searchSettings[type] = 1; }
else { searchSettings[type] = 0; }
changeList()
}
let laptop = document.getElementsByClassName("laptop");
function changeList() {
for (let i = 0; i < laptop.length; i++) {
if (searchSettings[laptop[i].classList[1]]) {
laptop[i].style.display = '';
} else {
laptop[i].style.display = 'none';
}
}
}
}
}
fun1();
function fun2() {
for (let i = 0; i < 3; i++) {
document.getElementsByClassName("input-date")[i].addEventListener("change", function (evt) {
let targetCheked = evt.target.checked
let type = i;
changeSearchS(type, targetCheked)
});
}
let searchSettings = { 0: 0, 1: 0, 2: 0 };
function changeSearchS(type, targetCheked) {
if (targetCheked) { searchSettings[type] = 1; }
else { searchSettings[type] = 0; }
changeList()
}
let laptopYeur = document.getElementsByClassName("laptop-yeur");
function changeList() {
for (let i = 0; i < laptopYeur.length; i++) {
let laptop = document.getElementsByClassName("laptop");
for (let i = 0; i < laptop.length; i++) {
if (searchSettings[laptopYeur[i].classList[1]]) {
laptop[i].style.display = '';
} else {
laptop[i].style.display = 'none';
}
}
}
}
}
fun2();
let form = document.querySelector('.form');
form.style.display = "none";
let btnSlaid = document.querySelector('.slaid');
btnSlaid.onclick = () => {
if (form.style.display === "block") {
form.style.display = "none";
btnSlaid.textContent = 'Добавить товар';
} else {
form.style.display = "block";
btnSlaid.textContent = 'Убрать форму';
}
}
document.querySelector('.btn').onclick = () => {
const divace = document.querySelector('.divace');
let index, yeur;
let inName = document.querySelector('.in-name');
let inPrise = document.querySelector('.in-prise');
let inYeur = document.querySelector('.in-yeur');
let inURL = document.querySelector('.in-url');
if (inName.value === 'ASUS') {
index = 0;
} else if (inName.value === 'Lenovo') {
index = 1;
} else if (inName.value === 'Dell') {
index = 2;
}
if (inYeur.value === '2018') {
yeur = 0;
} else if (inYeur.value === '2019') {
yeur = 1;
} else if (inYeur.value === '2020') {
yeur = 2;
}
divace.insertAdjacentHTML('beforeend',
`<div class="laptop ${index}">
<img src='${inURL.value}' class="img">
<div class="laptop-xp">
<p class="laptop-name">Фирма: ${inName.value}</p>
<p class="laptop-prise">Цена: ${inPrise.value} руб.</p>
<p class="laptop-yeur ${yeur}">Год выхода: ${inYeur.value}</p>
</div>
</div>`)
inURL.value = '';
inName.value = '';
inPrise.value = '';
inYeur.value = '';
}
const checkedTexts = (el, selector) =>
Array.from(el.querySelectorAll(`${selector}:checked`), n => n.parentNode.innerText);
const propertyText = (el, selector) =>
el.querySelector(selector).innerText.split(': ')[1];
document.querySelector('.container-filter').addEventListener('input', function() {
const maxPrice = parseInt(this.querySelector('.range').value);
const brands = checkedTexts(this, '.input');
const years = checkedTexts(this, '.input-date');
document.querySelectorAll('.device .laptop').forEach(n => {
const price = parseInt(propertyText(n, '.laptop-price'));
const brand = propertyText(n, '.laptop-name');
const year = propertyText(n, '.laptop-year');
n.style.display = (
(maxPrice >= price) &&
(!brands.length || brands.includes(brand)) &&
(!years.length || years.includes(year))
)
? 'block'
: 'none';
});
});