DEV Community

Nico Zerpa (he/him)
Nico Zerpa (he/him)

Posted on • Originally published at nicozerpa.com

10 beginner-friendly JavaScript projects

Programming is a skill and you need to practice if you want to become better at it. Creating your own projects is a fantastic way to practice your skill.

However, many beginners don't know exactly what projects to create. That's why I created this list of 10 projects so that you can start coding.

1. Coin Toss

For this project, you'll create a virtual coin that will display either "head" or "tails" randomly. Create a button "Toss the coin" that, well, tosses a coin 😅.

When the user presses that button, use the method Math.random() to determine whether to display "Heads" or "Tails" to the user.

2. Change background color (three inputs)

In this project, the user will be able to change the page background color. Create three numeric inputs with the labels red, green, and blue. Also, add a button with the text "Change background color".

The user should enter a number between 0 and 255 for the three inputs. And when they press the button, the background will change. It will take the red-green-blue values from what the user wrote.

3. World Clock

Create a text input and a submit button. There, the user should write the name of a time zone (Here's a list, look for the column "TZ database name").

When the user presses the button, you should display the user the date and time in that time zone. You'll probably use a Date object and its method toLocaleString.

4. Article table of contents

Pick up any article which has subtitles (like this one!) Copy the article and make sure that the subtitles have the <h2> HTML tag.

When the page loads, it should search for all the <h2> tags in the page and create the list of all the subtitles. Add that list at the top of the page.

5. Calculator

Create a basic calculator that can add, substract, multiply or divide numbers. Ideally, create the keys for the numbers and the operations.

6. Shopping cart

Create a list of products, each of them with an "Add to Cart" button. Then, add another button "View Cart" that hides the list of products and lists only what you have in the cart.

When you're viewing the cart contents, each item should have a "Remove from cart" button.

7. Pokedex

If you're a Pokémon fan, create a Pokedex that displays a picture, the Pokedex number (i.e. the ID), the type, and abilities of a Pokémon.

Create a text input where the user can write either the ID/National Pokedex number or lowercase name of a Pokémon.

Then, use the PokéAPI web service to get the information about the Pokémon and display the information on screen.

8. Actually build the To Do app

If you're learning a JavaScript framework which has a todo app in the documentation, try to replicate it yourself! You can also create it using Vanilla JavaScript, even though it might be a little harder.

9. Currency Converter

For this project, you can use one of these two web services: https://fixer.io/, https://exchangeratesapi.io/. These services are generally paid, but both have a free tier that you can use.

The user should be able to select the currency of origin and write the amount to convert. Add a second select to let the user choose the destination currency.

Add a button that calls the web services to convert the amount from the origin currency to the destination currency.

10. Clone your favorite web page/social network

Pick any website you like and try to replicate its basic functionality.


I have a Free JavaScript Newsletter with easy and actionable steps to level up your JavaScript skills. Subscribe here: https://nicozerpa.com/

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Image of Bright Data

Maintain Seamless Data Collection – No more rotating IPs or server bans.

Avoid detection with our dynamic IP solutions. Perfect for continuous data scraping without interruptions.

Avoid Detection

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay