Last updated on

If you’re just starting out learning JavaScript or perhaps you want to add some projects to your portfolio you might needs some JavaScript project ideas.

I often scratch my head when it comes to thinking of something to build so I wrote this list for you to get some inspiration.¬† No matter what level you are at you can tackle these JavaScript projects at a simple level or really go to town. Either way, it’ll be good practice ūüôā

1. Web Form Validator

Web Form Validator

Probably not the most exciting of projects but if you’re looking to start a career in web development then validating user input is a good skill to have.

Of course a lot of frameworks have their own in-built validation techniques and tools but there’s nothing like rolling your own.

Additional ideas: 

2. Social Share Buttons

Social Share Buttons

If you’ve ever used WordPress before, you’ll know there are a whole host of plugins to add social sharing buttons to your site.

But what if you have a static site (or anything else which isn’t¬†WordPress)?

With this project, the challenge is to write your own bit of JavaScript that will add sharing or like buttons to a site’s pages.¬† This could be done with just putting the HTML elements / images in to part of your site’s template but why not use JavaScript to add this dynamically?¬† You could also then customise the text that is being shared on the social media site.

Additional ideas:

Want 23 more JavaScript ideas?

Enter your email to receive an exclusive free PDF with another 23 JavaScript project ideas.


3. Parse An API

GitHub API

There are so many freely available APIs out there that you can use to build projects.

This JavaScript project idea is pretty open ended as it depends on which API you choose.¬† However a basic retrieve, parse (extract some useful points) and display of the API’s data will give you the chance to use many different JavaScript techniques.

Additional ideas:

Check out my article on simple APIs for inspiration on where to get your data.

FREE COURSE: Learn how to build a complete JavaScript project from end to end.
FREE course

4. Create Toast Notifactions

I created the above video to show how you can use a library to create Toast notifications on your site (check out the video if you’ve got no idea what a Toast notification is – it’s got nothing to do with cooked bread!).

For this project, the challenge is to create your own Toast notification tool.

You can use your JavaScript knowledge to respond to events on the page and then show a notification when the event has completed successfully or not.

Additional ideas:

5. AJAX Style Login

AJAX Style Login

For this project, focus on creating the front-end component of an AJAX style login.

If you don’t know, an AJAX style login is a login page that doesn’t require the page to be reloaded to determine whether or not you have entered the correct login details.

You could if you wanted to go the whole hog and create the back-end too but you could also mock the successful and invalid login situations by hard coding a username and password and comparing that to what the user enters.

Additional ideas:

6. Word Counter

Word Counter

How about a simple application to parse a block of text and determine how many words are contained within it?

You could advance this by being able to parse the number of words from a URL or a file.

Additional ideas:

7. Progress Bar

Progress Bar

Front end Frameworks like Bootstrap provide UI components for progress bars but they still need to be updated via JavaScript for them to be dynamic.

Using a setInterval function create a project that updates a progress bar that you have created

Additonal ideas:

8. A Countdown Clock

A countdown timer

You could do this by creating a simple web page and use JavaScript to update the time every second.

To make the project more challenging, adding a start/stop/pause button would present some other things to think about.

Additional ideas:

9. A guessing game

A guessing game

Sometimes you might be working on a project that requires an element of randomness.

To approach this project you can work on your random number generator skills and ask the user to try and guess this.

For a little more challenging project, you could take some preset data e.g. quiz questions and write a shuffle algorithm to randomise the answers.

Additional ideas: 

10. Interactive Tab Panels

Interactive Tab Panels

With screen real-estate being at a premium in a lot of apps, being able to tab content is a really useful skill.

For this project, create the markup that contains some text, images or other content and then use JavaScript to show / hide these panels when the correct tab is clicked.

Additional ideas:

11. Modal Pop Ups

Modal Popup

Similar to Social Sharing, you’ll find a number of free and paid for WordPress plugins for adding pop-ups to your site but adding one to your static site requires a jQuery plugin or similar.

For this project, create a script that is triggered on a user event such as a button click or page load.  You can use this to provide notifications, promotions or email signups.

Your project should handle clicking the modal to close it.

You can add animations and different modal entrances (e.g. slide in, fade in) to extend this project.

Additional ideas:

 

12. A Light Box Gallery

Lightbox Gallery

There are many jQuery plugins such as FancyBox which create a light box style gallery to view images.

This project will be a challenge for how you handle creating the light box and the interactive buttons to scroll through the various images.

If you completed the modal pop up project, you could extend this to create your gallery.

Additional ideas:

If you’re looking for images for your projects why not take a look at my article on 14 of the best places to find images.

13. An Address Book

 

An Address Book

For this project you could either use an API that provides fake or placeholder data or perhaps structure the actual JSON yourself.

Once you have your data in place, load this in to your application via an AJAX request (either jQuery or XML HTTP Request) as in a real world application, the user data would need to be retrieved in this way.

Your application could search for particular entries in your address book by filtering the attributes.

Additional ideas:

Want a free cheatsheet with 23 more JavaScript project ideas?

There’s no better place to come up with ideas for your projects than your own daily life. Perhaps there is some repetitve task you think you could automate with JavaScript.

Scratch your own itch to come up with project ideas.

Don’t forget you can always use NodeJS if you have an idea that doesn’t fit in to a browser. If you’re feeling adventurous, you can always create a Chrome/Firefox plugin for your project.

Got any other JavaScript project ideas? Share them in the comments below.