10 JavaScript projects for absolute beginners.
If you are a complete beginner with just a few days of learning experience then this blog is for you. Here I will discuss about 10 projects that you can use to understand the basic concepts more clearly. These projects may seem small to many of you. But by building these projects of your own you will have clear idea of the basic concepts.
- Changing background color: In this project you will have a button. Whenever you click on it the background color will change.
- BMI calculator: If you don’t know what BMI is then google it. In this project you will have two input fields. One for your height, and one for your weight. You can have another input field for your name also. Then the program will take the inputs, calculate the BMI and then show the result mentioning your name.
- Tip calculator: Suppose you go to a restaurant. When the bill comes you have to pay the bill leaving a tip for the waiter. It may be 5% or whatever. take the bill amount and the percent as input and calculate the tip and total money you have to pay.
- Random number generator: In this case you will have a button. Whenever someone clicks on it, a random number will be shown on the display.
- Date and Time: In this project you will have to display the current date and time.
- Background color changing: Again you have to change the color. But this time you will have multiple buttons mentioning the mane of the colors. If you click on the button the background color will change to that specific color.
- Convert your age into days: In this project you have to take your birthday as input. The the program will convert those years, months and weeks into days and display the result.
- Count: Suppose you have a number showing in the display. Then you have Two buttons. Add and Minus. If you press add then one will be added to your displayed number and show the result. If you press minus the the reverse will happen.
- Light switching : Take the image of a bulb (two actually) . If you tap on a bulb that was off then it will light up. If you tap on a bulb that was already on then it will turn off.
- Calculator: Now it’s time to put everything together. Make a simple calculator. It will take numbers and operators as inputs and show the result.
These were the basic projects for you. if you can complete these properly then you have completed the basics of JavaScript. Now for a bonus project.
Pin matcher: Here there will be two sections. In the left side there will be a display and a button. When you press the button, a 4 digit number will be shown on the display. Then on the right side there will be a display and a number pad. you will have to give the exact number as show earlier. If both of the numbers match, then an alert will pop up congratulating you. If it doesn’t match the the alert will tell you to try again.
Please use your HTML and CSS skills to style the projects. Not only the will look good but also give you satisfaction.
