JavaScript
Exercises

Declare variables to describe yourself. Use const for things that will not change, and let for things that might.

• Your name (const)
• Your age (let — it will change next year)
• Your city (const)
• Whether you are currently studying (let)
• Log all four values to the console with a descriptive label for each

Prove to yourself that const prevents reassignment.

• Declare const schoolName = 'AngelCode Labs'
• Try to reassign it: schoolName = 'Other School'
• Wrap the reassignment in a try/catch block and log the error message
• Then declare a let variable and successfully reassign it

Rewrite these poorly named variables with clear, descriptive camelCase names:

• let x = 'Accra' → should describe a city
• let n = 25 → should describe someone's age
• let f = true → should describe whether a form was submitted
• let d = new Date() → should describe the current date
• Log each with its new name. No single-letter variables allowed.

Build a simple receipt calculator using variables.

• Declare const variables: itemName (string), unitPrice (number), quantity (number)
• Calculate and store: subtotal, tax (15% of subtotal), total
• Log a formatted receipt: Item, Quantity, Subtotal, Tax, Total

Swap the values of two variables — first the old way (using a temporary variable), then the modern way.

• Declare let a = 'first' and let b = 'second'
• Method 1: Use a third variable temp to swap them. Log the result.
• Reset them back to original values
• Method 2: Swap using destructuring in one line: [a, b] = [b, a]. Log the result.

Simulate a vote counter for three candidates.

• Declare let variables for three candidates, each starting at 0
• Simulate 10 votes by incrementing the variables (use ++ and +=)
• Calculate the total votes and the winner
• Log: each candidate's vote count, total votes, and the winner's name

Understand how block scope works with let and const.

• Declare const city = 'Accra' outside any block
• Inside an if (true) { } block, declare let region = 'Greater Accra'
• Log city from inside the block — it works
• Log region from inside the block — it works
• Try to log region from outside the block — wrap in try/catch and log the error

Build a complete student profile using only variables — no objects or arrays yet.

• Declare variables for: full name, student ID, programme, year (1–4), GPA, whether they are on scholarship, and their expected graduation year
• Calculate: yearsRemaining (4 minus current year), isHonours (GPA above 3.5)
• Build and log a full profile card string using string concatenation
• Then log whether the student qualifies for honours and how many years remain

Use typeof to check the type of every value listed below and log the result.

• 'Hello', 42, true, undefined, null, {}, [], function(){}
• Before running, write your prediction as a comment next to each
• Pay special attention to null and [] — they are surprises

A user types their age into a form. It arrives as a string. Show the problem and fix it.

• Declare const userInput = '25'
• Try adding 5 to it: userInput + 5 — log the result and explain why
• Convert it to a number using Number(), then add 5 — log the correct result
• Also show what happens with Number('hello') and how to check for that

Test each value and log whether it is truthy or falsy using an if statement.

• Values to test: 0, 1, '', 'hello', null, undefined, false, true, NaN, [], {}
• For each: log [value] is truthy or [value] is falsy
• [] and {} will surprise you

Demonstrate the difference between undefined and null in a real scenario.

• Declare let selectedProduct without a value — log it (undefined: nothing chosen yet)
• Set it to null — log it (null: user deliberately cleared their selection)
• Show undefined == null (true) vs undefined === null (false) and explain why
• Write a function hasValue(x) that returns true only if x is neither null nor undefined

Write a function safeNumber(input) that converts any input to a number safely.

• If the conversion produces NaN, return 0 as a default
• If input is already a number, return it unchanged
• If input is null or undefined, return 0
• Test it with: '42', 'hello', null, undefined, true, '', '3.14'

Format prices correctly for display on a Ghana e-commerce site.

• Write formatPrice(amount) that takes a number and returns a string like ₵45.00
• Use .toFixed(2) for the decimal formatting
• Handle non-number inputs gracefully (return '₵0.00')
• Test with: 45, 45.5, 45.999, 'hello', null

Write a set of type-checking utility functions used in real applications.

• isString(x) — returns true only for real strings
• isNumber(x) — returns true only for real numbers (not NaN)
• isBoolean(x) — returns true only for booleans
• isArray(x) — returns true only for arrays (not objects)
• Test each with at least 3 different inputs including edge cases

Build a function that validates a registration form submission.

• Write validateForm(data) where data is an object: { name, age, email, agreeToTerms }
• Validate: name is a non-empty string, age is a number between 16 and 120, email is a string containing '@', agreeToTerms is exactly true (boolean)
• Return an object: { valid: true/false, errors: [] }
• Test with both valid and invalid data

Calculate the following and log each result with a description.

• 17 divided by 5 — what is the whole number result? (use Math.floor)
• 17 divided by 5 — what is the remainder? (use modulo %)
• 2 to the power of 8 (use exponentiation **)
• Increment a variable from 10 to 15 using +=
• Check if 97 is an odd number using modulo

Demonstrate why == is dangerous and === is safe.

• Test and log: 0 == false, 0 === false
• Test and log: '' == false, '' === false
• Test and log: null == undefined, null === undefined
• Test and log: '5' == 5, '5' === 5
• Write a comment next to each explaining why the results differ

Model a cinema ticket pricing system using logical operators.

• Variables: isStudent, isWeekend, isMember, age
• Full price (₵50) if none of the above apply
• Student discount (₵30) if isStudent AND age is under 25
• Weekend surcharge: add ₵10 if isWeekend is true
• Member discount: subtract ₵5 if isMember is true
• Children under 12 are free regardless of other conditions

Use the nullish coalescing operator ?? to provide safe defaults.

• Write a function getDisplayName(user) that returns user.name ?? 'Guest'
• Show why ?? is better than || when the value could legitimately be 0 or ''
• Demo: const score = 0; const display = score || 'No score' — what is the problem?
• Fix it: const display = score ?? 'No score' — what is the result now?

Use optional chaining ?. to safely access deeply nested data.

• Create an object: const order = { customer: { name: 'Kwame', address: { city: 'Kumasi' } } }
• Access order.customer.address.city safely using ?.
• Try to access order.customer.phone.number without ?. — catch the error
• Then access it with ?. — it returns undefined instead of crashing
• Combine with ?? to provide a fallback: order.customer?.phone?.number ?? 'No phone'

Write a grade classifier using the ternary operator.

• Write a function classify(score) using a ternary chain
• 90+ → 'A', 80–89 → 'B', 70–79 → 'C', 60–69 → 'D', below 60 → 'F'
• Test with: 95, 83, 72, 65, 45
• Then rewrite the same logic using if/else and compare readability

Use short-circuit evaluation for common patterns seen in real code.

• Default: const greeting = userName || 'Guest' — log when userName is '' vs 'Ama'
• Guard: isLoggedIn && showDashboard() — call the function only when logged in
• Nullish assignment: config.timeout ??= 3000 — only set if currently null/undefined
• Conditional assignment: user.role &&= user.role.toUpperCase()

Build a full shopping cart price engine using operators.

• Variables: subtotal, isMember, couponCode, isWeekend
• Member discount: 10% off if isMember
• Coupon: if couponCode === 'SAVE20' apply an additional 20% off the discounted price
• Weekend surcharge: add 5% if isWeekend
• Free shipping if total after all discounts is above ₵200, otherwise add ₵15
• Log the full breakdown: subtotal, discount, coupon saving, surcharge, shipping, final total

Write an age verification function for a website.

• Write checkAccess(age)
• Under 13: 'No access — children not permitted'
• 13–17: 'Limited access — parental guidance required'
• 18–64: 'Full access'
• 65 and over: 'Senior access — larger text mode enabled'
• Test all four ranges

Use a switch statement to describe each day.

• Write describeDay(day) where day is 1–7 (1 = Monday)
• Monday–Friday: 'Weekday: [day name]'
• Saturday: 'Weekend: Saturday — rest day'
• Sunday: 'Weekend: Sunday — church day'
• Any other number: 'Invalid day'
• Monday, Tuesday, and Wednesday should fall through to a shared 'Early week' note

Use a for loop to log numbers with labels.

• Loop from 1 to 100
• If the number is divisible by both 3 and 5: log 'FizzBuzz'
• If divisible by 3 only: log 'Fizz'
• If divisible by 5 only: log 'Buzz'
• Otherwise: log the number
• This is a classic programming interview question

Generate a multiplication table using nested loops.

• Use two nested for loops — outer for rows (1–10), inner for columns (1–10)
• Build each row as a string of formatted results, e.g. 3 × 4 = 12
• Log each complete row as one string
• Add a header row: — Multiplication Table —

Write a password strength checker using control flow.

• Write checkPassword(pw)
• At least 8 characters: +1 point
• Contains a number: +1 point
• Contains an uppercase letter: +1 point
• Contains a special character (!@#$%): +1 point
• Score 0–1: 'Weak', 2–3: 'Medium', 4: 'Strong'
• Return an object: { strength, score, feedback }

Simulate an ATM withdrawal system using a while loop.

• Start with a balance of ₵500
• Use a while loop to process an array of withdrawal amounts: [100, 200, 150, 300, 50]
• Each iteration: check if balance is sufficient. If yes, deduct and log the transaction. If no, log 'Insufficient funds' and stop the loop with break
• After the loop, log the final balance

Draw a number pyramid using nested loops and string building.

• For a pyramid of height 5, output should look like:

    1
   1 2
  1 2 3
 1 2 3 4
1 2 3 4 5

• Use a for loop for rows, a nested loop to build the number sequence, and string padding for alignment
• Make height configurable — test with height 3 and height 7

Process an array of student objects and generate a full class report.

const students = [
  { name: 'Ama',   scores: [78, 82, 91] },
  { name: 'Kofi',  scores: [55, 60, 48] },
  { name: 'Abena', scores: [90, 95, 88] },
  { name: 'Kwame', scores: [70, 65, 72] },
];

• For each student: calculate average score and assign a letter grade
• Log each student's name, average, grade, and pass/fail status (pass = average 60+)
• After all students, log: class average, highest scorer, lowest scorer, number of passes and failures
• Use a for...of loop, continue to skip failed students in the honours count

Write four basic functions — two as declarations and two as arrow functions.

• function square(n) — returns n × n
• function isEven(n) — returns true if n is even
• const cube = (n) => — returns n × n × n
• const greet = (name) => — returns 'Hello, [name]!'
• Call each function with two different inputs and log the results

Write functions that use default parameters so they work even when arguments are missing.

• createProduct(name, price = 0, currency = 'GHS') — returns a formatted string
• sendEmail(to, subject = 'No Subject', body = '') — logs a simulated email
• repeat(str, times = 1) — returns the string repeated that many times
• Test each function with and without the optional arguments

Practice using return values by chaining function calls.

• Write celsiusToFahrenheit(c) — formula: (c × 9/5) + 32
• Write fahrenheitToCelsius(f) — formula: (f − 32) × 5/9
• Write roundTo2(n) — rounds to 2 decimal places
• Chain them: convert 100°C to Fahrenheit, back to Celsius, round to 2 decimal places. Should return exactly 100.

Build a small maths utility library of arrow functions.

• add(a, b), subtract(a, b), multiply(a, b), divide(a, b)
• divide should return 'Cannot divide by zero' if b is 0
• average(...nums) — uses rest parameters to accept any number of values
• clamp(value, min, max) — returns value clamped between min and max

Practice passing functions as arguments — the foundation of callbacks.

• Write applyTwice(fn, value) — applies fn to value, then applies fn to the result
• Write transform(numbers, fn) — applies fn to every item in an array and returns a new array
• Test with: applyTwice(x => x * 2, 3) → should give 12
• Test with: transform([1,2,3,4], x => x * x) → should give [1,4,9,16]

Use closures to create private state — a fundamental pattern in JavaScript.

• Write makeCounter(start = 0, step = 1)
• Returns an object with: increment(), decrement(), reset(), value()
• The count variable must be private — not accessible from outside
• Create two independent counters and show they do not share state

Write a pipeline of small functions that clean user input — one function per job.

• trim(str) — removes leading and trailing whitespace
• lowercase(str) — converts to lowercase
• removeSpaces(str) — replaces all spaces with hyphens
• limitLength(str, max = 50) — truncates to max characters
• Write sanitiseSlug(input) that chains all four in order

Build a flexible discount engine using functions that return functions.

• Write makeDiscount(rate) — returns a function that applies that discount rate to any price
• Write makeFloorDiscount(rate, floor) — discount only applies if price is above the floor
• Write composeDiscounts(...discountFns) — applies all discounts in sequence
• Create: 10% member discount, 5% loyalty discount, compose them and apply to ₵400

Create and manipulate a shopping list array.

• Create an array of 5 items
• Add two items using push (end) and unshift (beginning)
• Remove the last item with pop and store it in a variable
• Log the array length before and after each operation
• Access the third item using its index

Use map to transform an array of product prices.

const prices = [45, 120, 30, 89, 210];

• Create withTax — all prices with 15% tax added
• Create discounted — all prices with 10% removed
• Create labels — each price formatted as '₵45.00'
• The original prices array must remain unchanged

Filter a student list based on different criteria.

const students = [
  { name: 'Ama',   score: 78, passed: true  },
  { name: 'Kofi',  score: 45, passed: false },
  { name: 'Abena', score: 92, passed: true  },
  { name: 'Yaw',   score: 55, passed: false },
  { name: 'Efua',  score: 88, passed: true  },
];

• Filter: students who passed
• Filter: students who scored above 80
• Filter: students whose name starts with 'A'

Use reduce to summarise an array of transactions.

const transactions = [
  { type: 'credit', amount: 500 },
  { type: 'debit',  amount: 120 },
  { type: 'credit', amount: 350 },
  { type: 'debit',  amount: 80  },
  { type: 'debit',  amount: 200 },
];

• Calculate total credits, total debits, and net balance using reduce
• Find the single largest transaction using reduce

Practice the search methods on a product array.

const products = [
  { id: 1, name: 'Kente',   price: 85,  stock: 12 },
  { id: 2, name: 'Batik',    price: 60,  stock: 0  },
  { id: 3, name: 'Adinkra', price: 120, stock: 5  },
  { id: 4, name: 'Smock',   price: 200, stock: 3  },
];

• Find the product with id 3 using find
• Check if any product is out of stock using some
• Check if all products have a price above 50 using every
• Find the index of 'Smock' using findIndex

Sort and paginate an array of products.

• Sort the products array by price ascending (cheapest first)
• Sort by price descending (most expensive first)
• Sort alphabetically by name
• Get the top 2 most expensive items using sort + slice
• Important: sort creates a copy first using spread to avoid mutating the original

Process nested and duplicate data.

const tags = [
  ['html', 'css', 'beginner'],
  ['css', 'flexbox', 'intermediate'],
  ['javascript', 'beginner', 'dom'],
];

• Flatten all tags into a single array using flat()
• Remove duplicates using Set
• Sort the unique tags alphabetically
• Count how many times 'beginner' appears in the original nested array

Process a full product inventory using only array methods — no for loops.

const inventory = [
  { name: 'Kente',   category: 'fabric',  price: 85,  qty: 12 },
  { name: 'Batik',    category: 'fabric',  price: 60,  qty: 0  },
  { name: 'Sandals',  category: 'footwear',price: 150, qty: 8  },
  { name: 'Basket',   category: 'craft',   price: 45,  qty: 20 },
  { name: 'Adinkra', category: 'fabric',  price: 120, qty: 5  },
];

• Total stock value (price × qty for each, summed)
• All out-of-stock items (qty === 0)
• Fabric items only, sorted by price descending
• Group by category using reduce into an object: { fabric: [...], footwear: [...], craft: [...] }
• Most expensive in-stock item

Create a user profile object and access its properties.

• Create an object with: firstName, lastName, age, email, isActive
• Add a method fullName() that returns the first and last name combined
• Add a method greet() that returns 'Hello, I am [fullName] and I am [age] years old.'
• Access email using dot notation and also bracket notation

Practice modifying objects by adding, updating, and deleting properties.

• Start with a product object: { name: 'Kente', price: 85, category: 'fabric' }
• Add a new property stock: 10
• Update the price to 95
• Delete the category property
• Log the object after each change to see it evolve
• Check if category still exists using the in operator

Use spread syntax to copy and merge objects without mutating originals.

• Create defaultSettings = { theme: 'dark', fontSize: 14, language: 'en' }
• Create userSettings = { theme: 'light', fontSize: 18 }
• Merge them with spread: user settings should override defaults
• Prove the original objects are unchanged after merging
• Create an updated copy of a user object with only the email changed

Practice object destructuring — extracting values cleanly.

const order = {
  id: 1042,
  customer: { name: 'Kwame', city: 'Kumasi' },
  items: ['Kente', 'Adinkra'],
  total: 205,
  paid: true,
};

• Destructure: id, total, and paid in one line
• Destructure customer.name with a rename: { customer: { name: customerName } }
• Destructure with a default: add notes = 'None' (it does not exist in the object)
• Use destructuring in a function parameter: write formatOrder({ id, total, customer })

Use the Object static methods to iterate and transform an object.

const scores = {
  Ama: 78, Kofi: 92, Abena: 65, Yaw: 88
};

• Log all student names using Object.keys()
• Calculate the class average using Object.values() and reduce
• Find the top scorer using Object.entries() and reduce
• Create a new object with scores doubled using Object.fromEntries + map

Work with deeply nested object data — the kind you get from a server.

const school = {
  name: 'AngelCode Academy',
  location: { city: 'Accra', region: 'Greater Accra' },
  departments: {
    tech: { head: 'Mr Asante', students: 120 },
    arts: { head: 'Ms Agyeman', students: 85  },
  },
};

• Access: city, tech department head, total students across all departments
• Add a new department: science: { head: 'Dr Boateng', students: 60 }
• Update the tech student count to 135
• Calculate the new total students

Process an array of order objects — the most common real-world pattern.

const orders = [
  { id: 1, customer: 'Ama',   amount: 120, status: 'paid'    },
  { id: 2, customer: 'Kofi',  amount: 85,  status: 'pending' },
  { id: 3, customer: 'Abena', amount: 200, status: 'paid'    },
  { id: 4, customer: 'Yaw',   amount: 55,  status: 'cancelled'},
];

• Get all paid order amounts using filter + map
• Total revenue from paid orders using reduce
• Transform each order: add a formattedAmount property (e.g. '₵120.00')
• Find the order belonging to 'Abena'

Build a configuration system that merges settings at multiple levels.

• Declare three objects: defaults, envConfig (production overrides), userConfig (user preferences)
• Each has properties like: theme, language, notifications, timeout, debug
• Merge in order: defaults, then env overrides, then user preferences (each layer wins over the previous)
• Write getConfig(key) that reads from the merged config with a fallback
• Freeze the final config so it cannot be accidentally modified

Practice selecting elements and reading their content.

• Create an HTML page with: an <h1 id="title">, three <p class="paragraph">, and a <button>
• Select the h1 by ID and log its textContent
• Select all paragraphs and log how many there are
• Select the button using querySelector and log its tag name

Use JavaScript to change what is displayed on the page.

• Select an <h1> and change its text to 'Updated by JavaScript'
• Select a <p> and change its colour to #f0c040 using style.color
• Select an <img> and change its src attribute using setAttribute
• Select an input and change its placeholder attribute

Practice managing CSS classes from JavaScript.

• Create a <div id="box"> and CSS classes: .active (green border), .hidden (display none), .highlighted (yellow background)
• Add active class and check it is there with contains
• Remove active, add highlighted
• Toggle hidden twice — confirm box shows, then hides
• Replace highlighted with active using replace

Build HTML dynamically using createElement.

• Create a <ul id="list"> in the HTML
• Write JavaScript that creates and appends 5 <li> elements, each with different text
• Each <li> should have a class of list-item
• Add a Remove Last button that removes the last <li> when clicked

Build a working dark mode toggle using DOM and classList.

• Create a page with light background, dark text, and a Toggle Dark Mode button
• Define CSS classes: .dark on <body> switches to dark background and light text
• Write JavaScript that toggles the dark class on body when the button is clicked
• Update the button text: 'Switch to Dark' / 'Switch to Light'
• Save the preference in localStorage and apply it on page load

Render an array of product objects as HTML cards on the page.

const products = [
  { name: 'Kente Fabric',  price: 85,  inStock: true  },
  { name: 'Leather Sandals',price: 150, inStock: false },
  { name: 'Woven Basket',   price: 45,  inStock: true  },
];

• For each product, create a <div class="card"> with: name, price (formatted), and a badge that says In Stock or Out of Stock'
• Use createElement — no innerHTML
• Out of stock cards get a greyed-out style

Navigate the DOM tree using traversal properties.

• Create an HTML list with a parent <ul> and 5 <li> children
• Select the third <li> directly using querySelector
• From that element, access: its parent, its previous sibling, its next sibling
• From the parent, access the first and last child
• Use closest('.container') to find the nearest ancestor with that class

Build a fully dynamic data table from a JavaScript array.

const data = [
  { name: 'Ama',   score: 78, grade: 'B' },
  { name: 'Kofi',  score: 45, grade: 'F' },
  { name: 'Abena', score: 91, grade: 'A' },
];

• Generate <thead> from the object keys of the first item
• Generate <tbody> rows from each data item
• Failing rows (grade F) get a red background
• Add a footer row showing the class average score
• Add a Sort by Score button that re-renders the table sorted

Build a simple click counter with increment and reset buttons.

• HTML: a display <span id="count">0</span>, a +1 button, and a Reset button
• Clicking +1 increments the displayed number
• Clicking Reset sets it back to 0
• When count reaches 10, change the colour to red and disable the +1 button

Show a live preview of what the user types.

• HTML: a text input and a preview <p> below it
• As the user types, the paragraph updates in real-time using the input event
• Show the character count next to the preview: 23 / 100
• When the count exceeds 80, turn the counter red as a warning
• Pressing Escape clears the input and resets the preview

Handle a form submission and validate the inputs before accepting them.

• Form with: name (required, min 2 chars), email (must contain @), and password (min 6 chars)
• On submit: call e.preventDefault() to stop the page reload
• Validate all three fields. Show red error messages below failing fields
• On success: clear the form and show a green success message

Track the mouse position and update the UI in real-time.

• Display live X/Y coordinates as the mouse moves over a box
• Use the mousemove event and read e.clientX and e.clientY
• Move a small dot element to follow the cursor inside the box
• Change the box background colour based on the X position (0 = left colour, max = right colour)

Use event delegation to handle clicks on a list — even on items added later.

• Create a <ul> with 3 <li> items, each with a data-id attribute
• Attach ONE click listener to the <ul> — not to individual <li> items
• Use e.target.closest('li') to identify which item was clicked
• Add a Add Item button that adds a new <li> — clicking the new item must also work
• Log the data-id of the clicked item

Implement keyboard shortcuts for a simple text editor area.

• A <textarea> that responds to key combinations
• Ctrl+B — wraps selected text in **bold**
• Ctrl+I — wraps selected text in _italic_
• Ctrl+K — wraps selected text in [link text](url)
• Use e.ctrlKey and e.key and always call e.preventDefault()
• Show a hint bar below listing the available shortcuts

Build a simple image gallery with keyboard and click navigation.

• Display 5 thumbnail images in a row
• Clicking a thumbnail shows it full-size in a lightbox overlay
• The lightbox has Previous and Next buttons
• Left/right arrow keys also navigate
• Pressing Escape or clicking outside the image closes the lightbox

Build a drag-and-drop list using the HTML Drag and Drop API.

• Create a list of 5 items, each with draggable="true"
• Wire up: dragstart, dragover, drop events
• Store the dragged item's index in event.dataTransfer.setData
• On drop: reorder the actual array and re-render the list
• Visual feedback: highlight the drop target while dragging over it

Rewrite these messy string concatenations using template literals.

• 'Hello ' + name + ', you have ' + count + ' messages.'
• '₵' + (price * qty).toFixed(2) + ' total'
• A multi-line address block using the old \n way, then rewrite with a proper multi-line template literal
• Embed an expression: show score as a percentage with a pass/fail indicator in one template literal

A user has submitted messy form data. Clean it up.

const rawName  = '  ama mensah  ';
const rawEmail = '  AMA@EXAMPLE.COM  ';
const rawPhone = '  +233 (0) 24-123-4567  ';

• Clean name: trim, then capitalise each word (Ama Mensah)
• Clean email: trim and lowercase
• Clean phone: remove all spaces, brackets, and dashes

Practice finding and replacing content in strings.

• Write censorWord(text, word) that replaces all occurrences of word with asterisks the same length
• Write highlightQuery(text, query) that wraps every occurrence of query in <mark>...</mark>
• Write slugify(title) that converts a blog title to a URL slug: lowercase, spaces to hyphens, remove special chars

Parse structured text data using split.

• Parse this CSV line into an object: 'Ama Mensah,22,Accra,student'
• Parse a full name into first/last: 'Kwame Asante Boateng' → first: 'Kwame', last: 'Boateng', middle: 'Asante'
• Parse a time string '14:35:22' into hours, minutes, seconds
• Join an array of words back into a sentence with proper capitalisation

Build a formatted receipt string from an order object.

const order = {
  id: 'ORD-2026-1042',
  items: [
    { name: 'Kente Fabric',  qty: 2, price: 85  },
    { name: 'Woven Basket',   qty: 1, price: 45  },
  ],
  customer: 'Ama Mensah',
};

• Build a receipt string with: header line, item lines (name, qty, line total), subtotal, 15% tax, and grand total
• Align values using padStart / padEnd so columns are neat
• Use template literals throughout

Write string utilities for displaying content in constrained spaces.

• truncate(str, maxLength = 50) — cuts at maxLength and adds ...
• truncateWords(str, wordCount = 10) — cuts at a word boundary, not mid-word
• excerpt(str, query) — finds the query in the string and returns the surrounding context (50 chars before and after)

Build number formatting utilities for a financial dashboard.

• formatCurrency(amount, currency = 'GHS') → 'GHS 1,250.00'
• formatCompact(n) → 1.2K, 2.5M, 1.1B
• formatPercent(value, total) → '45.3%'
• addCommas(n) → '1,250,000' (manual implementation, no Intl)

Build an SMS message system for a school notification platform.

• Write buildSMS(template, data) — takes a template string with {placeholders} and an object, returns the filled message
• Templates: result notification, fee reminder, event invitation
• SMS limit: 160 chars per message. If longer, split into multiple parts and label them (1/2), (2/2)
• Strip HTML tags from any template content before sending

Fetch data from a public API and display it on the page.

• Fetch a single post from: https://jsonplaceholder.typicode.com/posts/1
• Use async/await inside an async function
• Log the response object, then log the parsed JSON
• Display the post title and body on the page in an <article> element

Show a loading state while data is being fetched.

• Create a spinner element and a container for content
• Before the fetch: show the spinner, hide the content
• After the fetch: hide the spinner, show the content
• Use a finally block to always hide the spinner, even on error
• Fetch 10 posts from /posts?_limit=10 and render them as a list

Handle errors gracefully — network failures and HTTP error codes.

• Fetch from a URL that returns 404: /posts/99999
• Check response.ok and throw a custom error if false
• Catch network errors separately from HTTP errors
• Display a user-friendly error message on the page — not in the console
• Add a Retry button that attempts the fetch again

Fetch multiple resources simultaneously using Promise.all.

• Fetch user #1 and their posts at the same time (parallel, not sequential)
• Show how sequential await is slower than Promise.all
• Use console.time and console.timeEnd to compare both approaches
• Render: user name, user email, and their 10 most recent post titles

Send data to a server using a POST request.

• Build a form with: title and body fields
• On submit, POST the data to https://jsonplaceholder.typicode.com/posts
• Include the correct headers: Content-Type: application/json
• Serialise the form data with JSON.stringify
• Display the server's response (the created post with its new ID)

Build a live search that fetches results as the user types — efficiently.

• Search input that fetches users matching the query from /users
• Filter the results client-side by name containing the query (JSONPlaceholder does not support server search)
• Debounce the search by 400ms — only fetch after the user stops typing
• Show a loading state during the fetch
• Show 'No results' if the filter returns an empty array

Load more posts automatically as the user scrolls to the bottom of the page.

• Start by loading the first 10 posts
• Use IntersectionObserver on a sentinel element at the page bottom
• When the sentinel becomes visible: load the next 10 posts
• Show a spinner while loading each page of posts
• Stop loading when all 100 posts have been fetched

Build a complete Create/Read/Update/Delete interface using the JSONPlaceholder API.

• Read: Fetch and display all posts in a table
• Create: A form that POSTs a new post and adds it to the top of the table
• Update: Click a row to edit inline — PUT on save
• Delete: A delete button on each row — DELETE request, then remove the row
• Show a toast notification for every successful operation

Rewrite this bad code following all best practices from the chapter.

// BAD — rewrite this
var x = 'Ama';
var y = 22;
function d(a, b) {
  var z = a + b;
  if (z == 100) { return true; }
  else { return false; }
}

• Replace all var with const or let
• Give all variables and functions descriptive names
• Replace == with ===
• Simplify the if/else to a single expression

Rewrite deeply nested if/else using guard clauses to exit early.

// BAD — deeply nested
function processOrder(order) {
  if (order) {
    if (order.paid) {
      if (order.items.length > 0) {
        return 'Processing';
      }
    }
  }
  return 'Cannot process';
}

• Rewrite using guard clauses — return early for each failing condition
• The happy path (success) should be the last thing in the function
• Add a different error message for each failed guard

Identify and eliminate the repeated logic in this code.

// BAD — repeated code
const tax10  = (p) => p + (p * 0.10);
const tax15  = (p) => p + (p * 0.15);
const tax20  = (p) => p + (p * 0.20);
const tax25  = (p) => p + (p * 0.25);

• Replace the four functions with a single addTax(price, rate) function
• Or create a factory: const makeTax = (rate) => (price) => price + (price * rate)
• Prove the behaviour is identical

Add proper error handling to code that currently crashes silently.

• Write parseUserData(jsonString) — parse JSON safely. Return null if invalid, not a crash
• Write divide(a, b) — throw a descriptive Error if b is 0
• Write getElement(id) — throw if the element does not exist in the DOM
• Test each with both valid and invalid inputs. All errors should be caught and logged — nothing should crash

Identify impure functions and rewrite them as pure functions.

// IMPURE — modifies external state
let total = 0;
function addToTotal(amount) { total += amount; }

// IMPURE — mutates the input array
function addItem(arr, item) { arr.push(item); return arr; }

• Rewrite addToTotal as a pure function: takes current total and amount, returns new total
• Rewrite addItem as pure: returns a new array with the item — does not mutate the original
• Prove the original array is unchanged after calling the pure version

Rewrite sequential async code as parallel and add proper error handling.

// BAD — sequential when parallel is possible
async function loadDashboard() {
  const user  = await fetchUser();
  const posts = await fetchPosts();
  const stats = await fetchStats();
}

• Rewrite using Promise.all to fetch all three simultaneously
• Add try/catch with a meaningful error message in the UI
• Add a loading state that shows before the fetches start
• Use console.time to prove the parallel version is faster

Harden these functions so they cannot crash regardless of what they receive.

• Write getFirstName(user) — safely returns the first name even if user is null, undefined, or has no name property. Use optional chaining and nullish coalescing.
• Write sumArray(arr) — returns 0 if arr is not an array, filters out non-numbers before summing
• Write renderList(items, container) — validates both arguments, handles empty arrays, no innerHTML

Review and completely rewrite this function — it works, but it has serious problems.

var d = [];
function p(i) {
  var x = document.getElementById(i);
  if (x != null) {
    var v = x.value;
    if (v != null && v != '') {
      d.push(v);
      return true;
    } else { return false; }
  } else { return false; }
}

• List every problem (at least 6 issues)
• Rewrite completely: descriptive names, const/let, guard clauses, no global mutation, proper error handling
• The function should be pure — take the element ID and a data array as parameters, return a new array