const box = document.querySelectorAll('.box');
const box = [...document.querySelectorAll('.box') ];
Application.whenUserAdd( item => box.push(item))
document.querySelector('nav').addEventListener('click', event => {
let box = document.querySelectorAll('.box');
let read = document.querySelector('.read');
let inMenu = document.querySelector('.in-menu');
let teg = document.querySelector('.teg');
let content = document.querySelector('.block-cover')
read.onclick = () => {
if (teg.value === 'alizarin') {
content.insertAdjacentHTML('beforeend',
`<div class="col-auto box alizarin">
<div>${inMenu.value}</div>
<div> Тег: ${teg.value}</div>
</div>`)
updateListener();
} else if (teg.value === 'sunflower') {
content.insertAdjacentHTML('beforeend',
`<div class="col-auto box sunflower">
<div>${inMenu.value}</div>
<div> Тег: ${teg.value}</div>
</div>`)
updateListener();
} else if (teg.value === 'emerland') {
content.insertAdjacentHTML('beforeend',
`<div class="col-auto box emerland">
<div>${inMenu.value}</div>
<div> Тег: ${teg.value}</div>
</div>`)
updateListener();
}
else if (teg.value === 'wisteria') {
content.insertAdjacentHTML('beforeend',
`<div class="col-auto box wisteria">
<div>${inMenu.value}</div>
<div> Тег: ${teg.value}</div>
</div>`)
updateListener();
} else {
alert('error');
}
}
let box = document.querySelectorAll('.box');
function updateListener() {
box = document.querySelectorAll('.box');
document.querySelector('nav').addEventListener('click', event => {
console.log(box.length);
if (event.target.tagName !== 'LI') return false;
let filter = event.target.dataset['f'];
box.forEach(elem => {
elem.classList.remove('hide');
if (!elem.classList.contains(filter) && filter !== 'all') {
elem.classList.add('hide');
}
})
})
};
updateListener();