Vanilla JS Projects
A free collection of vanilla JS project ideas and starter templates.
- 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
Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join 12,800+ others.