20+ Projects You Can Do With JavaScript

If you’re interested in becoming a web developer, JavaScript is one of the best coding languages you can learn. Getting familiar with JavaScript basics means using those skills to build JavaScript projects. Luckily, we know some fun JavaScript sample projects and beginner projects you can do to hone your skills. 😉

If you’re on the market for JavaScript practice projects, we’ve put together a list of 20+ JavaScript project ideas you can start working on right now (whether you’re looking for JavaScript projects for beginners, intermediate coders, or more advanced coders).

This is a great list of projects for beginners and beyond. When you find a JavaScript project that piques your interest and matches your skill level — follow the project link. Each of these open source JavaScript projects have their JavaScript projects source code listed on their homepage for you to use as a guide.

Table of Contents

1. JavaScript Projects for Beginners
1. JavaScript Clock
2. Tip Calculator
3. Animated Navigation Toggle
4. Map
5. Game
6. Mouseover Element
7. Login Authentication
8. JavaScript Drawing
9. To-Do List
10. JavaScript Quiz
11. Sliding Drawers
12. Advanced JavaScript Projects
12. Prettier
13. Terminalizer
14. Nano ID
15. Reaction
16. Webpack Monitor
17. Maptalks
18. AR.js
19. Parcel
20. Workbox
21. Tone.js
22. Your JavaScript Future

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

JavaScript Projects for Beginners

These JavaScript project ideas for beginners (and prospective front end developers) are samples of things you can code with basic JavaScript skills (along with some HTML and CSS).

Looking over the code snippets and reading source code is a great way to practice and get into programming because it’s like working through a step-by-step tutorial without having to sign up for online courses.

By looking at the source code for each of these simple JavaScript projects, you’ll start to understand how you can build a new version of the same idea or build on the original open source code to add your own twists and tweaks.

1. Build a JavaScript Clock

If you’re on a webpage or using a web application with a self-updating time feature (you know, like a clock), there’s a very good chance it’s powered by JavaScript code. This means JavaScript clocks don’t just make for good JavaScript projects — a JavaScript clock also lets you get hands-on with the kind of actual work you’ll be doing as a JavaScript developer.

To give you an idea of where to start with this JavaScript project idea, look no further than the LOLats Clock.

JavaScript code makes it possible to coordinate the lolcat images with set times picked by the user or by pushing the “Party Time!” button. I can haz time? Yes you can.

>>Link to the JavaScript project source code here

If you want an extra challenge, you can try making a countdown timer.

2. Build a JavaScript Tip Calculator

Whenever I go out to eat and I’m having a hard time calculating the right tip, I’ll fumble with my phone and search for a “tip calculator” on Google. I couldn’t tell you the name or the URL of the one I usually end up using, but it’s a simple JavaScript app.

So go ahead and take a swing at making your own tip calculator (no Python required!). This calculator on CodeSandbox by Skillcrush is a perfect JavaScript sample project that shows the kind of fun JavaScript projects you can build with JavaScript and a little bit of HTML and CSS, even as a beginner. It’s also a project that’s a staple of the Skillcrush JavaScript course and a great intro to JavaScript.

>>Link to the JavaScript project source code here

3. Build a JavaScript Animated Navigation Toggle

When you build website menus and webpages using only HTML5 and CSS, you’re limited to creating links that move the user from one static landing page to another — it’s JavaScript that allows for drop down, collapsible, and otherwise animated navigation features when you’re doing web development.

Animated navigation toggles are another ubiquitous part of the internet landscape that you’ll be able to crank out for clients and potential employers once you get the hang of the JavaScript programming language, even if you’re not a back end programmer. This JavaScript project sample by A. James Liptak shows the kind of dynamic navigation features you’ll have access to once you’ve added JavaScript to your toolkit.

>>Link to the JavasScript project source code here

4. Build a JavaScript Map

If you’ve ever used Google Maps to zoom in on a location and change your view mode, you were using features that were built with JavaScript. JavaScript’s ability to create dynamic objects makes it a natural fit for creative interactive maps on websites or in a web app.

While you don’t need to aim for recreating Google Maps on your first time out, experimenting with simple JavaScript projects like Sara B’s interactive Codepen map (built using the JavaScript framework jQuery — a collection of JavaScript libraries with pre-written, reusable code) is a solid way to familiarize yourself with JavaScript’s map-making capabilities (you don’t have to know how to call an API just yet).

>>Link to the JavaScript project source code

5. Build a JavaScript Game

HTML and CSS are important building blocks in web development, but JavaScript is the programming language that moves websites from function to fun. It’s no surprise that games are on the list of fun JavaScript projects that let you practice your skills without falling asleep at the keyboard. Martin’s Codepen maze is a perfect example of games as simple JavaScript projects.

>>Link to the JavaScript project source code here

With JavaScript, you can make games like Pong, Hangman, and Tetris — even a simple Tic Tac Toe game gives you a lot of practice.

6. Build a JavaScript Mouseover Element

Another bit of JavaScript goodness you’ve come to rely on online is the mouseover effect — instances where hovering a mouse over a certain icon or area on a screen produces an action or result from the spot where you’re hovering.

Mouseovers are a routine part of JavaScript development, so spending your time on a quick mouseover JavaScript project is a worthwhile way to spend the afternoon. Roger Van Hout’s Happy Bouncing Balls mouseover on CodePen displays a field of balls resembling the kind you’d get from gum machines as a kid. Hover your mouse over any single sphere and watch it expand.

>>Link to the JavaScript project source code here

7. Build a JavaScript Login Authentication

Something as simple as a website’s login authentication bar (the area where you enter your email and password to log in to the site) is another part of JavaScript’s domain.

This JavaScript project for beginners is a good idea to master, since just about every website has a login authentication feature — you can practice writing form validation code with this project! Mike Tran’s Codepen authentication bar built using AngularJS (another JavaScript framework) is a clean, to the point JavaScript sample project.

>>Link to the JavaScript project source code here

8. Build a JavaScript Drawing

JavaScript can be used as a drawing tool, bringing HTML and CSS elements to life on a web browser screen. Being able to make static pages look more appealing with graphical elements is a key part of web development (and web design) so learning how to make the most out of JavaScript’s drawing capabilities is critical.

Consider trying a drawing JavaScript project like Narayana’s Infinite Rainbow on CodePen.

>>Link to the JavaScript project source code here

9. Build a JavaScript To-Do List

JavaScript is particularly handy for coding interactive lists that let users add, remove, and group items — something you can’t do with HTML5 and CSS alone. If you’re like me and have great intentions of setting up a to-do list (but never do), now’s your chance. Use your JavaScript chops to whip up a to-do list like this JavaScript project sample built by John Fichera on Codepen.

>>Link to the JavaScript project source code here

10. Build a JavaScript Quiz

Who doesn’t love a quiz? Whether they’re telling you which career path you’re best suited for (full-time web development, maybe?), where your political beliefs line up, or testing your knowledge on 1980’s WWF wrestlers, quizzes can be both fun and useful — we even use a quiz here at Skillcrush to help users determine which coding path is a good fit for them.

If you’ve taken a quiz online, there’s a good chance some JavaScript source code was involved, and now’s your chance to put together a quiz of your own.

11. Create some sliding JavaScript drawers

This JavaScript github project (Pushbar.js) is a JavaScript plugin that allows developers to add “sliding drawer” menus (menus that can be pulled onscreen from the top, bottom, and/or left and right of an app) to their website or app. Take a look at the code and see if you can come up with something similar!

>>Link to the JavaScript project source code here

(Back to top.)

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Advanced JavaScript Projects

Once you get familiar with the simple JavaScript projects listed above, you might be curious what more advanced JavaScript projects look like. Here are some intermediate JavaScript projects that go above and beyond the basics, but that are still open source — meaning you can study the code to see how it all works and eventually take a stab at something similar yourself.

12. Prettier

Prettier is an “opinionated JavaScript formatter,” meaning it’s JavaScript program used to remove all original styling in your JavaScript code and format it into a single, prettier (get it?) standard style.

>>Link to the JavaScript project source code here

13. Terminalizer

Terminalizer is a snappy, open source JavaScript project used to record your terminal screen and then turn that recording into an animated gif — perfect for terminal demos and tutorials.

>>Link to the JavaScript project source code here

14. Nano ID

Need to generate a random ID number for something important like your online banking account (or just REALLY don’t want your roommate using your Netflix)? Nano ID is an open source JavaScript program whose randomly generated IDs would take 149 billion years to have a 1% probability of at least one collision. In other words that’s going to take your roommate a LONG time to guess.

>>Link to the JavaScript project source code here

15. Reaction

Reaction is a great example of just how far you can go with JavaScript. Remember the humble but proud JavaScript tip calculator in the Beginner’s section? Well, Reaction raises the stakes from a JavaScript project that helps with one specific kind of transaction, to a JavaScript project that allows users to run an entire business.

Reaction is a commerce platform used for managing business in real time and delivering shopping experiences directly to customers. You can make your own ecommerce site complete with a shopping cart by Reaction. And it’s open source, meaning you can study how it all works for free.

>>Link to the JavaScript project source code here

16. Webpack Monitor

Webpack Monitor is an advanced, open source JavaScript project used to improve applications’ overall user experience. This JavaScript program keeps track of an application’s “bundle” size and performance to make sure everything runs smoothly.

>>Link to the JavaScript project source code here

17. Maptalks

Building on the simple JavaScript map project from earlier, Maptalks is a more advanced JavaScript project sample. Maptalks integrates 2D and 3D maps to create shifting, animated landscapes where buildings and terrain can be extruded and flattened at will.

>>Link to the JavaScript project source code here

18. AR.js

AR.js is an advanced JavaScript project attempting to bring the experience of augmented reality to mobile devices using JavaScript. We’ve come a long way from animated navigation toggles, right?

>>Link to the JavaScript project source code here

19. Parcel

Parcel is a JavaScript web application bundler that can bundle together all an application’s files and assets together in record time. How is this possible? Study the source code for yourself, and find out!

>>Link to the JavaScript project source code here

20. Workbox

Workbox is a set of JavaScript libraries designed to add offline functionality to web apps. If an app uses Workbox, the next time your WiFi goes out, you won’t be (quite) as bummed.

>>Link to the JavaScript project source code here

21. Tone.js

Tone.js is a JavaScript framework for creating interactive web browser music. This includes advanced scheduling capabilities, synths and effects, and intuitive musical abstractions built on top of the Web Audio API.

>>Link to the JavaScript project source code here

(Back to top.)

JavaScript can be used to create captivating visual storytelling like Bullying Free NZ’s anti-bullying children’s book, Oat the Goat.

For hypnotic generative art visuals like Matt DesLaurier’s display on GitHub.

And Shirley Wu’s interactive data visualization of every line from the musical Hamilton.

Besides vanilla JavaScript, you can explore JavaScript frameworks like Node.js (server-side) and Angular (front-end), and JavaScript libraries like React. As your experience with JavaScript code grows, your imagination will soon be the only thing holding you back, so it’s time to get to work!

If you’re excited to learn how to code after reading about the different JavaScript projects you can do for practice and for fun, check out our Break Into Tech program, which teaches you everything you need to know to be job-ready as a developer.

(Back to top.)

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!