Skip to main content Accessibility Feedback

Project Ideas

The best way to learn JavaScript is by writing lots of code, but coming up with ideas for projects can be hard.

Here are some projects ideas, with templates and instructions to help you get started.

Filter by Topic

Beginner Projects

Accordion

Write a script that can be used to convert a collection of headings and content into a show/hide accordion.
DOM Manipulation

GitHub Repos

Use the GitHub API to get a list of repositories for a user and list them on a web page.
Arrays & Objects, DOM Manipulation, APIs

Mirror Text

Write a script that shows content typed into a field into another element.
DOM Manipulation, Strings & Numbers

Random Quote App

Write a script that gets a random quote from an API and renders it into the DOM.
Arrays & Objects, APIs

Show & Hide Component

Write a script that can be used to show/hide content when users click a button.
DOM Manipulation

Table of Contents Component

Write a script that generates a table of contents from the headings in a document.
DOM Manipulation, Arrays & Objects, Strings & Numbers

Top Stories from the NYT

Write a script that gets the top five stories for the day from the New York Times using the NYT API.
Arrays & Objects, APIs

Word Count App

Write a script that displays the number of words in a block of text in real time as the user types.
DOM Manipulation, Strings & Numbers, Web App

Advanced Projects

Find a Pet App

Use the Petfinder API to get a list of available pets from a shelter and display them on a web page.
DOM Manipulation, Arrays & Objects, Strings & Numbers, APIs

Countdown Timer App

Write an app that counts down to 0 from a time (say, five minutes).
DOM Manipulation, Strings & Numbers, Web App

Checkbox Filters

Write a script that filters songs from a playlist by genre and whether or not the song is Grammy-nominated.
DOM Manipulation, Arrays & Objects, Browser Storage

Form Saver

Write a script that automatically saves a user’s form inputs as they type and reloads them into the form when they come back to the page. Clear the saved data when the form is submitted.
DOM Manipulation, Arrays & Objects, Strings & Numbers, Browser Storage

Image Lazy Loader

Write a script that lazy loads images as the user scrolls down the page.
DOM Manipulation

Avoid the Monster Game

Build a game inspired by the movie Monsters, Inc. and loosely based on the old PC game Minesweeper. Find monster friends behind closed doors, but avoid the sock!
DOM Manipulation, Arrays & Objects, Strings & Numbers, Web App

Randomize

Write an app that randomly picks an option for a list of choices. Users should be able to add and delete items from the list.
DOM Manipulation, Strings & Numbers, Arrays & Objects, Browser Storage, Web App

Progress Bar

Write a script that displays and updates a progress bar as the user completes fields in a form.
DOM Manipulation

Todo App

Write a todo list app. Users should be able to create lists, add items to each one, and mark items as complete.
DOM Manipulation, Arrays & Objects, Strings & Numbers, Browser Storage, Web App

Toggle Tab Component

Write a script that converts a list of anchor links into toggle tabs. When a user clicks one of the links, the linked content becomes visible, while other content areas become hidden.
DOM Manipulation

Weather App

Write an app that gets the current weather in the visitor’s location and displays it in the DOM.
Arrays & Objects, Strings & Numbers, DOM Manipulation, APIs, Web App

Get Daily Developer Tips

I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web. Join 9,700+ daily subscribers.