Want to learn JavaScript by developing simple projects?
Do you want to build mini-projects in JavaScript?
What can a beginner do in order to progress in JavaScript?
Or do you want to build a portfolio but don’t have a project idea?
If these questions keep popping up in your mind, then you’ve come to the right place. In this blog article, I’ll propose 11 solid JavaScript project ideas for beginners.
In order to grow as a JavaScript developer, you must practice by completing projects. It’s the best way to improve at coding, especially if you’re a beginner. In addition, these projects will constitute your portfolio which will expose you to more opportunities as a JS developer.
In this article, I give examples of practical exercises for all levels. The first ones are aimed at beginners who want to learn JavaScript and are therefore easy to do. We will quickly level up on the last examples of our mini projects.
By programming one of these exercises in JavaScript, you will be able to:
- Show concrete projects in your portfolio
- Manipulate and input data (using a keyboard, or mouse) and output data (using a screen)
- Build simple user interfaces on the web using HTML
Let’s take a look at some sample projects and exercises for JavaScript beginners.
Related: 10 best JavaScript libraries and frameworks.
1. Developing a TODO list in JavaScript
A TODO list is a tremendous first mini-project for data entry and display.
By making a todo list, you will learn, for example:
- How to manage and display different elements according to their state
- How to create, retrieve, modify, and delete objects in JavaScript
- How to go further with local data permanence by exploring
localStorage
A TODO list is a project that will often be used as an example when you learn frameworks or libraries such as react, react-native, vue.js, angular.js and others.
Doing this project in Vanilla JavaScript and HTML, therefore, makes a lot of sense and will facilitate your learning in the future.
2. Develop a Quote Generator in JavaScript
Does creating a mini project that randomly gives quotes from your favorite rapper, author, or personality sound fun? So, take the opportunity to familiarize yourself with arrays and math.random() function in JavaScript by creating a quote generator.
- At first, you will have to collect the desired quotes, try to do this intelligently by scraping the data.
- Then you will have to put these quotes in an array in order to be able to exploit them.
- Eventually, you’ll build a UI to display content randomly.
3. Develop a BMI Calculator in JavaScript
Building a little calculator can also be a good exercise for JavaScript beginners. The formula for calculating BMI is simple:
const BMI = weight / (height * height);Where the weight is in kg, and the height is in m.
All you have to do is build the data entry form and an HTML user interface to display the result.
To go further, you can also display the Body Mass Index category in which your user is.
4. Develop a Currency Converter in JavaScript
In the same genre as the BMI calculator, the currency converter is a good and very simple exercise for the base of your GitHub portfolio and to get your hands on JS.
You’ll need the current price, which you can hard-key into your code or retrieve with an API. Then, with the amount entered in input by the user, you will display the result of your calculation to obtain the conversion of the chosen currency.
5. Developing a Calculator in JavaScript
Coding a good old calculator is a great practice exercise to improve your JavaScript skills. You can have fun developing the GUI in HTML and CSS, then add intelligence with JavaScript.
Start with a few simple operators and basic buttons:
- Addition
- Subtraction
- Multiplication
- And division
Then you can consider degrees, square roots, and all the other operations you want.
A complete, well-rounded calculator is a great JavaScript project to progress with.
6. Develop a Countdown in JavaScript
Manipulating dates is a skill that will come in handy on a daily basis as a JavaScript or web developer. Although some javascript libraries moment.js may be of help to us, you will need to use dates in your different projects.
That’s why making a small stopwatch, countdown, or clock in JS will familiarize you with JavaScript’s Date API in addition to timeouts and intervals.
const startMinutes = 5;
let time = startMinutes * 60;
setInterval(() => {
const minutes = Math.floor(time / 60)
let secondes = temps % 60
secondes = secondes < 10 ? "0" + secondes : secondes
console.log(`${minutes}:${secondes}`)
time = time <= 0 ? 0 : time - 1
}, 1000);Want a concrete countdown example in JavaScript and HTML?
You will find one in my blog How to make a timer in JavaScript, code included!
7. Develop a Word Counter in JavaScript
A word counter lets you know how many words are in a text provided by the user.
This feature is very handy when you want to write an article with a certain minimum word count and sites even exist for the sole purpose of telling you how many words your text contains.
This project will teach you how to manipulate strings and how to use a counter.
Broadly, you will need:
- a form for the user to enter their text
- a button to validate the text
- the result of the number of words present in the text
To go further, you can also give the number of letters, the number of lines, the number of the same occurrence, and many other things.
8. Develop a Rock Paper Scissors Game in JavaScript
Did you know that scissors are the best choice in the rock-paper-scissors game?
No?
In order to prove me wrong, you will need to code your own game.
The computer will play a random hand among the 3 combinations and your objective will be to beat it.
Three HTML buttons and the use of Math.random()will do.
Furthermore, you can add a score counter, add intelligence to your artificial intelligence vote (rather than simple randomness) and have two computers play with each other.
9. Develop a YouTube clone in JavaScript
It is very easy to embed a video in your HTML pages, you may have already seen it in my articles.
But it is also possible to use the YouTube API to perform searches and present the results in HTML.
This project may be a little more complicated than the others, but it will be perfect for understanding how APIs work and how to perform queries.
10. Develop a Google Maps clone in JavaScript
In the same spirit as the YouTube clone, Google provides a simple API to manipulate Google Maps.
You can have fun displaying what you want on a map based on a JavaScript object array for example.
11. Develop a Bot in JavaScript
Another way to learn JavaScript with small, simple projects is to familiarize yourself with libraries for making bots.
You can easily make a bot that performs very simple tasks in ten lines of code.
For example, I made a Discord Bot in JavaScript with the library discord.js which you can build on to build a more complex bot.
Go further and progress even more with other projects in JavaScript
I hope I have inspired you to create one or more of these projects in JavaScript.
The difference between having no projects at all in your portfolio and having a few small projects is huge.
Practicing and posting projects in your spare time is proof that you have the right mindset to learn how to program and that’s exactly what hiring companies want to see!