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: fixer.io, 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: nicozerpa.com