Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • GfG 160: Daily DSA
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • JS Tutorial
  • JS Exercise
  • JS Interview Questions
  • JS Array
  • JS String
  • JS Object
  • JS Operator
  • JS Date
  • JS Error
  • JS Projects
  • JS Set
  • JS Map
  • JS RegExp
  • JS Math
  • JS Number
  • JS Boolean
  • JS Examples
  • JS Free JS Course
  • JS A to Z Guide
  • JS Formatter
Open In App
Next Article:
10 Best JavaScript Project Ideas For Beginners in 2025
Next article icon

Top 95+ Javascript Projects For 2025

Last Updated : 26 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

JavaScript is a lightweight, cross-platform programming language that powers dynamic and interactive web content. From real-time updates to interactive maps and animations, JavaScript brings web pages to life.

Here, we provided 95+ JavaScript projects with source code and ideas to provide hands-on experience for both beginners and professionals. Whether you’re a student enhancing your resume or a professional advancing your career these projects will help you to gain the real world knowledge of Frontend Development and Web Development.

95+ JavaScript Projects With Source Code - 2025

These JavaScript projects have been created using HTML, CSS, and JavaScript. HTML and CSS were used to design the user interface, while JavaScript was utilized to add functionality to the projects. Also, this JS Projects guide is categorized based on their level of difficulty, starting from basic JavaScript projects.

Project Preview: 5 Popular Project Out of 95+ Projects


Here, 95+ JavaScript Projects With Source Code – Categorized by Skill Level:

Sr. No.

Projects

Level

1Price Range Slider with Min-Max Input

Beginner

2Lorem Ipsum Generator

Beginner

3Data Export and Import

Beginner

4GitHub Profile Search

Intermediate

5Toast Notification

Beginner

6Bookmark Landing Page

Intermediate

7Multi-Step Progress Bar

Intermediate

8Button Loading Animation

Beginner

9Animated Click Effect

Beginner

10Create a Pagination

Beginner

11Notes App Design

Intermediate

12Popup Box Design

Beginner

13Prime Number Finder

Beginner

14Anagram Checker App

Beginner

15Anagram Counter

Beginner

16Password Strength Checker

Beginner

17Wikipedia Search

Beginner

18Quiz App with Timer

Intermediate

19Autoplay Carousel

Intermediate

20Letter Hover Effect

Intermediate

21Expense Tracker

Intermediate

22Table Sort Pro

Intermediate

23Dynamic Resume Builder

Intermediate

24Star Rating Design

Beginner

25Employee Database Management System

Advanced

26Password Generator App

Beginner

27Age Calculator

Beginner

28Nested Chat Comments

Intermediate

29Number System Converter

Intermediate

30OTP Input Field

Beginner

31Word Guessing Game

Intermediate

32Calculator Design

Beginner

33Length Converter

Beginner

34Aspect Ratio Calculator

Beginner

35Simple Counter Design

Beginner

36Landing page

Intermediate

37Simple Calendar

Beginner

38 Link tree

Intermediate

39Stack Visualizer

Advanced

40Responsive Admin Dashboard

Advanced

41Responsive Sliding Login & Registration Form

Advanced

42Word and Character Counter

Beginner

43Multiplication Quiz Webapp

Beginner

44Create a Stopwatch

Beginner

45Temperature Converter

Beginner

46Randomly Change Image Color

Beginner

47Tap-the-Geek Game

Intermediate

48Simple Image Editor

Advanced

49Pay Role Management Webpage

Advanced

50Sentence Translator

Advanced

51Image Slider

Beginner

52Percentage calculator

Beginner

53Dark Mode for Websites

Beginner

54Student Grade Calculator

Beginner

55Navigation Menu

Beginner

56Incremental and Decremental Counter

Beginner

57Analog Clock

Beginner

58Hit the Mouse Game

Beginner

59Expanding Cards

Beginner

60Tip Calculator

Beginner

61Image Gallery

Beginner

62Loan Calculator

Beginner

63BMI Calculator

Beginner

64Rock, Paper, and Scissor Game

Beginner

65Hex Color Generator

Beginner

66Background Color Changer

Beginner

67Crack-The-Code Game

Beginner

68Dragon’s World Game

Beginner

69Tic-Tac-Toe Game

Beginner

70Binary Calculator

Beginner

71 Gallery Viewer

Beginner

72Emoji Generator

Beginner

73Word Scramble Game

Beginner

74Search Bar Design

Beginner

75Create a Coin Flip

Beginner

76QR Code Generator

Beginner

77Image Resizer and Compressor Tool

Beginner

78Digital Clock

Beginner

79QR Code Scanner or Reader

Beginner

80Task Scheduler

Beginner

81Spy Number Checker

Beginner

82

Mobile Toggle Navigation

Beginner

83

Unicode Character Value

Beginner

84

Random Password Generator

Beginner

85

Show and Hide Password

Beginner

86

Random Number Generator

Intermediate

87

JavaScript Carousel

Intermediate

88

Palindrome Checker App

Intermediate

89

Budget Management Tool

Intermediate

90

Portfolio Website

Intermediate

91

Payroll Management Webpage

Advanced

92

Text to Speech Convertor

Advanced

93

AI Image Generator Website

Advanced

94

Mouse Move Parallax Effects

Intermediate

95

Detect Internet Speed Test

Intermediate

96

Task Tracker Project

Intermediate

97

Online Grocery Website

Advanced

98

Joke Generator App

Advanced

99

Online Cake Shop Website

Advanced


If you want to revise the basics of HTML, CSS, and JavaScript, visit our easy tutorials:

  • Learn How to Structure Web Pages using HTML. (Learn here)
  • Style and layout your web content using CSS. (Learn here)
  • Make your website Interactive with JavaScript.(Learn here)

Next Article
10 Best JavaScript Project Ideas For Beginners in 2025

H
hardiksm73
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • Web Templates
  • Tutorials
  • JavaScript-Projects

Similar Reads

    10 HTML Project Ideas & Topics For Beginners [2025]
    HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. As a beginner or even an experienced developer, working on HTML projects can significantly enhance your skills and deepen your understanding of web development. Here are ten HTML project ideas
    5 min read
    Top 10 Projects For Beginners To Practice HTML and CSS Skills
    Learning to code is an exciting journey, especially when stepping into the world of programming with HTML and CSS—the foundation of every website you see today. For most beginners, these two building blocks are the perfect starting point to explore the creative side of web development, designing vis
    8 min read
    Top 10 Coding Projects For Beginners
    Launching your coding journey as a beginner can be exciting. The best way to master a new skill is to practice it and implement it by building some projects. These projects not only strengthen your understanding of programming concepts but also provide practical experience that can be showcased to p
    9 min read
    Top 10 Front-End Web Development Projects For Beginners
    The best method to acquire any skill is to put it into practice by working on projects, however many people think they know everything after watching tutorials. However, this is incorrect; they do not create any projects on their own. All of these factors apply to Front-End Web Development as well;
    7 min read
    Top 95+ Javascript Projects For 2025
    JavaScript is a lightweight, cross-platform programming language that powers dynamic and interactive web content. From real-time updates to interactive maps and animations, JavaScript brings web pages to life.Here, we provided 95+ JavaScript projects with source code and ideas to provide hands-on ex
    4 min read
    10 Best JavaScript Project Ideas For Beginners in 2025
    When we talk about development, JavaScript comes to the top of the list for programming languages. With so much demand for JavaScript, which is used by many developers (65% of the total development community), the number is increasing day by day. Also, major tech companies like Microsoft, Uber, Goog
    8 min read
    Top 5 JavaScript Projects For Beginners on GFG
    JavaScript, which is also known as JS, is an object-oriented programming language and is best known as the scripting language for Web pages. It was originally created to make web pages alive. JavaScript is a high-level programming language. It is very lightweight and is commonly used as a part of we
    3 min read
    90+ React Projects with Source Code [2025]
    React, managed by Facebook and a vibrant community of developers and companies, is a JavaScript library designed to craft dynamic user interfaces. It empowers developers with concepts like React web apps, components, props, states, and component lifecycles. With a primary focus on building single-pa
    12 min read
    Top 7 React Project Ideas For Beginners in 2024
    React is one of the most popular JavaScript libraries widely used in the software industry for projects in different domains like web applications, mobile apps, user interfaces, and more due to its flexibility, efficiency, component-based architecture, and many other features. Many top companies lik
    7 min read
    12 Best Full Stack Project Ideas in 2025
    Full stack developers handle everything from front-end to back-end, making them very valuable in tech. To learn full stack and show off your skills, building real projects is a must. In this article, you'll find 12 great full stack project ideas to boost your portfolio. But first, let’s understand w
    14 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

'); // $('.spinner-loading-overlay').show(); let script = document.createElement('script'); script.src = 'https://assets.geeksforgeeks.org/v2/editor-prod/static/js/bundle.min.js'; script.defer = true document.head.appendChild(script); script.onload = function() { suggestionModalEditor() //to add editor in suggestion modal if(loginData && loginData.premiumConsent){ personalNoteEditor() //to load editor in personal note } } script.onerror = function() { if($('.editorError').length){ $('.editorError').remove(); } var messageDiv = $('
').text('Editor not loaded due to some issues'); $('#suggestion-section-textarea').append(messageDiv); $('.suggest-bottom-btn').hide(); $('.suggestion-section').hide(); editorLoaded = false; } }); //suggestion modal editor function suggestionModalEditor(){ // editor params const params = { data: undefined, plugins: ["BOLD", "ITALIC", "UNDERLINE", "PREBLOCK"], } // loading editor try { suggestEditorInstance = new GFGEditorWrapper("suggestion-section-textarea", params, { appNode: true }) suggestEditorInstance._createEditor("") $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = true; } catch (error) { $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = false; } } //personal note editor function personalNoteEditor(){ // editor params const params = { data: undefined, plugins: ["UNDO", "REDO", "BOLD", "ITALIC", "NUMBERED_LIST", "BULLET_LIST", "TEXTALIGNMENTDROPDOWN"], placeholderText: "Description to be......", } // loading editor try { let notesEditorInstance = new GFGEditorWrapper("pn-editor", params, { appNode: true }) notesEditorInstance._createEditor(loginData&&loginData.user_personal_note?loginData.user_personal_note:"") $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = true; } catch (error) { $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = false; } } var lockedCasesHtml = `You can suggest the changes for now and it will be under 'My Suggestions' Tab on Write.

You will be notified via email once the article is available for improvement. Thank you for your valuable feedback!`; var badgesRequiredHtml = `It seems that you do not meet the eligibility criteria to create improvements for this article, as only users who have earned specific badges are permitted to do so.

However, you can still create improvements through the Pick for Improvement section.`; jQuery('.improve-header-sec-child').on('click', function(){ jQuery('.improve-modal--overlay').hide(); $('.improve-modal--suggestion').hide(); jQuery('#suggestion-modal-alert').hide(); }); $('.suggest-change_wrapper, .locked-status--impove-modal .improve-bottom-btn').on('click',function(){ // when suggest changes option is clicked $('.ContentEditable__root').text(""); $('.suggest-bottom-btn').html("Suggest changes"); $('.thank-you-message').css("display","none"); $('.improve-modal--improvement').hide(); $('.improve-modal--suggestion').show(); $('#suggestion-section-textarea').show(); jQuery('#suggestion-modal-alert').hide(); if(suggestEditorInstance !== null){ suggestEditorInstance.setEditorValue(""); } $('.suggestion-section').css('display', 'block'); jQuery('.suggest-bottom-btn').css("display","block"); }); $('.create-improvement_wrapper').on('click',function(){ // when create improvement option clicked then improvement reason will be shown if(loginData && loginData.isLoggedIn) { $('body').append('
'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status) }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ } $('.improve-modal--improvement').show(); }); const showErrorMessage = (result,statusCode) => { if(!result) return; $('.spinner-loading-overlay:eq(0)').remove(); if(statusCode == 403) { $('.improve-modal--improve-content.error-message').html(result.message); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); return; } } function suggestionCall() { var editorValue = suggestEditorInstance.getValue(); var suggest_val = $(".ContentEditable__root").find("[data-lexical-text='true']").map(function() { return $(this).text().trim(); }).get().join(' '); suggest_val = suggest_val.replace(/\s+/g, ' ').trim(); var array_String= suggest_val.split(" ") //array of words var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(editorValue.length { jQuery('.ContentEditable__root').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('
'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // script for grecaptcha loaded in loginmodal.html and call function to set the token setGoogleRecaptcha(); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('
'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status); }, }); });
"For an ad-free experience and exclusive features, subscribe to our Premium Plan!"
Continue without supporting
`; $('body').append(adBlockerModal); $('body').addClass('body-for-ad-blocker'); const modal = document.getElementById("adBlockerModal"); modal.style.display = "block"; } function handleAdBlockerClick(type){ if(type == 'disabled'){ window.location.reload(); } else if(type == 'info'){ document.getElementById("ad-blocker-div").style.display = "none"; document.getElementById("ad-blocker-info-div").style.display = "flex"; handleAdBlockerIconClick(0); } } var lastSelected= null; //Mapping of name and video URL with the index. const adBlockerVideoMap = [ ['Ad Block Plus','https://media.geeksforgeeks.org/auth-dashboard-uploads/abp-blocker-min.mp4'], ['Ad Block','https://media.geeksforgeeks.org/auth-dashboard-uploads/Ad-block-min.mp4'], ['uBlock Origin','https://media.geeksforgeeks.org/auth-dashboard-uploads/ub-blocke-min.mp4'], ['uBlock','https://media.geeksforgeeks.org/auth-dashboard-uploads/U-blocker-min.mp4'], ] function handleAdBlockerIconClick(currSelected){ const videocontainer = document.getElementById('ad-blocker-info-div-gif'); const videosource = document.getElementById('ad-blocker-info-div-gif-src'); if(lastSelected != null){ document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.backgroundColor = "white"; document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.borderColor = "#D6D6D6"; } document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.backgroundColor = "#D9D9D9"; document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.borderColor = "#848484"; document.getElementById('ad-blocker-info-div-name-span').innerHTML = adBlockerVideoMap[currSelected][0] videocontainer.pause(); videosource.setAttribute('src', adBlockerVideoMap[currSelected][1]); videocontainer.load(); videocontainer.play(); lastSelected = currSelected; }

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences