const recycleBtn = document.getElementById("recycle-btn");
const deleteBtn = document.getElementById("delete-btn");
const binLimitEle = document.getElementById("bin-limit");
recycleBtn.addEventListener("click", recycle);
const recycleSelect = document.getElementById("recycle-select");
const recycleBin = document.getElementById("recycle-bin");
const infoParagraph = document.getElementById("info-paragraph");

deleteBtn.addEventListener('click', emptyStore);

let store = [];
function recycle(){
    binLimitEle.value = binLimitEle.value+1;
    if(store.length < 5) 
        store.push(recycleSelect.value);
    else {
        infoParagraph.textContent = `Please empty the store!!`;
        infoParagraph.style.color = "red";
        deleteBtn.style.display = "inline-block";
    }
        
    display(store);
    // console.log(store)
    
}
function display(store) {
    recycleBin.textContent = "";
    store.forEach(ele => recycleBin.textContent += `${ele}`);
    // for(let i=0; i<store.length; i++)
    //     recycleBin.textContent += `${store[i]} `
}
 
function emptyStore() {
    store.length = 0;
    display(store);
    infoParagraph.textContent = `Recycled items will appear above ⬆️`;
    infoParagraph.style.color = "white";
    binLimitEle.value = 0;
    deleteBtn.style.display = "none"
}


// Task: Wire up the <select> tag and recycle button so that an emoji of the selected item appears in the DOM each time the recycle button is pressed.

// stretch goal 1️⃣ Add an item limit to indicate when the recycle bin is full

// stretch goal 2️⃣: Add the option to empty the bin.

// stretch goal 3️⃣: Animate adding the items to the bin.