Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will take a look at the second part of 100 Javascript Projects with source code. In this tutorial, we will take a look at the next 30 projects in this series.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
The projects included in this video are:
Memory Game:
This is the classic memory card game. The player has to click on a card to flip and memorize the image on the card and find a matching card. We display a score and timer on the screen.
Image Comparison Slider:
We provide the user with a sliding arrow button. The user can move this button horizontally across the screen to compare two images.
Profile Card UI With Dynamic Theme Colors:
In this project, we create a profile card using CSS and provide the user with a bunch of buttons. Each button represents a colour. On clicking the button the theme of the profile card is changed to the corresponding colour.
RGB Color Slider:
We display three sliders on the screen. The sliders represent red, green and blue respectively. The user can move the thumb of these sliders to set the value for each of these colours. The output is displayed in RGB colour format.
Blob Maker:
Here we display a blob on the screen. We provide the user with options to change the height, width and border radius of the blob. This way the user can create his customized blob.
Budget App:
In this project, the user can set a budget amount. We provide input fields from where the user can enter the expense value and expense title. This app keeps a track of the total budget, expenses and balance.
Div Follows Mouse Cursor:
We create a div that follows the mouse cursor based on the current position of the mouse or touch.
Gradient Generator:
In this project, the user can create a custom gradient. The user can do so by choosing the colours and angles of his choice. The user can copy the generated CSS code to their clipboard.
Random Quote Generator:
We make use of an API to fetch the information. The user can generate a random quote by clicking on the ‘Generate Quote’ button provided on the screen.
Hangman Game:
The classic hangman game is where the user has to guess the word in a particular number of guesses.
3D Cube Image Slider:
In this project, we display the images on the four sides of the cube. We also provide two arrow buttons. One button to go to the previous side of the cube and one to move to the next side of the cube.
Random Password Generator:
This project comes with a button to generate a password, an input to enter the number of characters in the password and a button to randomize the password. The user can even copy the generated password to the clipboard.
Live Word Counter:
The user is provided with a text area to type text. We count the number of words while the user is typing in the given textarea.
Pixel Art Maker:
This is a fun project where the player can choose a colour and start drawing a picture pixel by pixel.
Analog Clock:
This is a simple analogue clock project.
Math Game:
In this game, we provide the player we a randomly generated equation. The equation consists of a blank. The player has to fill this blank with the appropriate operator or number to win the game.
Quiz App:
A multiple choice questions quiz app that comes with a timer.
Color The Parrot:
In this project, we create an illustration with CSS and provide buttons for the user to customize the colours of this illustration.
Scratch Card:
We create a card that consists of a code or text that is revealed when the user scratches the card using a mouse or touch.
Email Validation:
A simple code to validate the entered email address.
Days Between Two Dates Calculator:
This calculator calculates the difference in days between two dates. We provided data input for the user to enter these dates.
Cocktail App:
In this app, the user can search for the cocktail of his choice. We fetch data from an API and display ingredients and instructions to prepare the cocktail.
Flashcard App:
This is an intermediate-level project in which the user can generate, edit and delete flash cards.
Draggable Element:
A simple draggable div.
Recipe App:
We use API to fetch recipe and ingredients and display it to the user.
Minion Eyes Follow Mouse Cursor:
In this project, we create minion eyes using CSS. We then use Javascript to move these eyes based on the position of the mouse or touch.
Fullscreen Overlay Navigation:
A fullscreen navbar that comes with a button to toggle its visibility.
New Year Countdown:
A countdown to the new year. The countdown is displayed in HH:MM: SS format.
RGB-HEX Converter:
We provide the user with two input fields. The user can enter the value in RGB format and get it converted to HEX format or enter the value in HEX format and get it converted to RGB format.
Custom Music Player:
A custom music player where you can choose a song from the playlist, shuffle songs, and play/ pause songs. There are also buttons to play the next song or previous song.
NO CODES