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

// 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.

for(let i = 0; i< items.length; i++) {
    // Create div and add classes
    const item = document.createElement("div");
    item.classList.add("checklist-item", "checklist");

    // Create checkbox
    const checkbox = document.createElement("input")
    checkbox.type = "checkbox";
    checkbox.name = items[i];
    checkbox.id = items[i];
    
    // Create lable
    const label = document.createElement("label");
    label.htmlFor = "id";
    const labelText = document.createTextNode(items[i]);
    label.appendChild(labelText);

    // Add the div
    document.body.appendChild(item);
    item.appendChild(checkbox);
    item.appendChild(label);
}

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