This article originally appeared on Simple Steps Code which tries its best to help people learn JavaScript and actually remember it.
Over and over, I hear people want JavaScript project ideas.
I've decided to start an ongoing list, and I'd love for you to jump in and share project ideas. The ideas don't need to be inhumanly creative or anything like that. If possible, I'd prefer plain JS, but don't restrict yourself if some framework or tool is required.
Also, before you attempt JavaScript projects, read this article to make sure you don't fall into the trap of attempting something too huge too soon and giving up.
Here's the list of JavaScript projects so far:
UI stuff
- Autocorrecting text box
- Form validator
- Collapsible navigation menu
- Countdown clock
- Modal dialog box
- A site that lets people design their own UI elements (buttons, mastheads, etc.)
- Customize greeting if people came from a certain site
E-commerce
- Price estimator
- Front end of an interactive online store
- Shopping cart front end
Finance
- Tip calculator
- Cost splitter
- Investment calculator
- House or car payment calculator
- Savings calculator
Tools and utilities
- Page that grabs data from somewhere on the web and puts it in a useful format
- Random name picker
- Unit conversion calculator
- Secret message encoder/decoder
Fun and games
- Basic quiz
- Rock-paper-scissors game
- Pong game
- Madlibs
- A mario-style game
- A zelda-style game (more likely a 2d one until 3d performance improves on the web)
Social applications
- Social network front end
- Real time chat app (using socket io)
API stuff
- Gif search, video search, etc
- Something with maps (like a store locator)
- Something with geolocation (e.g.: find XYZ near you)
- Real-time feed of tweets about a subject of your choice
- Text-to-speech
- Combinations of any of the above
Console tricks
- Scrape a page through your console and get info easily without having to copy, paste, and format each thing by hand (great for research)
- Change colors of your favorite sites to see what they'd look like
I hope you've enjoyed this, and feel free to let me know if you have other suggestions.
Top comments (27)
Over the Summer of 2015, I decided to learn JavaScript. I wanted to make it fun and engaging for myself and others who would be checking out my project and progress.
I opted to create a homage to PacMan: critterchase.com
It started with basic JavaScript and HTML5 Canvas use. The new version now works on Mobile and has React as its mounting framework. Performance in some Android devices is something I still need to figure out but that would be another adventure! High Performance Mobile Pages.
Ultimately, this proved to be a very fun project! People love to try it out. It also got the attention of employers at a recent Career Fair at my school!
If you are interested on a tutorial on how to craft the game, I would be down to write some blog posts or put some videos on YouTube! Please, let me know
Looks awesome!
Thanks a lot! Glad you liked it! :)
Great project.
I've been looking for something like this. I've been searching for projects to improve my JavaScript skills. However, when I sit down to code something at home and hit a wall cause I don't know what to code. This is what I needed. I hope this list will keep growing with other contributing. Thanks again!
You're very welcome! I'm glad the list is helpful.
This is excellent!! You are so right in people wondering what to do next after learning some JS, whether in classes or on their own. I'll be passing this on to them. Will this land in a repo someplace?
I'm glad you like the list!
I have some of these projects in one form or another scattered across the internet (usually through articles). At the moment, I don't have plans to put these in one repo, but that could change at some point.
Just to be clear: what I meant was putting the project list itself in a repo; that makes it easier for everyone to contribute to the list.
Really nice list! I love the practicality of some of these ideas!
I recently saw a UI on my Dr's website and thought, neat it'd be useful for just about any brick and mortar site. So I created a JavaScript plugin that automatically generates the hours of operation based on a JavaScript object that's passed to it. It also determines the day of the week when viewed and highlights the day.
Check out Open Hours if you're interested and hope it inspires JavaScript projects like it :)
That's a great idea! Very useful for a lot of businesses.
Thanks @yaphi1 ! Yeah one of my clients is a restaurant and I plan on using this plugin for their website :)
Even though I have some experience with JavaScript and many frameworks there are some items in this list that will prove to be good challenges, as I have no experience making anything like them. Thank you!
Glad it was a helpful list!
Make a historical timeline either by user entering dates or scraping from specific site.
That's a great project idea!
I've taken the step of learning JS. One thing I read which stood out for me was to make sure that you actually do something practical with your learning.
With this in mind I created nextlevelpuzzles.com as my first JS project. It's by no means complicated, but it allowed me to apply basic logic, html/css and JS (such as event listeners) in a practical manner.
I've found courses by Wes Bos to be particularly helpful.
This is really a great Article. Thanks, Yaphi.
You're very welcome!
This was fun to read. I have completed almost all of them already except none of the game related. I'll give the list some thought too.
I'm glad you liked it!
Great list, Yaphi! You might also find this list I made useful.
I really like your list!
Great ideas, excited to see more :)
Thanks so much!
I made an encoder decoder app.. please check it out.
scisaif.github.io/Encoder-Decoder/
please suggest more such proje ts
I have a suggestion to add.
A web interface to manage MySQL databases. (pretty much like phpMyAdmin)