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. :)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!