DEV Community

Cover image for JavaScript project ideas and practical uses
Yaphi Berhanu
Yaphi Berhanu

Posted on • Originally published at simplestepscode.com

JavaScript project ideas and practical uses

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)

Collapse
 
getdanarias profile image
Dan

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

Collapse
 
yaphi1 profile image
Yaphi Berhanu

Looks awesome!

Collapse
 
getdanarias profile image
Dan

Thanks a lot! Glad you liked it! :)

Collapse
 
mikenieva profile image
Mike Nieva

Great project.

Collapse
 
icgreen profile image
icgreen

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!

Collapse
 
yaphi1 profile image
Yaphi Berhanu

You're very welcome! I'm glad the list is helpful.

Collapse
 
michael profile image
Michael Lee 🍕

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 :)

Collapse
 
yaphi1 profile image
Yaphi Berhanu

That's a great idea! Very useful for a lot of businesses.

Collapse
 
michael profile image
Michael Lee 🍕

Thanks @yaphi1 ! Yeah one of my clients is a restaurant and I plan on using this plugin for their website :)

Collapse
 
tamouse profile image
Tamara Temple

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?

Collapse
 
yaphi1 profile image
Yaphi Berhanu

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.

Collapse
 
tamouse profile image
Tamara Temple

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.

Collapse
 
crongm profile image
Carlos Garcia ★

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!

Collapse
 
yaphi1 profile image
Yaphi Berhanu

Glad it was a helpful list!

Collapse
 
rraccd profile image
Rraccd

Make a historical timeline either by user entering dates or scraping from specific site.

Collapse
 
yaphi1 profile image
Yaphi Berhanu

That's a great project idea!

Collapse
 
johnto20 profile image
Andrew

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.

Collapse
 
jochemstoel profile image
Jochem Stoel • Edited

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.

Collapse
 
yaphi1 profile image
Yaphi Berhanu

I'm glad you liked it!

Collapse
 
tariq profile image
Tariqul Islam

This is really a great Article. Thanks, Yaphi.

Collapse
 
yaphi1 profile image
Yaphi Berhanu

You're very welcome!

Collapse
 
larswaechter profile image
Lars Wächter

Great ideas, excited to see more :)

Collapse
 
yaphi1 profile image
Yaphi Berhanu

Thanks so much!