9 Project Ideas for Beginners JavaScript Developers

When learning a new language it is important to apply the knowledge. Sometimes you are stuck not knowing how to apply the new found knowledge. In this article I will suggest you 9 ideas on beginner level for you to implement in JavaScript. The skill you will train is not only JavaScript but also HTML and CSS.

At the end of each idea I have also added an “advance” note that takes things to a more advance level if any of you feel that the idea is a little bit too easy. Hope you have fun implementing them. :)

Photo by Skye Studios on Unsplash

1. Todo List

The infamous Todo List. This is probably the most app people build when learning a new language (after the Hello-World program, of course). But there is a reason why, because implementing this app you learn how to implement the basics of UI implementation such as buttons, input fields, textfield, etc. and CRUD operations.

Make a todo list that can add new items and remove items. Removed items should be deleted completely and not be shown anymore. The items should be displayed as a list. The UI should have a button for adding and removing an item. Also there should a area where to display the todo items.

Photo by Lauren Sauder on Unsplash

Advance: Make the items persistent, i.e. even if you refresh the page, the items should not be removed. Add a feature to reorder the items. Removed items should not be deleted but instead crossed out.

2. Photo Gallery

A gallery is a nice add to a lot of websites. And it is not as easy as you might think. Implement a photo gallery that can upload a picture one at a time.

Photo by Mick Haupt on Unsplash

Advance: Implement a photo gallery that can upload a picture and order it so it optimally fit on the page, meaning the empty space between each pictures should be minimal.

3. Progress Bar

A progress bar indicates the progress of a certain operation. Implement a progress that takes a percentage number and draws the progress bar accordingly. Add some fancy styling to it.

https://res.cloudinary.com/practicaldev

Advance: Implement a progress bar that indicates the scroll progress on a given website, i.e. if the reader is on top of a webpage the progress bar should be at state 0%. If the user has scrolled to the very bottom, the progress bar should be at state 100%. It should display the progress as percentage on the progress bar.

4. Roman to Arabic number converter

Create a program that converts Roman numbers to Arabic numbers. For this program, you don’t need to implement an UI.

Photo by Shalone Cason on Unsplash

Advance: Go more advance by creating an appealing UI with an input field and a button that converts one number to the other. Also add another button that converts an Arabic number to a Roman number. If you want to you can add Unit Tests to it. If you don’t know what Unit Tests are read it up.

5. Calculator

Implement a calculator that is able to perform basic mathematical operations, i.e. plus, subtraction, multiplication, division. Also being able to calculate the square roots and the power of a number. Do it without using the math library.

The calculator should have an input field where you can put in your numbers. Keep in mind how to handle erroneous input, e.g. division by zero or if the input is not a number but a letter or special character. Display the error as an alert.

Photo by Clayton Robbins on Unsplash

Advance: Add another button that enables the user to switch to a scientific calculator, where you can calculate sin, cos, tan, etc.

6. Form validation

Expand on the calculator project by adding a form validation. Create a form validation for the input field of the calculator. Display an error message for any erroneous input or output.

An erroneous input in our calculator example could be letters or special characters instead of numbers. An erroneous output could be division by zero.

Photo by Sigmund on Unsplash

Advance: Create form validation for another project that checks if a word qualifies for a valid password (a valid password shall be a word that is at least 8 characters long, contains at least one letter, one number, and a special character).

7. Memory card game

On a grid of 4 x 3 display quadratic cards. The cards should have to sites: One with any background image. The other with a value, e.g. a number. Each card has a pair. In the beginning all cards should show the site with the background image. If you click on one of the cards, it will open and display the value. If you click on another card that displays different values, then the card should be closed again. However, if you click on a card that displays the same value, then these card should stay open.

Photo by Soragrit Wongsa on Unsplash

Advance: Expand on the game by adding a point system and a timer. Count the number of trials that it takes until the game ends. At the end of the game, i.e. when all cards are opened, show a high score list with the number of trials on the one side and the time on the other side.

8. Pong game

Create the famous pong game where you have two players, left and right, represented by a stick respectively, a ball, a game field, and a point table. The ball should be bounced back whenever it either hits the players or the borders of the game field. When the ball reaches the border of the right field, the left player gets a point and vice versa. The game should end if one of the player reaches 10 points.

Photo by Feelfarbig Magazine on Unsplash

Advance: Create a 3D version of it and add an input field where the players can input their name. Also let the players decide at which points the game should end. Create a high score list that persistently save the results along with the player name and the date of the game.

9. Analog clock

Implement an analog clock with a hand for hours, minutes, and seconds that displays the current time. Style it the way you want but make it responsive.

Photo by Tony Mucci on Unsplash

Advance: Try to implement it so the hand will move “naturally”. Depending on how you implemented it the hand for displaying the seconds will glitch once the reach it full minute and when you reload it. How would you implement it to remove this glitch effect?

Do you know more beginner friendly project? Let me know and comment below. If you have implemented them let me know and post a link to your project. I’m super interested in your approach.

Enjoyed this article? If so, get more similar content by reading the rest of the blog!