function roll(min, max, floatFlag) {
    let r = Math.random() * (max - min) + min
    return floatFlag ? r : Math.floor(r)
}

let possibleProducts = ["🍇", "🍈", "🍉", "🍊", "🍋", "🍌", "🍍", "🥭", "🍎", "🍏", "🍐", "🍑", "🍒", "🍓", "🥝", "🍅", "🥥", "🥑", "🍆", "🥔", "🥕", "🌽", "🌶", "🥒", "🥬", "🥦"]

let products = [...Array(5)].map((_, i) => {
    return {
        index: i,
        title: possibleProducts[roll(0, possibleProducts.length)],
        price: roll(2, 10, 1).toFixed(2),
        count: roll(1, 6)
    }
})

// Calculate the Cart Total using .reduce


// roll() for a random Tax Rate between 5% and 9%
// rounding to the nearest 10th


// Apply that Tax Rate to the Cart Total 




let cart = document.getElementById("Products")
let cartHtml = ''
products.forEach(product => {
    cartHtml += `<div class="product">
        <div>${product.title}</div>
        <div>💲${product.price}</div>
        <div>x${product.count}</div>
    </div>`
})
cart.innerHTML = cartHtml

let summary = document.getElementById("Summary")
let summaryHtml = ''
// summaryHtml += `<div>Total: 💲${cartTotal.toFixed(2)}</div>`
// summaryHtml += `<div>Tax Rate: ${taxRate}%</div>`
// summaryHtml += `<div>Taxed Total: 💲${taxedTotal}</div>`
summary.innerHTML = summaryHtml