exercicio 01 MDN array

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="output">
        <ul></ul>
        <p></p>
    </div>
    <script>
        var list = document.querySelector('.output ul');
        var totalBox = document.querySelector('.output p');
        var total = 0;
        list.innerHTML='';
        //totalBox.textContent = '';
        var produtcs = ['Underpants:6.99',
                        'Socks:5.99',
                        'T-shirt:14.99',
                        'Trousers:31.99',
                        'Shoes:23.99']
        for(var i = 0; i < produtcs.length; i++){
            var p = produtcs[i];
            var array = p.split(":");
            var name = array[0];
            var prince = Number(array[1]);
            total += prince;
            //console.log(prince);
            var listItem = document.createElement('li');
            listItem.textContent=name+" $"+prince;
            list.appendChild(listItem);
        }
        totalBox.textContent="Total: "+total.toFixed(2);
    </script>
</body>
</html>