'use strict';
let productListArray=[
{'productName':'product_0', 'productId':'prdctID_0'},
{'productName':'product_1', 'productId':'prdctID_1'},
{'productName':'product_2', 'productId':'prdctID_2'}];
let productListHTML=document.getElementById('product-list');
let inputBox=document.getElementById('input-box');
let productDelAddIcons=document.getElementById('del-add');
for(let product of productListArray){
let productHTML=`
<div class="product" id="${product.productId}">
<div class="check-h1">
<input type="checkbox" name="" id="">
<h1>${product.productName}</h1>
</div>
<div id="del-add">
<i class="fa-solid fa-trash" onclick="deleteProduct('${product.productId}')"></i>
<i class="fa-solid fa-pen-to-square"></i>
</div>
</div>
`;
productListHTML.insertAdjacentHTML('beforeend', productHTML);
};
inputBox.children[1].addEventListener('click', function(){
let prdctId;
let lastProd=productListArray.at(-1);
if (lastProd) {
let [str,num]=lastProd.productId.split("_");
prdctId=str+"_"+(Number(num) + 1);
} else {
prdctId="prdctID_0"
}
let product=`
<div class="product" id="${prdctId}">
<div class="check-h1">
<input type="checkbox" name="" id="">
<h1>${inputBox.children[0].value}</h1>
</div>
<div id="del-add">
<i class="fa-solid fa-trash" onclick="deleteProduct('${prdctId}')"></i>
<i class="fa-solid fa-pen-to-square"></i>
</div>
</div>
`;
productListArray.push({productName: inputBox.children[0].value, productId:prdctId});
productListHTML.insertAdjacentHTML('beforeend', product);
});
function deleteProduct(id){
productListArray=productListArray.filter((product) => product.productId!==id);
const productEl=document.getElementById(id);
productEl.parentElement.removeChild(productEl);
};
