Some JavaScript project ideas to help you build your portfolio.
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
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: *
- You could disable the submit button until the form is valid
- Show invalid messages as the form is being completed (as opposed to once a submit button is completed).
2. 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:
- Hook in to the provider’s API(s) (where available) to provide like / share counts
3. Parse An 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:
- jQuery is a really useful tool to request data from an API via AJAX but why not try writing your own XML HTTP Requests for a challenge
- You could try caching requests in localstorage to avoid unnecessary network requests
Check out my article on simple APIs for inspiration on where to get your data.
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:
- You could use a *setTimeout *function to simulate the delay of data being loaded or saved
- Enable to notifications to be displayed at different positions on the screen depending on setting used
5. 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:
- Update the form with the error messages depending on whether the details are not found or incorrect
- Add spinners, messages or something to inform users that their data has been sent and is being validated (you could use a *setTimeout *function to mock the delay in sending / receiving data)
6. 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:
- Provide additional information about the text e.g number of passive sentences
7. 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:
- If you have an existing project that has several API requests, add your progress bar and update it each time an API request completes
8. A Countdown Clock
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:
- Try using localstorage to remember a user’s previous countdown value
9. 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: *
- To make a more interactive project, you could save results and scores in localstorage
10. 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:
- Add some animations to add some ‘flash’ to the tab transitions
11. Modal Pop Ups
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:
- You can provide an option in your script to appear in different locations and different content
12. A Light Box 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:
- The images could be loaded from an API to provide a dynamic gallery
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
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:
- You could make the address book editable i.e. allow the user to edit the data (you would need to create a full REST API if you wanted to actually save this though)