45 JavaScript Projects to Test Your Skills

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.

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:

• Clickable buttons that allow the user to navigate forward or backward through the images
• The buttons should change color when the cursor covers over them, indicating they’re ready to be clicked
• A border surrounding the interface to separate it from other content
• The ability to cycle through back to the first image after the user has gone to the final image

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:

• Display a slim sample of the image, allowing several to fit on your screen at once
• Expand the image to its full view after the user clicks it
• Shrink the image back to its original slim view when the user goes to another image

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:

• A central box users click to cause the colors to change
• Several different color options, such as red, indigo, purple, yellow, and green
• Random color sequences
• Text within the click box, which should have rounded edges

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:

• A button with text in the middle that changes the color when clicked
• The name of each hex color that appears, positioned above the button
• A wide variety of hex colors that appear on the screen

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:

• Change the number, up or down, depending on which button gets clicked
•  Display the number in the middle of the screen
• Show a box that contains the clickable features and the numbers
• Display a background on which the digits, words, and box sit

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:

• Show the customer name and an image that goes along with it
• The number of stars the customer rated the service
• A snippet showing the customer’s comments
• Left and right arrows that allow the user to scroll between comments

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:

• Show the user a landing page with an appropriate image, along with text welcoming them to the site
• A button that leads the user to a selection of items
• Each item should have information underneath it, such as how much it costs
• When you hover over the items, they can zoom in slightly to provide a closer view
• You should have a search bar, as well as categories so users can specify which items they want

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:

• Has fields for username, email, password, and password confirmation
• Allows the user to click a button that submits their information
• Stores the user’s information so it can be validated by an access management system

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:

• Perform basic arithmetic functions
• Have easy-to-read, clickable numbers, from 0 to 9
• Allow users to enter decimal points
• Incorporate a Clear button that erases whatever function or number was last entered
• Display the entire equation as it’s typed, such as “4+3.”

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:

• An up and down arrow you can use to adjust the amount of the bill in penny increments
• Similar up and down arrows to adjust the number of people sharing the bill
• A drop-down menu to allow you to select the quality of service
• Values associated with each level of service, each one designating how much the tip will be
•  A button that you click to calculate the tip

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:

• Display a shopping cart button when the user hovers over the image
• Keep the shopping cart but in small enough so that it doesn’t cover over too much of the item’s image
• Automatically add the price of the item to the shopping carts calculation function
• Display the number of items in the shopping cart, as well as the total cost at the top of the screen

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:

• A text entry box that allows you to type in a set number of characters
• A submit button that sends whatever you type to the overall list of items
• The ability to clear the list of items if the user wants to start over
• The option to submit an item by either clicking on the submit button or hitting the return key
• Trash buttons next to items on the list, allowing you to delete them one by one

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:

• Enter their information, as well as that of the course
• See the name of the course and its teacher at the bottom of the screen
• Submit the information to a database that can be used to reproduce it later

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:

• A button that allows you to click it and add a question and an answer
• A Save button that submits the question and answer to your “deck” of flashcards
• A feature that shows the completed card after it has been saved but does not show the answer
• An option to edit the card or delete it

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:

• Allow the user to enter expenses and how much they cost
• Automatically add up the total amount of expenses
• Display the impact the running total of expenses has on the budget
• Show how much money is left over

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:

• Display a joke each time a user clicks on a button.
• If the joke has a question followed by an answer, the user should be able to prompt the app to display them one at a time.
• The jokes should appear randomly, as opposed to in order.

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:

• A button the user clicks to generate a person, providing information like their name, phone number, and email
• A picture that changes each time you click the button, and that matches the apparent gender of the individual
• A wide variety of images so the same ones don’t come up again and again

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:

• A fully functional clock that displays the local time
• A second hand that moves in time with each passing second, as well as minute in our hands that move proportionately as well
• A border around the clock featuring details that make it look somewhat realistic

To up the level of difficulty, you could create a sweeping second hand by having it move in smaller increments, such as every 10^th 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:

• A field where a temperature in Kelvin can be entered
• Charts shaped like thermometers that move to reflect the different temps entered
• An output that clearly displays the converted temperature

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:

• Specify a loan amount using up and down arrows
• Type in an interest rate
• Select the number of months they have to pay off the loan with up-and-down arrows
• See how the monthly payment changes as they enter in different figures

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:

• Randomly choose a quote and display the person who said it
• Change the color of the quote generation button when the cursor hovers over it

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:

• Input your height and weight in centimeters and kilograms
• Calculate your body mass index by clicking a button
• See whether your body mass index is too high or too low by comparing it to numbers in different ranges

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:

• A text box that enables you to enter a weight in pounds
• An output field that shows your weight in kilograms after you enter your weight in pounds and press return
• A feature that automatically resets the fields to blank after a certain amount of time

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:

• Background color changer
• Brick-breaking game
• Digital clock
• Countdown to an event
• Word counter
• Contact form
• What day is it?
• Change the color behind text
• Addition game
• Interactive quiz
• Rock paper scissors game
• Countdown timer
• Balloon pop game
• RSS newsfeed
• Guess the right number
• Turn on the light
• Height conversion app
• Whack-a-mole
• Notes app
• To-do list
• Hangman game
• Recipe app
• Bill payment calculator
• Coin toss game
• Rock, paper, scissors
• Alphabetical organizer
• Tic tac toe game

---

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.