Uses promptos facit, or, as it is said in English, “Practice makes perfect.” Interestingly, the Latin phrase from which those three words of wisdom were derived means, “Use makes perfect,” and that couldn’t be more true when honing your JavaScript skills. Using them, again and again, brings you closer and closer to mastery. Along with personal satisfaction, mastering JavaScript can help you earn JavaScript certifications, which increases your chances of landing a higher salary and becoming a better team member.

Here are some projects to help you hone your skills. JavaScript is a versatile language that you can use to code a wide variety of solutions, but to get started, it’s often best to begin with the basics. The JavaScript projects in this article will help you learn some of the essential—and powerful—tools you can use while designing with JavaScript.

The Modern Javascript Bootcamp Course

Last Updated July 2024

  • 484 lectures
  • All Levels
4.7 (12,464)

The most up-to-date JS resource online! Master Javascript by building a beautiful portfolio of projects! | By Colt Steele, Stephen Grider

Explore Course

1. Background image slider

The objective of this project is to make it so that whenever you click on an arrow in an image slider, the next image appears. This is one of the best JavaScript projects for beginners. Your solution should have the following features:

You can make this project a little more challenging by adding transitions in between slides.

2. Expanding cards

This project produces cards that display images, and when you click on them, they expand. This could be useful when designing an app that displays images on a webpage. The end result is able to:

This project takes advantage of some CSS functions as well, adding to its visual effect. You can alter it, replacing the images with customer reviews, statistics, charts, or video thumbnails.

3. Switch background color—one of the easier JavaScript projects

This simple project challenges you to create an image that changes color every time it gets clicked. It’s accomplished by creating an array of different colors. Your final product should have:

To add a twist to this project, you can try to make the words, such as “Click Me!” clickable, eliminating the need for a box altogether.

4. Hex background color switch

In one of the simpler and fun JavaScript projects, this task requires you to create a hex value using an array that encompasses all the different hex values, then loop through them, and then concatenate six separate values to a string that starts with one of the numbers. The end result: The background color gets changed to the value you specify. This is similar to the background color project above, but the name of each color is specified. This project, when complete, should feature:

Hex colors are generated mathematically, so to do this project, you need to incorporate a hexadecimal color system in your code.

5. Counter

In this project, you create a counter that goes up or down when you click on one of two different buttons. You want the numbers to increase by a value of 1 each time you click. Your app should be able to:

You can spice this one up a bit by having the background change whenever the user clicks as well.

6. Testimonials

This project involves you creating a box that shows customer testimonials and allows the user to scroll from one to the next by clicking on arrows on either side of the box. When completed, the project should:

While this project may have a static background, you can add a degree of difficulty by making the background change to an appropriate image each time the user clicks.

7. Modal

This project is a bit more complex and ideal for a web application. It involves creating a landing page, and then a button that you can click on to view is behind the landing page. After you click on the button, you see some items you can choose from. Your app should:

This one has a lot of room for flexibility. You can add more or fewer categories or program different options for what happens after a user clicks on an item they’re interested in.

8. Form validator

In this project, you create a registration form that allows a user to enter information and a password to sign up for a membership or gain access to gated content or other exclusive rights. When complete, this app:

This project also exposes you to many of the core programming features used in sign-in systems, including systems that check a username against a database of registered people, whether a password has been entered correctly, and other elements that can benefit users.

9. Calculator

This project challenges you to create a working calculator, such as the one on your mobile device. You can use it to perform basic arithmetic functions. Ideally, you want your calculator to:

This project, although simple, comes with some options for flexibility. For example, you can alter the color the numbers change to when the cursor hovers over them. You could also adjust the speed at which colors fade in and out for numbers, buttons, or both.

10. Tip form

There are a few JavaScript projects like this that help when paying bills at restaurants. In this challenge, you create a simple app that calculates the amount each person in your party has to tip after you receive service at a restaurant. This is a great app that can be useful for you and your friends when you go out. Its features should include:

You may also want to enable the app to calculate the tip as you enter information instead of only after hitting the “Calculate” button.

11. Shopping cart

This project challenges you to make a shopping cart that works in conjunction with a group of items. When you select items, they get added to the shopping cart. For the app to be effective, it should be able to:

To make this app even more useful, you could include a preview of which items were added to the shopping cart somewhere on the screen.

12. Shopping list 2

This project involves creating a list of items to shop for. It enables the user to enter items and then have them automatically collected in a list on the screen. Some of the apps basic functions include:

You can enhance the appeal of this app by including an appropriate image as a backdrop, allowing it to change as the user enters different items.

13. Course form

In this project, you create a form to sign up for a course. Users can specify the name of the customer, the course, and who teaches it. This app gives users the ability to:

To make this challenge a bit more interesting, you could include a drop-down list that allows users to select from a list of courses.

14. Flashcards

This is a classic project where you have to design flashcards that provide both the question and the answer. What you are building is a tool that generates flashcards that could be used for studying or quiz games. The program’s key functions include:

To help organize the flashcards, you can add a feature that puts them in alphabetical order. You could also rank them according to difficulty and then sort them so more challenging questions are grouped together.

15. Budget application

Here, you will create an application that is designed to help someone make a budget. The app keeps track of how much you have spent and what you spent it on, as well as how much is left in your budget. This application can:

You could add a level of sophistication to this app by creating categories for the budget and allowing the user to select a category using a drop-down menu

16. Random joke

In this challenge, you create a random job generator. The app you make can choose jokes based on ones that you manually enter into a database.  To streamline the process of creating the program, you may want to find a collection of jokes online that you can enter into the app. When complete, this app should be able to:

The basic operation of this app is relatively straightforward, but you can make it far more entertaining by including some extra features. For example, you could create an animated GIF of someone laughing as the joke gets displayed. You may also choose to make the GIF change with each joke.

17. Random person

Here, you will create an application that generates random people, including contact information and their picture. It can be used to create characters for stories, video games, or just for fun. The core features include:

Even though this app can be used just for fun, you could also use it to select team members based on actual profiles of real people. You could have people at your job, your friends, or in your class provide their information, store it in the application, and use it to randomly assign groups or choose teams.

18. Analogue clock

Create an analog clock in this project, complete with an hour hand, second hand, and minute hand. The clock is round and includes the corresponding numbers around its outer edge. The end result features:

To up the level of difficulty, you could create a sweeping second hand by having it move in smaller increments, such as every 10th of a second instead of every second.

19. Kelvin to Fahrenheit

With this project, you make an application that’s able to convert temperature readings from Kelvin to Fahrenheit. You don’t have to know the difference between the two temperature measurements to succeed in this project. Your final product will have:

The driving force behind this app is the conversion calculations. You can alter your source code to go between Kelvin and Celsius, or even other kinds of measurements, such as units of distance or weight.

20. Mortgage loan calculator

This project requires you to use mortgage loan calculations, embedding them in your code. You create an app that uses the loan amount, interest rate, and payment period to calculate the monthly payment. It allows the user to:

You can alter this app by using drop-down selectors for different amounts, which could make it easier to use for some and users. You could also include a gold box that changes to a specific color once the calculator has produced a value that exceeds the goal.

21. Quote of the day

The application you create in this project generates a quote of the day. The quote is drawn from a central repository of quotes that you enter, and when someone clicks a button, a new quote is brought up. The app is able to:

This app could easily be turned into a game by allowing the user to first generate a quote by clicking the button and then display the person who said it by clicking it again. This would give the individual or a friend the chance to try to guess who said each quote.

22. BMI calculator

Here, you will create a body mass index calculator. When a user enters their height and weight, your calculator will automatically output their body mass index. This app gives you the ability to:

You could also choose to add an option that allows the user to select the types of measurements they would like to enter, such as inches or feet instead of centimeters or pounds or stones instead of kilograms. This would also involve incorporating conversion factors so the BMI figures would still be accurate.

23. Weight conversion

This is a useful calculator that turns pounds into kilograms. The user enters the number of pounds they want to be converted, and the app generates the equivalent kilograms using a conversion factor that you embed in the code. The app’s key elements should be:

You can enhance the functioning of this app by including more conversions. For example, you could make it calculate centimeters to inches, feet to meters, or liquid ounces to milliliters. To do this, you would have to allow the user to select the type of conversion they would want ahead of time.

More JavaScript projects

It’s important to find a project that you feel is personally engaging. If none of the projects above interest you, you can choose from any of the ones below. It’s also a good idea to try to choose projects that present a significant challenge, just to make sure you’re always building on your skillset. Here are some more that you can have fun with:

Frequently Asked Questions

What projects can I do with JavaScript?

You can do nearly any kind of project that involves programming an application, but it’s typically best to start out with projects that focus on one or a few elements of an app for the sake of simplicity—and then increase the level of difficulty as you learn more.

How do I start a JavaScript project?

You can start by downloading a copy of a JavaScript program, such as Atom, and then you can use the source files linked to in the project descriptions in this article.

What projects can I do with HTML, CSS, and JavaScript?

With JavaScript, HTML, and CSS, you can literally create fully functional applications capable of everything from 3D gameplay to complex web app design. However, to work with or incorporate databases, you’d be better off learning SQL or another database-specific language.

Page Last Updated: April 2022

JavaScript students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.

Request a demo