JS Challenges
Challenges are longer, end-to-end exercises. No fill-in blanks — you build something small from scratch in the editor.
Suggested first ten JS challenges
| Challenge | Topics it exercises |
|---|---|
| Click counter | dom, events |
| To-do list with delete buttons | arrays, event delegation, web-storage |
| Fetch a list of users from JSONPlaceholder | fetch, async/await |
| Debounced search box | timing, closures |
| Dark-mode toggle saved to localStorage | dom-css, web-storage |
| Pomodoro timer | timing, events |
| Form with live validation | forms, regex |
| Drag-and-drop reordering | HTML5 Drag API, DOM nodes |
| Chart of randomised data (Chart.js) | chartjs |
| Markdown → HTML converter using regex | regex, strings |
How to do them
- Open the editor and start from a blank pane.
- Write the smallest version first — get it working before adding features.
- Refactor when you're done. The first solution is rarely the cleanest.
- Save the snippet to a personal GitHub gist or repo — six months in you'll have your own toolkit.
Tip: Stuck? Open the AI Study Buddy and describe what you're trying to build — it can suggest an approach without solving it for you.
Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from JS Challenges!";
</script>
</body>
</html>
Try it Yourself »
Exercise
A great first challenge is implementing a…
Answer (two words):
counter
Five letters — a mouse interaction.
Discussion
Loading…