Vanilla JS Projects

A free collection of vanilla JS project ideas and starter templates.

⏰🦉 Early Bird Sale! A new session of the Vanilla JS Academy starts on May 31. Now through Sunday, get 35% off the program. Click here to join.

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 start.

  • Accordion. Write a script that can be used to convert a collection of headings and content into a show/hide accordion.
  • GitHub Repos. Use the GitHub API to get a list of repositories for a user and list them on a web page.
  • Mirror Text. Write a script that shows content typed into a field into another element.
  • Toggle Password Visibility. Write a script that can be used to toggle the visibility of password fields.
  • Random Quote App. Write a script that gets a random quote from an API and renders it into the DOM.
  • Show & Hide Component. Write a script that can be used to show/hide content when users click a button.
  • Temperature Converter App. Write an app that converts Farenheit to Celcius and back.
  • Table of Contents Component. Write a script that generates a table of contents from the headings in a document.
  • 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.
  • Word Count App. Write a script that displays the number of words in a block of text in real time as the user types.
  • 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.
  • Countdown Timer App. Write an app that counts down to 0 from a time (say, five minutes).
  • Checkbox Filters. Write a script that filters songs from a playlist by genre and whether or not the song is Grammy-nominated.
  • 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.
  • Image Lazy Loader. Write a script that lazy loads images as the user scrolls down the page.
  • 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!
  • 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.
  • Progress Bar. Write a script that displays and updates a progress bar as the user completes fields in a form.
  • Todo App. Write a todo list app. Users should be able to create lists, add items to each one, and mark items as complete.
  • 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.
  • Weather App. Write an app that gets the current weather in the visitor’s location and displays it in the DOM.

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 11,900+ daily subscribers.

Hi, I'm Chris Ferdinandi. 👋

Chris Ferdinandi

I believe there’s a simpler, more resilient way to make things for the web.

I create vanilla JS pocket guides and video courses, run a project-based training program, and host the vanilla JS podcast. My developer tips newsletter is read by over 11,900 developers each weekday.

If you have a question about something or need JavaScript help, get in touch.