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
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.
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.
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
9. Currency Converter
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.