Solution Files
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 4 - Shopping List</title>
</head>
<body>
<h1>Exercise 4: Shopping List</h1>
<script src="script.js"></script>
</body>
</html>script.js
// Create shopping list array
const shoppingList = ['Apples', 'Bread', 'Milk', 'Eggs', 'Cheese'];
// Display items with index using for loop
document.write("<h2>Shopping List (with index numbers):</h2><ul>");
for (let i = 0; i < shoppingList.length; i++) {
document.write(`<li>${i + 1}. ${shoppingList[i]}</li>`);
}
document.write("</ul>");
// Display items with checkmark using forEach
document.write("<h2>Shopping List (with checkmarks):</h2><ul>");
shoppingList.forEach(function(item) {
document.write(`<li>✓ ${item}</li>`);
});
document.write("</ul>");
// Count items using while loop
let count = 0;
let index = 0;
while (index < shoppingList.length) {
count++;
index++;
}
document.write(`<p><strong>Total number of items: ${count}</strong></p>`);
// Filter items with more than 4 characters
const longItems = shoppingList.filter(item => {
return item.length > 4;
});
document.write("<h2>Items with more than 4 characters:</h2><ul>");
longItems.forEach(item => {
document.write(`<li>${item}</li>`);
});
document.write("</ul>");