100 Javascript Projects With Source Code | Part 1

Hey everyone. Welcome to today’s tutorial. This tutorial is a compilation of 100 Javascript Projects With Source Code. This is the first part of the series.

If you are interested in learning by watching a video tutorial rather than reading a blog post you can check out the video down below. Also, subscribe to my youtube channel where I post new tutorials every alternate day.

Let’s take a look at the projects included in this video:

To-Do List:

This project consists of an input field. The user can enter to-do list items through this input field. This app also comes with a feature to cross off the completed tasks by clicking on them. Another feature that this app consists of is deleting the list of items.

Product Filter And Search:

This project consists of a search box and a bunch of category buttons. The user can search products by entering the name in the search input field and clicking on the search button. Or the user can filter through the available items by clicking on the category button.

Double Range Slider:

A regular range slider consists of a slider track and slider thumb. Unlike a regular range slider, a double range slider consists of two thumbs. In this project, we create an input type range with two thumbs and display the value of each slider.

Roll The Dice:

This is a fun project where the user is provided with a – ‘Roll The Dice’ button. When the user clicks on this button, the dice on the screen roll randomly and their score is displayed.

Age Calculator:

Here the user is provided with a date input. The user has to enter their birthdate or any birthdate and this calculator will calculate the age in years, months and days.

Responsive Number Counting Animation:

This project is a count-up animation. It consists of 4 boxes with different numbers to count up to. These count-up animation boxes are responsive.

Highlight Searched Text:

In this project, we provided the user with a search box. The user can enter any word/part of the word they like to search and it will be highlighted in the paragraph below.

Number Guessing Game:

In the number guessing game, the user has to guess a number between 1 to 100. We provide the user with hints to help them guess the number. We maintain a track of numbers guessed and the number of guesses.

Stopwatch:

This is a classic stopwatch. It consists of a start button, a pause button and a reset button.

Responsive Image Slider:

The Image Slider consists of arrow navigation along with dot navigation. The user can manually move to the next or previous image by clicking on these buttons.

Rich Text Editor:

The rich text editor comes with a lot of options to edit and modify text. Some of these options include:

1. Text Formatters – Bold, Italic, Underline, Strikethrough.
2. List Options – Ordered List, Unordered list.
3. Undo and Redo Button
4. Add Link and Remove Link Button.
5. Alignment Option Buttons – Align Left, Align Right, Align Center, and Justify.
6. Headings Dropdown – H1 To H6
7. Fonts Family Dropdown – 6 Different Fonts
8. Font Size Dropdown – Sizes ranging from 1 to 7.
9. Options to change text colour and highlight colour.

Flip A Coin:

Here we provide the user with a coin image and button. When the user clicks on this – ‘Flip Coin’ button, the coin flips and randomly stops either heads or tails. We maintain a count for heads and tails.

Calculator:

This is a simple calculator project. This calculator can perform simple operations like addition, subtraction, multiplication and division. Along with this, it comes with a button to delete the last digit and a button to clear the whole screen.

Dictionary App:

In this app, we provided the user with a search box. The user can input a word to be searched. They use an API to search for this word. We then display the information fetched. This information includes the meaning of the word, its pronunciation, and its usage in a sentence. Also, we display a button that plays audio for the pronunciation of the corresponding word.

Temperature Converter:

This app converts temperature from celsius to Fahrenheit and from Fahrenheit to celsius.

Country Guide App:

In this app, the user is provided with a search box where they can search for the desired country name. We use API to get information about the corresponding country and display it to the user.

Typing Test:

The typing test app provides the user with a random sentence and a text area. The user has to type the text in the given text area. The typing test calculates the accuracy and tying speed at the end of the test.

Tip Calculator:

In the tip calculator app, the user has to enter the bill amount. Next, the user can set the tip percentage and the number of people. This app then calculates the tip per person and the total amount each person has to pay.

Rock Paper Scissor Game:

This is the classic rock paper scissor game.

Pokemon Card Generator:

In this project, we use pokeAPI to fetch information and generate random trump cards.

Easy Digital Clock:

This project teaches you to create a simple digital clock in 24-hour format.

Random Background Color On Click:

In this project, we provide the user with a button. When the user clicks on the button a random colour is generated and set as the background colour of the document body.

Password Strength Checker:

In this project, we provide the user with a password input field. As the user inputs, the password strength checker checks the strength of the password based on set criteria.

F.A.Q Accordion:

An accordion where you can for the F.A.Q section of your website.

Movie Guide App:

In this project, the user searches for a movie of his choice and we display the name, genre and plot of the corresponding movie. We do this by fetching information for an API.

Basic Image Editor:

This image editor comes with options to blur the image, and change the contrast and hue. You can also add a sepia filter to the image. Apart from this, you can also flip the image.

Random Joke Generator:

This project fetches jokes from an API and displays them every time the user clicks on the ‘random joke’ button.

Limit Character In Input Field:

In this project, we display a character count below the textarea. When the user enters characters exceeding the character limit, a red border is displayed around the text area.

BMI Calculator:

This calculator calculates the user’s BMI based on the user’s height and weight. We provide range sliders for the user to enter their height and weight.

Tic Tac Toe:

This is the classic Tic Tac Toe or the ‘X’ and ‘O’ game.