/* Task:
 - For each item in the items array, create a div with a class of "checklist-item", 
 which contains a checkbox input and corresponding label.
 - Make sure that the shopping list can render a checkbox for all the items, even if new 
 items are added to the items array.
 */

const items = ["Candles", "Decorations", "Chocolate"]
const checklist = document.getElementById("checklist")

function createList(listItem) {
    for (let i = 0; i < listItem.length; i++) {
        let checklistItem = document.createElement("div");
        checklistItem.classList.add("checklist-item");
        let checkbox = document.createElement("input");
        checkbox.type = 'checkbox';
        checkbox.id = 'checklist';
        checkbox.name = 'checklist';
        checkbox.value = 'item';
 
        let label = document.createElement('label');
        label.htmlFor = 'item';
        label.appendChild(document.createTextNode(listItem[i]));
        
        checklistItem.appendChild(checkbox);
        checklistItem.appendChild(label);
        checklist.appendChild(checklistItem);
    }
}


createList(items);

//this would look like:
// <div class="checklist-item">
//     <input type="checkbox" id="checklist" name="checklist" value="any-item">
//     <label for="checklist">every item added</label> 
// </div>


// Stretch goals:
// - Add an input which allows the user to add more items.
// - Add a delete button for the items.