- The language is case-sensitive.
3. Hex Color Application
5. Tip Calculator
6. Countdown Timer
It is more challenging than it seems to construct a basic timer. Though it is simple to use the same setInterval technique as in the digital clock project in order to display the correct time. It turns out that in this instance the technique is ineffective. For this project, we create variables to store different time-related data, such as when the time started, when it stopped, and how long the time was halted. Without these variables and the computations we do with them, our digital clock would be unable to show the time that has passed.
7. Todo List
You can create a simple to-do list that you can use for managing your daily tasks with ease. Let’s use our grocery list to go supermarket shopping. You may keep a list of the things you need to buy using this wonderful software; you only need to add the items. You may also remove any unnecessary entries from your list.
8. BMI Calculator
You can create BMI Calculator for all the fitness freaks out there. The BMI Calculator takes your height and weight as input and gives your BMI (Body Mass Index) as an output. BMI is a figure derived from a person’s height and weight. We will need the user’s input (height and weight), which will be saved in the height and weight variable for subsequent computation, in order to determine BMI. We shall simply divide the weight in kilos by the square of the height to arrive at the computation. It will now carry out the appropriate if-else statement in accordance with the BMI determined. We also look to see whether the user clicks the submit button without providing any data; if so, we publish the user’s height or weight. By using HTML, we can provide the appropriate structure, input options, and submit button.
9. Happy Bouncing Balls
11. Guess The Number
12. Whack-a-mole game
Everyone has probably played this game at least once in their lifetime. A typical Whack-A-Mole machine includes a large, plush black mallet and a waist-level cabinet with a play area and a display screen. Small plastic moles that randomly appear are put into five holes on the top of the play area. Points are awarded for hitting each mole as it emerges. The quicker the response, the higher the score.
- A function that generates a random length of time for the mole to peep.
- A function that selects a random hole for the mole to peep from.
- Using the two functions above, create a function to make the mole emerge out of the random hole.
- A start-up function for the game.
13. Rock Paper Scissors game
14. Real-time Weather app
15. Movie App
16. Real-Time Chat Application
Why don’t we create our own chat program? A complete real-time chat application will be created. We’ll use React on the front end and NodeJS with the Socket.io web socket library on the back end. By the time you finish this project, you’ll understand how to send and receive messages using web sockets and Socket.io to build any real-time application. The main key takeaway from this project is that ChatEngine.IO handles the entire backend of this fantastic web app.
So you don’t have to worry about handling the API requests and validations at all. Well, let’s talk about this awesome project. Here, you can create as many users as you want for your community. You can provide them with their login details and allow them to join your chat group. Not only this, but the admin can also remove the user if he/she wants to. The design is simple and very much easy to use.
17. File Sharing App
18. Instagram Clone
Instagram is a well-known social networking platform for sharing pictures. After doing this task, you will be able to replicate Instagram exactly. There is a problem, though. Users should be able to take advantage of features like to those on Instagram. likes, tagging, and image posting, for instance.
This app features all the latest tools and practices in web development-
- Node JS — A web framework for Node JS
- Postgres — A cross-platform and open-source document-oriented database
- Redis — A platform for caching
- JWT — A library for authentication of users
- Context — A state handler
19. Expense Manager Application
This react application has one very handy feature i.e. you can use voice command for managing your entire expenses. The entire concept of this project relies on this voice command feature. You can create your day-to-day expense without any difficulties. You also, do not have to worry write it down manually. All you can do is simply hold or press the mic button and say your command. It allows the user to specifically select expense categories. On the basis of the category you select, the app will automatically perform the necessary task for you. Also, you can delete your expenses at ease.
The UI is simple and interactive for any kind of user. Since this project uses Material UI for its component designing, you can also learn about the material UI. Presenting a new cost tracker application in React project, which offers a user panel with important features to follow up on, as well as a knowledgeable resource for learning reasons.