▍Challenges
Challenges
Bite-sized problems with real tests. Pick a category or a difficulty.
18 / 18
- CSS
Centre the Card
Edit `style.css` so `.card` sits exactly in the middle of `.stage` — horizontally **and** vertically — without stretching it.
Beginner 10 min
- CSS
Convert CSS to Flexbox
Replace the float layout in `style.css` with flexbox: three cards in one row, **equal widths, equal heights**, a gap of at least 16px between them — no floats and no clearfix.
Beginner 15 min
- Algorithms
Count the Vowels
Implement `countVowels(text)` so it returns the number of vowels (`a e i o u`, upper or lower case) in `text` — as a number.
Beginner 10 min
- Accessibility
Fix the Contrast
Change the colours in `style.css` so the details text, the link, the button and the badge all reach a contrast ratio of at least **4.5:1** against their backgrounds (WCAG AA).
Beginner 12 min
- React
Fix the Counter
Make the teh tarik counter work: **+1** adds one, **−1** subtracts one (but never below 0), and **Reset** goes back to 0 — with the number on screen updating every time.
Beginner 10 min
- JavaScript
FizzBuzz on the Page
Implement `fizzbuzz(n)` so it returns the FizzBuzz sequence from 1 to `n` as an array of strings, then show `fizzbuzz(15)` on the page as 15 `<li>` items inside `#output`.
Beginner 15 min
- Accessibility
Label Every Input
Give every form control a visible, connected `<label>` (placeholders don't count), group the two radio buttons in a `<fieldset>` with a `<legend>`, and make clicking "I agree…" tick the checkbox.
Beginner 12 min
- Debugging
Repair the Broken Button
Fix the **Add to cart** button so every click adds exactly 1 to the cart count (1, 2, 3…). There are three separate bugs — find them all.
Beginner 10 min
- Algorithms
Reverse a String
Implement `reverseString(text)` in `script.js` so it returns the characters of `text` in reverse order — including empty strings and emoji.
Beginner 10 min
- HTML
Semantic Blog Post
Rewrite the `<div>` soup in `index.html` with semantic HTML: `header` + `nav`, `main` + `article`, one `h1`, an `h2`, `p`, `time datetime`, `figure` + `figcaption` (with `alt`), and a `footer`.
Beginner 15 min
- Debugging
Stop the Infinite Loop
Fix `yearsToTarget(balance, target, rate)` so its loop always ends: return the number of years to reach the goal, `0` if it's already reached, and `-1` if the balance can never grow (rate or balance ≤ 0).
Beginner 12 min
- CSS
Build a Responsive Navbar
Make the header responsive: on screens **600px and wider** the logo sits left with the links in one row beside it; **below 600px** the links stack in a column under the logo.
Intermediate 20 min
- JavaScript
Debounce the Search
Implement `debounce(fn, delay)` and use it so the search box calls `renderResults` only **once, 300 ms after the user stops typing**, with the latest text.
Intermediate 25 min
- Debugging
Find the Array Bug
`topThree(scores)` should return the three highest scores, highest first, **without changing the original array**. It returns the wrong scores and scrambles the input — find and fix the bugs.
Intermediate 15 min
- React
Fix the Stale State
Fix the order counter so **+3 family pack** really adds 3, and online orders that arrive after a delay are never lost — even when other buttons are clicked in the meantime. Use functional state updates.
Intermediate 15 min
- Algorithms
Palindrome Checker
Fix `isPalindrome(text)` so it returns `true` when `text` reads the same forwards and backwards **ignoring case, spaces and punctuation**, and `false` otherwise.
Intermediate 15 min
- JavaScript
Sort Students by Score
Fix `sortStudents(list)` so it returns a **new** array of student objects sorted by `score` (highest first), breaking ties by `name` A–Z, without changing the original array.
Intermediate 15 min
- Accessibility
Make the Modal Accessible
Make `#settings-modal` a real accessible dialog: `role="dialog"`, `aria-modal="true"`, labelled by its heading, focus moves inside when it opens, **Escape** and a real close button close it, and focus returns to **Open settings**.
Advanced 25 min