Start learning

javascript · projects

JavaScript Project Ideas

8 real projects, ordered by difficulty, each mapped to the lessons that prepare you for it. Building projects is how the concepts actually stick.

✅ Beginner

Todo App

Add, complete, delete and persist tasks. Covers DOM manipulation and array methods end-to-end.

HTMLCSSJS ArrayslocalStorage
  • DOM creation & event delegation
  • Array methods: map, filter
  • localStorage persistence
Already built in Lesson 28 — Mini Project →
⏱️ Beginner

Countdown Timer

Pick a target date and show a live days/hours/minutes/seconds countdown.

JS DatessetInterval
  • Date math
  • setInterval / clearInterval
  • Updating the DOM efficiently
Uses concepts from Lesson 6 — Loops →
🔐 Beginner

Password Generator

Generate strong random passwords with length and character-type options — pairs with the site's own tool.

StringsMath.random
  • String manipulation
  • Math.random()
  • Form inputs & checkboxes
Compare with the built-in tool →
💬 Beginner

Quote Generator

Fetch a random quote from a public API and display it with a 'New Quote' button.

Fetch APIAsync/Await
  • fetch() and Promises
  • async/await
  • Error handling for failed requests
Builds on Lesson 21-23 — Promises, Async/Await, Fetch →
🌦️ Intermediate

Weather App

Search a city and show live weather using a public weather API.

Fetch APIJSONDOM
  • Working with JSON responses
  • Conditional rendering
  • Handling loading & error states
Builds on Lesson 23 — Fetch API →
🧮 Intermediate

Expense Tracker

Log income/expenses, see a running balance, and persist entries across page reloads.

ArrayslocalStorageObjects
  • Array.reduce for totals
  • Object-based state
  • Form validation
Builds on Lesson 16 & 25 — Array methods, Local Storage →
🎬 Advanced

Movie Search App

Search movies from a public API as the user types, with debounced input.

Fetch APIDebouncingDOM
  • Debouncing user input
  • Rendering dynamic lists
  • Handling race conditions in fetch
Builds on Lesson 27 — Event Loop →
🗂️ Advanced

Kanban Board

A Trello-style board with draggable cards across 'To Do / In Progress / Done' columns.

Drag & Drop APIlocalStorageModules
  • HTML5 Drag & Drop events
  • Structuring code with ES6 modules
  • Complex state persistence
Builds on Lesson 26 — ES6 Modules →