Top 25+ Javascript Projects for Beginners with Source Code Github [2024 Latest Project]
Tags: css, html, javascript
Published: 2024-02-17 13:01:13

---
title: Top 25+ Javascript Projects for Beginners with Source Code Github [2024 Latest Project]
published: true
tags: CSS,HTML,Javascript,JS
canonical_url: https://pratikpathak.com/top-javascript-projects-with-source-code-github/
---

Hey Everyone today I have curated a list of 25+ javascript projects for beginners with source code. All these Projects are updated and available on my GitHub.

You can check out my GitHub for a more curated list, projects, and much more. If you want to contribute feel free to open a Pull Request.

Without any further a do let’s start 🏃‍♂️

The 25+ Javascript Projects for beginners with source code are –

## Table of Contents

1. [iOS Calculator App](#1-ios-calculator-app)
2. [Travel India](#2-travel-india)
3. [Age Prediction Tfjs](#3-age-prediction-tfjs)
4. [Connect ME](#4-connect-me)
5. [Weather App](#5-weather-app)
6. [Digital Clock](#6-digital-clock)
7. [FlashLight Effect](#7-flashlight-effect)
8. [Puzzle Game](#8-puzzle-game)
9. [QR Code](#9-qr-code)
10. [Rich Text Editor](#10-rich-text-editor)
11. [Background Color Switcher](#11-background-color-switcher)
12. [Image Slider](#12-image-slider)
13. [Analogue Clock](#13-analogue-clock)
14. [Brick Breaker](#14-brick-breaker)
15. [Balloon Pop](#15-balloon-pop)
16. [Interactive Quiz](#16-interactive-quiz)
17. [Math Addition](#17-math-addition)
18. [Guess The Number](#18-guess-the-number)
19. [RSS News Feed](#19-rss-news-feed)
20. [Session Storage To-Do List](#20-session-storage-to-do-list)
21. [Whack a Mole](#21-whack-a-mole)
22. [Word Counter](#22-word-counter)
23. [Weight Conversion](#23-weight-conversion)
24. [Expense Calculator](#24-expense-calculator)
25. [Random Quote](#25-random-quote)
26. [Toss a Coin](#26-toss-a-coin)

## 1. iOS Calculator App

This is the replica of the original iOS calculator. It is built using HTML, CSS, and Javascript. This project contains the basic functionality of a calculator like Addition, Multiplication, Subtraction, and Division.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/01-iOS-Calculator/) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

Technologies Used: JavaScript, HTML, CSS

![iOS calculator](https://pratikpathak.com/wp-content/uploads/2024/02/image.png)
_iOS Calculator JavaScript_

## 2. Travel India

Travel India is a Project which focuses on India’s top 4 most visited tourist places. This project has a very beautiful UI controlled by Javascript. The Navigation is done by using Javascript. It also has a very beautiful Navbar.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/02-Travel-India) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Travel India Project](https://pratikpathak.com/wp-content/uploads/2024/02/image-1-1024x495.png)
_Travel India_

## 3. Age Prediction Tfjs

Age prediction app uses the machine learning model of opencv and tensorflow JS to predict the Age of a person using face recognition. It is solely built by using an open-source model of TFjs.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/03-age-prediction-tfjs) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Age Prediction Tfjs](https://pratikpathak.com/wp-content/uploads/2024/02/Untitled-design-1024x576.jpg)
_Age Prediction Tfjs_

## 4. Connect ME

This is the clone of [LinkTr.ee](https://linktr.ee/), those who don’t want to use LinkTr.ee can use this static application to share links with the audience. It is built using HTML, CSS, JS, and a little bit of node.js.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/04-connect-me) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![image 2](https://pratikpathak.com/wp-content/uploads/2024/02/image-2-1024x576.png)

## 5. Weather App

This Project tells you the weather of a city. You just need to type the name of the city and click on fetch and it will the weather of the city. For the weather, it utilizes [OpenWeatherMap](https://home.openweathermap.org/api_keys)API.

Check out the full code on GitHub.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/05-Weather-App) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

Technologies Used: Javascript, HTML, CSS, OpenWeatherMap API

![Weather App using JS](https://pratikpathak.com/wp-content/uploads/2024/02/image-3.png)
_Weather App using JS_

Want to add your Javascript Project? Feel free to contribute, open a Pull Request [Contribute](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

[Docker Run Command example the ultimate cheatsheet](https://pratikpathak.com/docker-run-command-cheatsheet/)

## 6. Digital Clock

This is a digital clock that shows the time along with the Date. It uses your system time to fetch the current time and displays it.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/06-Digital-Clock) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

Technologies Used: Javascript, HTML, CSS

![Digital Clock javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-4-1024x418.png)
_Digital Clock javascript_

## 7. FlashLight Effect

It is a simple application for mouse tracking. There is a dark web page with some text in it and wherever the mouse goes it illuminates its surrounding area. Beautifully built using Vanilla JS.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/07-FlashLight-Effect) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![FlashLight Effect Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-5-1024x445.png)
_FlashLight Effect Javascript_

## 8. Puzzle Game

A Puzzle Game is a project that contains misplaced pieces of an image, You have to rearrange the missing pieces so that they become the same as the right side image.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/08-Puzzle-Game) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

Technologies Used: Javascript, HTML, CSS

![Puzzle Game Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-6-1024x444.png)
_Puzzle Game Javascript_

## 9. QR Code

A simple application to make QR code as well as it can read it, with a beautiful UI. Works on a local server. Created by Using QrCode.js package.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/09-Qr-Code) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

Technologies Used: QrCode.js, Javascript, HTML, CSS

![QR Code Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-7-1024x490.png)
_QR Code Javascript_

## 10. Rich Text Editor

Have you ever used Microsoft Word? and wondered how you can make one? A rich text editor is a Word-like editor with contains a ribbon that has all the functionality like Bold, Italic, Text Formatting, etc.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/10-Rich-Text-Editor) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Rich Text Editor Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-8-1024x728.png)
_Rich Text Editor Javascript_

Want to add your Javascript Project? Feel free to contribute, open a Pull Request [Contribute](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

## 11. Background Color Switcher

The Background of the application will change based on the user’s color selection. The user has two clicks on his desired color and the whole background color will change.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/11-Background%20Color%20Switcher) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

Technologies Used: Javascript, HTML, CSS, DOM Manipulation

![Background Color Switcher Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-9.png)
_Background Color Switcher Javascript_

## 12. Image Slider

An Image Carousel made by using Javascript. It’s a simple application that shows all the images when the user clicks on the next button.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/12-Image-Slider) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Image Slider Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-10-1024x647.png)
_Image Slider Javascript_

## 13. Analogue Clock

An analog clock that uses JavaScript and the Canvas Web API

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/13-Analogue-Clock) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Analogue Clock Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-11-1024x635.png)
_Analogue Clock Javascript_

## 14. Brick Breaker

A brick breaker game. Made by using canvas API.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/14-Brick-Breaker) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![image 12](https://pratikpathak.com/wp-content/uploads/2024/02/image-12-1024x582.png)
_Brick Breaker Javascript_

## 15. Balloon Pop

Balloon Pop game. Move your mouse over the balloon to pop it. Pop all the balloons to finish the game.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/15-Balloon-Pop) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Brick Breaker Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-13-1024x684.png)
_Brick Breaker Javascript_

Want to add your Javascript Project? Feel free to contribute, open a Pull Request [Contribute](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

## 16. Interactive Quiz

A simple web-based quiz about baby animal names. The HTML file sets up the structure of the quiz, including a container for the quiz, a heading, a section for the question, a list for multiple-choice answers, a message area, a result area, and a button to proceed to the next question.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/16-Interactive-Quiz) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Quiz APP Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-14-1024x470.png)
_Quiz APP Javascript_

## 17. Math Addition

A simple web-based arithmetic game, specifically designed for addition operations. The HTML file sets up the structure of the game, which includes a canvas area containing two numbers and an addition sign. The user is expected to input their guess for the sum of the two numbers in an input field. A button is provided to check the user’s answer.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/17-Math-Addition) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Math Addition Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-15.png)
_Math Addition Javascript_

## 18. Guess The Number

This project is a number guessing game where the user attempts to guess a random number between 1 and 100 within 10 tries. The game’s interface, styled with CSS and powered by JavaScript, provides feedback on previous guesses and the number of remaining attempts.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/18-Guess-The-Number) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Guess The Number Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-16-1024x664.png)
_Guess The Number Javascript_

## 19. RSS News Feed

This project is a simple RSS News Feed reader. The HTML file sets up the structure of the application, which includes a heading with an RSS icon and a title that will display the name of the selected news source (defaulted to “PratikPathak.com”). There’s also a date section and a main content area where the news feed will be displayed in a list format.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/19-RSS-News-Feed) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![RSS News Feed Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-25-1024x484.png)
_RSS News Feed Javascript_

## 20. Session Storage To-Do List

This project is a simple Todo List application. The HTML file sets up the structure of the application, which includes a heading, an input field for entering tasks, and a button for adding tasks. There’s also a dedicated area where the tasks will be displayed.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/20-SessionStorage-TodoList) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Session Storage To-Do List Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-18-1024x552.png)
_Session Storage To-Do List Javascript_

Want to add your Javascript Project? Feel free to contribute, open a Pull Request [Contribute](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

## 21. Whack a Mole

This project is a web-based game called “Whack-a-Mole”. The HTML structure includes a score display, a start button, and a game area with six “holes”, each containing a “mole”. The game’s visual styling is linked via a CSS file named “styles.css”, and the functionality is provided by a JavaScript file named “script.js”. The user is expected to “whack” the moles by clicking on them as they randomly appear from the holes.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/21-Whack-a-Mole) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![image 19](https://pratikpathak.com/wp-content/uploads/2024/02/image-19-1024x504.png)
_Whack a Mole Javascript_

## 22. Word Counter

This project is a simple web-based Word Length Calculator. The HTML file sets up the structure of the application, which includes a heading, an input field for entering a word, a display area for the output, and a button to trigger the calculation.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/22-Word-Count) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Word Counter Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-20-1024x563.png)
_Word Counter Javascript_

## 23. Weight Conversion

This project is a simple web-based Weight Conversion Tool. The HTML file sets up the structure of the application, which includes a form with a heading, an input field for entering a weight in pounds, and a display area for the converted weight in kilograms.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/23-Weight-Conversion) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Weight Conversion Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-21.png)
_Weight Conversion Javascript_

## 24. Expense Calculator

This project is a Budget App, a web-based application that allows users to manage their budget and expenses. The HTML structure includes sections for entering a budget, displaying the current budget, expenses, and balance, and entering expenses.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/24-Expense-Calculator) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Expense Calculator Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-22-1024x421.png)
_Expense Calculator Javascript_

## 25. Random Quote

This project is a simple web-based “Quote of the Day” application. The HTML file sets up the structure of the application, which includes a heading, a paragraph instructing the user to press a button to receive a random quote, a button that triggers the quote generation, and two paragraphs where the quote and its author will be displayed.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/25-Random-Quote) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Random Quote javascript
](https://pratikpathak.com/wp-content/uploads/2024/02/image-23-1024x427.png)
_Random Quote javascript_

## 26. Toss a Coin

This project is a simple web-based Coin Toss game. The HTML file sets up the structure of the game, which includes a title, a brief description, an image of a coin, and a button to toss the coin.

[Live Preview](https://zpratikpathak.github.io/25-Javascript-Projects-for-beginner/26-Toss-a-coin) | [Source Code](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

![Toss a Coin Javascript](https://pratikpathak.com/wp-content/uploads/2024/02/image-24.png)
_Toss a Coin Javascript_

Want to add your Javascript Project? Feel free to contribute, open a Pull Request [Contribute](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)

## Conclusion

This is the list of Updated 25+ Javascript Projects for beginners. Each and every project contains at least three files `index.html`, `style.css` and `script.js`. If you want to add your project, feel free to open a Pull Request on [GitHub](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner).