JavaScript Project Ideas

Build a to-do app that lets users add, complete, and delete tasks with data persisted in localStorage.

• Add tasks via input field and Enter key or button click
• Mark tasks complete with a strikethrough toggle
• Delete individual tasks
• Filter tasks by All / Active / Completed
• Persist tasks to localStorage so they survive page refresh

Fetch and display current weather for any city using the OpenWeatherMap API with dynamic UI updates.

• Accept a city name input and fetch weather on submit
• Display temperature, humidity, wind speed, and weather icon
• Show a loading spinner while fetching
• Handle and display errors for invalid cities
• Toggle between Celsius and Fahrenheit

Create a multiple-choice quiz that tracks scores, enforces a per-question countdown timer, and shows a results screen.

• Load at least 10 questions from a local JSON file
• Display a countdown timer per question that auto-advances on expiry
• Highlight correct and incorrect answers after selection
• Track and display current score in real time
• Show a final score screen with a restart button

Build a Trello-style board with columns and cards that can be reordered via drag-and-drop.

• Create, rename, and delete columns dynamically
• Add and delete cards within any column
• Drag cards between columns and reorder within a column using the HTML5 Drag and Drop API
• Persist board state to localStorage
• Animate card movement with CSS transitions triggered via JS

Build a browser chat client that connects to a public WebSocket echo server and simulates a live chat experience.

• Connect to a WebSocket server on page load and display connection status
• Send messages on Enter key or button click
• Display sent and received messages in a scrolling thread with timestamps
• Show a typing indicator that disappears after 2 seconds of inactivity
• Gracefully handle disconnections with automatic reconnect attempts

Build a photo gallery that lazily fetches images from the Unsplash API as the user scrolls near the bottom.

• Fetch and render an initial batch of photos on load
• Detect scroll position using IntersectionObserver to trigger next page fetch
• Show skeleton loaders while fetching
• Support a search input to filter photos by keyword
• Debounce the search input to limit API calls

Create a split-pane editor that renders a live HTML preview of Markdown as the user types.

• Two-pane layout: raw Markdown input on left, rendered HTML preview on right
• Parse and render Markdown in real time using a library like marked.js
• Support syntax-highlighted code blocks via highlight.js
• Export the rendered content as a downloadable HTML file
• Save editor content to localStorage automatically

Build a tool that lets users paste JS code snippets, runs them in a sandboxed Worker, and reports execution time and memory usage.

• Accept code input in a CodeMirror editor with syntax highlighting
• Execute code inside a Web Worker to avoid blocking the main thread
• Measure execution time using performance.now() and report results
• Catch and display runtime errors from the Worker safely
• Display a bar chart of benchmark runs using Canvas API

Build a Progressive Web App for tracking income and expenses that works fully offline and syncs when reconnected.

• Add, categorize, and delete transactions with running balance
• Store all data in IndexedDB for offline persistence
• Register a Service Worker to cache app shell and assets
• Queue transactions made offline and sync to a mock REST API on reconnect
• Display spending by category as an SVG pie chart built without libraries