JavaScript projects for learning by building

JavaScript project ideas by skill

1. Beginner

   Counter app

   Build a small counter with increment, decrement, reset, and limit logic to practice variables and operators.

   Build checklist

   1. A visible count
   2. Increment and decrement buttons
   3. A reset action
   • JavaScript variables
   • state updates
   • button events
   Study Variables

2. Beginner

   Tip calculator

   Create a calculator that reads bill amount, tip percent, and people count to produce a per-person total.

   Build checklist

   1. Input validation
   2. A total calculation
   3. A formatted result
   • JavaScript functions
   • number conversion
   • return values
   Study Functions

3. Beginner

   Todo list

   Build a list where users can add tasks, toggle completion, filter items, and remove finished work.

   Build checklist

   1. Add task flow
   2. Completed state
   3. Filter controls
   • JavaScript arrays
   • array methods
   • DOM rendering
   Study Array methods

4. Beginner

   Profile card builder

   Model user data with objects and render a profile card with optional fields, tags, and editable values.

   Build checklist

   1. A user object model
   2. Rendered profile fields
   3. Safe missing-field behavior
   • JavaScript objects
   • destructuring
   • optional chaining
   Study Objects

5. Intermediate

   Interactive page editor

   Let users update headings, theme classes, and content blocks directly in the browser.

   Build checklist

   1. Editable text
   2. Theme toggles
   3. Dynamic element creation
   • JavaScript DOM
   • querySelector
   • classList
   Study Modifying the document

6. Intermediate

   Delegated menu

   Create a menu or toolbar that handles many buttons with one shared event listener.

   Build checklist

   1. One parent event listener
   2. Multiple button actions
   3. Dynamic menu items
   • event delegation
   • DOM events
   • data attributes
   Study Event delegation

7. Intermediate

   Weather search interface

   Build an API-backed search page with loading states, response handling, and useful errors.

   Build checklist

   1. Search input
   2. Loading and error states
   3. Rendered API results
   • JavaScript fetch
   • async requests
   • error handling
   Study Fetch

8. Intermediate

   JSON settings importer

   Parse JSON settings, validate expected fields, and render a preview before applying changes.

   Build checklist

   1. JSON input
   2. Validation messages
   3. Preview and apply actions
   • JSON parse
   • JSON stringify
   • data validation
   Study JSON methods, toJSON

9. Intermediate

   Persistent notes app

   Save notes in browser storage so a learner can reload the page and keep their work.

   Build checklist

   1. Create and delete notes
   2. Persistent storage
   3. Empty-state UI
   • localStorage
   • browser storage
   • serialization
   Study LocalStorage, sessionStorage

10. Intermediate

    Form validator

    Validate a signup form with inline messages, submit handling, and progressive checks.

    Build checklist

    1. Required-field checks
    2. Submit handling
    3. Inline validation messages
    • form submit
    • input validation
    • DOM events
    Study Forms: event and method submit

11. Intermediate

    Regex text cleaner

    Use regular expressions to normalize whitespace, extract numbers, and validate simple text patterns.

    Build checklist

    1. Whitespace cleaner
    2. Pattern tester
    3. Extracted matches
    • JavaScript regex
    • string replacement
    • pattern validation
    Study Patterns and flags

12. Intermediate

    Class-based shopping cart

    Use classes to model products, cart items, totals, discounts, and reusable behavior.

    Build checklist

    1. Product and cart classes
    2. Add/remove item behavior
    3. Computed totals
    • JavaScript classes
    • methods
    • encapsulation
    Study Class basic syntax

13. Intermediate

    Modular utility library

    Split reusable formatting, validation, and data helpers into ES modules with explicit imports and exports.

    Build checklist

    1. Named exports
    2. A shared utility module
    3. A page that imports only what it needs
    • JavaScript modules
    • import export
    • utility functions
    Study Modules, introduction

14. Intermediate

    Async dashboard

    Combine multiple asynchronous data sources and render the dashboard only after the required data is ready.

    Build checklist

    1. Parallel async loading
    2. Combined result rendering
    3. Failure handling
    • async await
    • Promise.all
    • loading states
    Study Async/await