25+ JavaScript Project With Source Code to Build your Skills

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • Counter-app

    Discontinued This a project I made during the Road to Hire Program. It is a simple counter app made from JavaScript.

  • This project will give you more practice working with the DOM. Here, the user can add the number of counts and also delete the counts. Key concepts covered :- 1.) document.querySelector() 2.) addEventListener() 3.) textContent Source Code:- Counter App

  • color-changing-app

  • In this app, the background color of the canvas changes when the user clicks on a button. Key concepts covered :- 1.) eventListener() 2.) Array 3.) Math.random() Source Code:- Background color Changer App

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • javascript-calculator

    Project #7 for freeCodeCamp's Front-End Development Certificate (by ayoisaiah)

  • The main objective of this project is to perform the basic functionality(+,-,*,/) of the calculator. Key concepts covered :- 1.) DOM Manipulation 2.) document.querySelector() 3.) addEventListener() 4.) Immediately Invoked Function Expressions 5.) textContent Source Code:- JavaScript Calculator

  • The main functionality of this project is that , when an arrow is clicked, the next image in the array shows up. Key concepts covered :- 1.) DOM Manipulation 2.) Arrays 3.) forEach() 4.) eventListeners 5.) JavaScript CSS Manipulation Source Code:- Image Slider

  • Digital_Clock

    Digital Clock | With Date (Day, Month, Year) - Using HTML, CSS & Javascript

  • The main objective of this project is to build a digital clock with date(Day, Month, Year). Key concepts covered :- 1.) setTimeInterval() 2.) Date() 3.) Arrays 4.) innerHTML Source Code:- Digital Clock

  • javascript-analog-clock

    An Analog Clock made with JavaScript

  • The main objective of this project is to build a realtime analog clock using HTML, CSS, and Javascript. Key concepts covered :- 1.) document.querySelector() 2.) Date() 3.) setInterval() 4.) rotate() Source Code:- Analog Clock

  • js-loan-calculator

    A loan calculator built with JavaScript

  • The main objective of this project is to calculate and displays the results for monthly payment, total payment, and total interest according to loan amount interest rate, and years to repay. Key concepts covered :- 1.) document.querySelector() 2.) setInterval() 3.) Math.pow() 4.) toFixed() 5.) parseFloat() 6.) DOM manipulation 7.) JavaScript CSS Manipulation 8.) eventListener() Source Code:- Loan Calculator

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • GUESS-MY-NUMBER

    you have to guess a number between 1 to 20 . if your PREDICTED NUMBER is equal to the SECRET NUMBER

  • Source Code:- Guess my number

  • JavaScript-Projects

    JavaScript Algorithms and Data Structures (by AdishiSood)

  • A palindrome checker checks if a string is a palindrome or not. A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing Key concepts covered :- 1.) document.querySelector() 2.) toUpperCase() 3.) split() 4.) reverse() 5.) join() 6.) innerHTML Source Code:- Palindrome Checker

  • Javascript-weather-app

    A simple weather web application using Html, Css, Javascript, Weathermap Api

  • Source Code:- Weather app

  • The main objective of this project is to fetches a new random quote from an API, upon the click of a button, and displays it in the browser. Key concepts covered :- 1.) document.getElementById() 2.) async() 3.) await 4.) fetch() 5.) Math.floor() 6.) Math.random() 7.) innerHTML Source Code:- Random Quote Generator

  • BMI-calculator

  • The objective of this JavaScript project is to wire up a very basic JavaScript BMI Calculator. Key concepts covered :- 1.) document.querySelector() 2.) event listeners 3.) parseInt() 4.) toFixed() 5.) innerHTML Source Code:- BMI Calculator

  • percentage-tip-calculator

  • In this project, the user adds an amount and a tip percent and the calculator then outputs a total tip and bill amount. Key concepts covered :- 1.) document.getElementById() 2.) event listeners 3.) Number() 4.) DOM manipulation Source Code:- TIP Calculator

  • word-count-tool

  • In this project, the user enters the word and the calculator outputs its length. Key concepts covered :- 1.) DOM manipulation 2.) event listeners 3.) length method Source Code:- Word Length Calculator

  • day-of-the-week-app

  • This project uses displays the day of the week along with a corresponding quote. Key concepts covered :- 1.) DOM manipulation 2.) Date() Object 3.) switch statement Source Code:- Day of the Week

  • Corona-Tracker

    :octocat:🌟 ᴜꜱɪɴɢ ᴛʜɪꜱ ᴡᴇʙꜱɪᴛᴇ ʏᴏᴜ ᴄᴀɴ ᴛʀᴀᴄᴋ ᴄᴏʀᴏɴᴀ ɪɴ ᴀɴʏ ᴄᴏᴜɴᴛʀʏ ᴡʜɪᴄʜ ʏᴏᴜ ᴡᴀɴᴛ ɪɴ ᴛʜɪꜱ ᴡᴇʙꜱɪᴛᴇ ɪ ʜᴀᴠᴇ ᴍᴀᴅᴇ ᴀ ʜᴛᴍʟ ᴘᴀɢᴇ ᴡʜɪᴄʜ ᴡɪʟʟ ᴍᴀᴋᴇ ᴀɴ ᴀᴘɪ ᴄᴀʟʟ (ᴄᴏᴠɪᴅ ᴀᴘɪ) ᴛʜᴀᴛ ᴡɪʟʟ ɢɪᴠᴇ ᴛʜᴇ ᴅᴀᴛᴀ ᴏꜰ ᴛʜᴇ ᴀᴄᴛɪᴠᴇ ᴄᴀꜱᴇꜱ, ʀᴇᴄᴏᴠᴇʀᴇᴅ ᴄᴀꜱᴇꜱ ᴀɴᴅ ᴅᴇᴀᴛʜ ᴄᴀꜱᴇꜱ💻 🎯🚀

  • Using this website you can track corona cases in any country which you want. Key concepts covered :- 1.) DOM manipulation 2.) API and much more... Source Code:- Covid-19 Tracker

  • Discussion-App

    This is a simple discussion portal where you can put your queries and add public comments.

  • It is a portal where one user can add questions and the other user can respond to those questions and you can also search the question. Also once the query is resolved, the user can delete the added question and response. Key concepts covered :- 1.) JavaScript CSS Manipulation 2.) JavaScript DOM Manipulation 3.) local storage 4.) Jquery Source Code:- Discussion Portal

  • JavaScript-Quiz-App

  • Quiz apps are a fun way to improve your skills as a JavaScript developer. In this project, questions are dynamically generated using an object constructor. You have the 'Retake Quiz' option available at the end :) Key concepts covered :- 1.) JavaScript CSS Manipulation 2.) JavaScript DOM Manipulation 3.) event listeners 4.) Math.random() 5.) Objects Source Code:- Quiz app

  • JavaScript-Whack-A-Mole

    a Whack A Mole Game! this project was inspired by Wes Bos tutorial.

  • Source Code:- Whack a Mole

  • notes-app

  • The objective of this JavaScript project is to create a notes application that uses local storage and allows for edits, among other things. Key concepts covered :- 1.) JavaScript CSS Manipulation 2.) JavaScript DOM Manipulation 3.) event listeners 4.) conditionals 5.) Jquery 6.) local storage and much more... Source Code:- Notes app

  • Tetris_Game

    Tetris game using JavaScript.

  • Tetris is a surprising game. The aim of Tetris is simple; you bring down blocks from the top of the screen. You can move the blocks around, either left to right, and/or you can rotate them. Your objective is to get all the blocks to fill all the empty space in a line at the bottom of the screen; whenever you do this, you’ll find that the blocks vanish and you get awarded some points. Key concepts covered :- 1.) HTML canvas 2.) DOM Manipulation 3.) Math.floor() , Math.random() 4.) event listeners 5.) Date() and much more... Source Code :- Tetris Game

  • js-music-player

    This is a simple User Interface of a music player created in HTML, CSS and JavaScript.

  • In this application, you will be creating a music player with a clean user interface that can be used to play music in the browser. You will also implement features like seeking and volume control. Key concepts covered :- 1.) Jquery 2.) DOM Manipulation 3.) Array of objects 4.) event listeners 5.) CSS Manipulation 6.) setInterval(), clearInterval() 7.) Math.floor() , Math.random() and much more... Source Code :- Music Player

  • tic-tac-toe-js

    Tic Tac Toe using JS

  • The goal of the game is for players to position their marks so that they make a continuous line of three cells vertically, horizontally, or diagonally. An opponent can prevent a win by blocking the completion of the opponent's line. Key concepts covered :- 1.) Jquery 2.) DOM Manipulation 3.) CSS Manipulation and much more... Source code:- Tic Tac Toe

  • pomodoro-clock

    A JavaScript Pomodoro Clock

  • The Pomodoro Technique is a time management method developed by Francesco Cirillo. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks. Key concepts covered :- 1.) DOM Manipulation 2.) event listeners 3.) switch statement 4.) setInterval() and much more... Source code :- Pomodoro Clock

  • FilterFun

  • Source Code:- Filter Fun

  • Rock-Paper-Scissors-JS

    Classic game ROCK, PAPER, SCISSORS to play in the browser. Built with JavaScript.

  • Source code :- Rock, Paper, Scissors

  • todo-list-project-2

  • The main objective of this JavaScript Project is to wire up a todo list application. Key concepts covered :- 1.) DOM Manipulation 2.) Arrays 3.) forEach() 4.) eventListeners 5.) Nested Functions 6.) Local Storage API Source Code:- To-Do List

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts