🏆 Capstone
🔴 Advanced
MODULE P1
🎉 JavaScript Mini-Projects
JavaScript Mastery — Overall Progress100%
🎉
You've Made It to the Capstone!
You've worked through 12 full lessons — variables, functions, arrays, objects, DOM manipulation, events, async JavaScript, and the Fetch API. Now it's time to stop reading and start building. These four projects will cement every concept you've learned into real, working applications you can show to anyone.
🎯 How to use this page: Each project is self-directed. Read the description, study the step-by-step task list, then open a code editor (VS Code recommended) and build it. Don't copy-paste — write every line yourself. Struggle is where the learning happens. Aim to complete at least two projects before moving on to the next course.
The 4 Projects
Build These Apps
Each project uses a different subset of your JavaScript skills. Together they cover everything from the course.
PROJECT 01
✅ Todo List App
Build a fully functional todo manager. Users can add tasks, mark them complete, delete them, and their list survives a page refresh because it's stored in localStorage.
- Create the HTML structure: an input field, an Add button, and an empty
<ul>list container - Write a JS function to create a
<li>element for each task with a checkbox and delete button - On checkbox click, toggle a
completedCSS class that strikes through the text - On delete button click, remove the item from the DOM and update the saved array
- Save the current tasks array to
localStorageas JSON whenever it changes - On page load, read from
localStorageand render any existing tasks
PROJECT 02
🌤 Weather Dashboard
Fetch live weather data from the OpenWeatherMap API and display temperature, conditions, and city name in a clean UI. Handle loading states and errors gracefully.
- Sign up for a free API key at
openweathermap.org(takes 2 minutes) - Build a search UI: a text input for the city name and a Search button
- Write an
asyncfunction that fetches weather using the API:api.openweathermap.org/data/2.5/weather?q={city}&appid={key}&units=metric - Display temperature, weather description, city name, and country code in styled HTML elements
- Add a loading spinner that shows during the fetch and hides when done (use
try/finally) - Handle errors: show a user-friendly message if the city is not found (API returns 404)
PROJECT 03
🧩 Interactive Quiz App
Build a timed multiple-choice quiz app with a score tracker, countdown timer, and a results screen. Save the high score to localStorage so users can try to beat it.
- Create a
questionsarray of objects — each object has aquestionstring, anoptionsarray, and acorrectindex - Write a
renderQuestion(index)function that dynamically builds the question and answer buttons in the DOM - Track the user's score: increment it when they click the correct option
- Implement a 60-second countdown using
setInterval— when it hits zero, end the quiz automatically - After all questions are answered (or time runs out), hide the quiz and show a results screen with score and percentage
- Save the high score to
localStorageand show it on the results screen
PROJECT 04
🐈 GitHub Profile Viewer
Use the public GitHub REST API (no key needed!) to look up any user's profile and their top repositories. Render their avatar, bio, stats, and repo cards with stars and fork counts.
- Build a search form with a username input and a Search button
- Fetch the user profile:
https://api.github.com/users/USERNAME— no API key needed - Display the user's avatar (
avatar_url), name, bio, public repos count, followers, and following - Fetch their repos:
https://api.github.com/users/USERNAME/repos?sort=stars&per_page=6 - Render up to 6 repo cards, each showing the repo name, description, star count (
stargazers_count), and fork count - Handle the 404 case (user not found) gracefully with an on-screen error message instead of a console crash
Course Summary
What You've Learned in 12 Lessons
Here's the full picture of everything this course covered. If you can build the four projects above, you've internalized all of it.
| Lesson | Topic | Key Concepts |
|---|---|---|
| 1 | Introduction | What is JavaScript, browser console, first script |
| 2 | Variables | var, let, const, scope, hoisting |
| 3 | Strings | Template literals, methods, immutability |
| 4 | Operators | Arithmetic, comparison, logical, ternary |
| 5 | Conditionals | if/else, switch, short-circuit evaluation |
| 6–7 | Functions | Declarations, expressions, arrow functions, closures |
| 8 | Arrays | map, filter, reduce, spread, destructuring |
| 9 | Objects | Properties, methods, this, prototypes, classes |
| 10 | DOM Manipulation | querySelector, createElement, innerHTML, classList |
| 11 | Events | addEventListener, event delegation, keyboard & mouse |
| 12 | Fetch & Async | Callbacks, Promises, async/await, Fetch API, error handling |
| P1 | Projects | Todo App, Weather Dashboard, Quiz App, GitHub Viewer |
What's Next
Continue Your Journey
JavaScript is the foundation of the modern web. Now that you have it, every door is open. Here are the three most valuable next steps:
🌟
Build Before You Move On
The single biggest mistake learners make is consuming courses without building. Complete at least the Todo App and the GitHub Profile Viewer before starting a new course. Two finished projects on your portfolio are worth more than ten courses on a resume.
🧩 Best Practices Check
5 questions on JavaScript best practices — the stuff employers actually ask about
1. Which browser API lets you store data that persists after the browser is closed?
2. The best way to render a list of items into the DOM dynamically is:
3. To use the
await keyword, the function it lives in must be marked as:4. Which method converts a JavaScript object to a JSON-formatted string?
5. Which method is the modern standard for attaching events to DOM elements?
🎉
Best practices locked in!
You clearly understand the core patterns of professional JavaScript development. Now go build something.
🎓
Course Complete
You've built a solid JavaScript foundation across 12 lessons and 4 capstone projects. You understand variables, functions, arrays, objects, DOM, events, async/await, and the Fetch API. This is real, job-relevant knowledge.