Hey everyone. Welcome to today’s post. Today’s post is a compilation of 8 intermediate javascript projects. I have specifically targeted these javascript projects to intermediate javascript developers. I have included projects that will help the developers grasp new concepts and improve skills in a fun way.
If you are interested in watching the video tutorial rather than reading the blog post you can check out the video down below. Also, I post new tutorials and tips on my youtube channel every alternate day. So subscribe to my youtube channel to get access to these amazing resources.
Monster Maker:
In this project, the user can customize the monster the way he likes it. The customization comes with four options. The first one is to change the facial expressions. Next, we have a button to change the monster’s colour. Following the body colour, we have an option to change the horn’s colour. And Finally, we have tail colour customization.
Typing Test:
Next on this list, we have a typing test. This project generates a random test sentence on every window load event. The user has to click on the ‘Start Test’ button and start typing in the provided text area. The characters entered correctly are turned into green colour while wrong ones are turned into red.
The application shows two stats. The first is a countdown timer of 60seconds, and the second is the mistakes counter. For every mistake the user makes while typing, the mistake counter increase by one.
Other Tutorials You Might Like:
- Random Quote Generator | Javascript Project
- Roll The Dice Using HTML, CSS & Javascript
- Custom Music Player With Javascript
The typing test stops either when the user clicks on the ‘Stop test’ button or when the timer reaches 0. After the test ends, a result is displayed. The result consists of two stats first is the typing speed in wpm and the second is the accuracy in terms of percentage.
Pixel Art Maker:
Pixel art maker is a fun project. It works great on touch/ mouse devices. The user can create a grid of the desired size. Following this, the user can use various options to draw, erase and clear the grid. The user even has an option to change the colour of the pixels.
Tic Tac Toe Game:
This is a classic javascript project. I have commented on the code to help you understand and create the game.
Recipe App:
The Recipe app uses the MealDB API. The project consists of search input and a search button. The user enters the dish name of his choice into this input and hits the search button.
When the user clicks on the search button, it displays an image of the respective meal, its name, and the country of origin.
Along with this, we also show a list of ingredients along with the measure. Next to the ingredients, we have a ‘View Recipe’ button. When the user clicks on this button, a pop up opens up with the instructions to cook the meal.
Dictionary App:
The dictionary app consists of a search text field and a search button. The user has to enter the word in the text field and click on the search button. The result displays the word meaning, and word pronunciation with a pronunciation audio clip.
It also displays word usage for appropriate words. For words where an example cannot be provided, the word usage space is hidden.
Minion Eyes Following The Cursor:
This is an absolute fun project. The user simply moves his mouse cursor over the screen and the minion’s eyes follow the mouse.
To Do List App:
Here is a simple to-do list app. The user can add new items, delete them and mark them as completed.
I would love to hear from you guys. So if you have any queries or suggestions, drop them in the comments below.
Happy Coding!
