MDN Array Code - working

Ref link: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays#Active_learning_Printing_those_products!

by officialmansu

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="https://developer.mozilla.org/static/build/styles/samples.37902ba3b7fe.css" rel="stylesheet" type="text/css" />
    <title>Arrays - Playable_code - code sample</title>
</head>
<body>
    <h2>Live output</h2>
    <div class="output" style="min-height: 150px;">
        <ul>
        </ul>
        <p></p>
    </div>
</body>
</html>

CSS

html {
    font-family: sans-serif;
}

h2 {
    font-size: 16px;
}

.a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
}

body {
    margin: 10px;
    background-color: #f5f9fa;
}

JavaScript

var list = document.querySelector('.output ul');
var totalBox = document.querySelector('.output p');
var total = 0;
list.innerHTML = '';
totalBox.textContent = '';

var products = ['Underpants:6.99',
 'Socks:5.99',
 'T-shirt:14.99',
 'Trousers:31.99',
 'Shoes:23.99'];

for(var i = 0; i < products.length; i++) {
 var subArray = products[i].split(':');
 var name = subArray[0];
 var price = Number(subArray[1]);
 total += price;
 itemText = name + ' — $' + price;

 var listItem = document.createElement('li');
 listItem.textContent = itemText;
 list.appendChild(listItem);
}

totalBox.textContent = 'Total: $' + total.toFixed(2);