Day 7 — Arrays — basics and iteration

Hands-on

Topic 1 —— Task 1 — reference solution —— 
// —— Task 1 — reference solution ——

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 2 Part 2 
const cart = ["bread", "milk", "eggs"];

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 3 Part 3 
cart.push("butter");
cart.unshift("rice");

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 4 Part 4 
const lines1 = [];

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 5 Part 5 
lines1.push('After push("butter") + unshift("rice"):');
lines1.push(JSON.stringify(cart));

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 6 Part 6 
const removed = cart.pop();

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 7 Part 7 
lines1.push("");
lines1.push("pop() removed → " + JSON.stringify(removed));
lines1.push("cart after pop → " + JSON.stringify(cart));

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 8 Part 8 
cart.splice(1, 1);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 9 Part 9 
lines1.push("");
lines1.push("After splice(1, 1) → " + JSON.stringify(cart));

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 10 Part 10 
document.querySelector("#task1Output").textContent =
    lines1.join("\n");

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 11 —— Task 2 — reference solution —— 
// —— Task 2 — reference solution ——

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 12 Part 12 
const scores = [88, 42, 75, 60, 91, 39, 55, 70];

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 13 Part 13 
const passing = scores.filter((s) => s >= 60);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 14 Part 14 
const firstFail = scores.find((s) => s < 60);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 15 Part 15 
const allPass = scores.every((s) => s >= 60);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 16 Part 16 
const anyAbove90 = scores.some((s) => s > 90);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 17 Part 17 
const lines2 = [];

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 18 Part 18 
lines2.push("filter (>= 60) → " + JSON.stringify(passing));
lines2.push("find (first failing) → " + firstFail);
lines2.push("every (all passing?) → " + allPass);
lines2.push("Bonus: some (> 90?) → " + anyAbove90);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 19 Part 19 
document.querySelector("#task2Output").textContent =
    lines2.join("\n");

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 20 —— Task 3 — reference solution —— 
// —— Task 3 — reference solution ——

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 21 Part 21 
const prices = [100, 250, 500, 1200, 80];

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 22 Part 22 
const withGst = prices.map((p) => {
    return (p * 1.18).toFixed(2);
});

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 23 Part 23 
const lines3 = [];

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 24 Part 24 
lines3.push("original prices → " + JSON.stringify(prices));
lines3.push("prices with GST → " + JSON.stringify(withGst));

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 25 Part 25 
document.querySelector("#task3Output").textContent =
    lines3.join("\n");

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 26 —— Bonus Task — reference solution —— 
// —— Bonus Task — reference solution ——

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 27 Part 27 
const expenses = [250, 800, 120, 50, 1500, 75];

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 28 Part 28 
const total = expenses.reduce((sum, value) => {
    return sum + value;
}, 0);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 29 Part 29 
const highest = expenses.reduce((max, value) => {

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 30 Part 30 
if (value > max) {
        return value;
    }

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 31 Part 31 
return max;

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 32 Part 32 
});

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 33 Part 33 
const above100 = expenses
    .filter((value) => value > 100)
    .reduce((sum, value) => {
        return sum + value;
    }, 0);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 34 Part 34 
const lines4 = [];

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 35 Part 35 
lines4.push("total expenses → " + total);
lines4.push("highest expense → " + highest);
lines4.push("expenses above 100 total → " + above100);

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 36 Part 36 
document.querySelector("#task4Output").textContent =
    lines4.join("\n");

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).