Vanilla JS Projects
A free collection of vanilla JS project ideas and starter templates.
🚀 New & Updated! The Vanilla JS Pocket Guides have been completely updated with new methods and modern JS approaches.
- 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 12,200+ daily subscribers.