3 Real-Time JavaScript Projects with Source Code and Videos

JavaScript is an open-source programming language, perhaps the most popular one. It is designed for creating web-centric applications. It is known for being lightweight and interpreted, which makes it much faster than other languages. JavaScript is integrated with HTML, which makes it easier to implement JavaScript in web applications.

In this ‘JavaScript Projects’ article, we are entirely focussing on the practical application of JavaScript in real-world web applications. We will be building three projects wholly based on JavaScript, throughout this article. So brace yourself and start your web development journey!

JavaScript Calculator Application

The best way to learn is by doing. So, begin by building your very first JavaScript application - one that performs simple mathematical calculations and looks good too. The logic is not very complicated and we think you’ll have fun developing this application, so let’s get started!

javaScript_Calculator_Application

Fig: JavaScript Calculator Application

Any text editor can be used for developing this application. Visual Studio Code is an excellent option for using various programming languages like JavaScript and Python.

All three applications are built using the following three technologies:

HTML - This is the base file that houses the layout and contents of web applications.
CSS - This is a stylesheet that we use to stylize various elements of web applications.
JS - This JavaScript file contains all the magic behind the scenes for these applications to work.

Project Directory

The Project Directory should look like the image displayed below.

Project_Directory

Fig: Project Directory

index.html

This file contains the general layout of the calculator. The elements are further styled in the CSS file and made interactive in a separate JavaScript file.

<html>  <head>    <title>Calculator</title>    <link rel="stylesheet" href="style.css" />  </head>  <!-- create table -->  <body>    <h1>Calculator</h1>    <div class="container">      <table>        <tr>          <td colspan="3"><input type="text" id="result" class="screen" /></td>          <td>            <input              type="button"              value="c"              onclick="clearScreen()"              class="clear"            />          </td>        </tr>        <tr>          <td>            <input              type="button"              value="1"              onclick="display('1')"              class="number"            />          </td>          <td>            <input              type="button"              value="2"              onclick="display('2')"              class="number"            />          </td>          <td>            <input              type="button"              value="3"              onclick="display('3')"              class="number"            />          </td>          <td>            <input              type="button"              value="/"              onclick="display('/')"              class="operator"            />          </td>        </tr>        <tr>          <td>            <input              type="button"              value="4"              onclick="display('4')"              class="number"            />          </td>          <td>            <input              type="button"              value="5"              onclick="display('5')"              class="number"            />          </td>          <td>            <input              type="button"              value="6"              onclick="display('6')"              class="number"            />          </td>          <td>            <input              type="button"              value="-"              onclick="display('-')"              class="operator"            />          </td>        </tr>        <tr>          <td>            <input              type="button"              value="7"              onclick="display('7')"              class="number"            />          </td>          <td>            <input              type="button"              value="8"              onclick="display('8')"              class="number"            />          </td>          <td>            <input              type="button"              value="9"              onclick="display('9')"              class="number"            />          </td>          <td>            <input              type="button"              value="+"              onclick="display('+')"              class="operator"            />          </td>        </tr>        <tr>          <td>            <input              type="button"              value="."              onclick="display('.')"              class="decimal"            />          </td>          <td>            <input              type="button"              value="0"              onclick="display('0')"              class="number"            />          </td>          <td>            <input               type="button"               value="="               onclick="solve()"               class="equal" />          </td>          <td>            <input              type="button"              value="*"              onclick="display('*')"              class="operator"            />          </td>        </tr>      </table>    </div>    <div class="relative">      <img src="./simplilearn.png" style="width: 200px; height: 80px" />    </div>    <script src="app.js"></script>  </body></html>

Import both CSS stylesheet and JavaScript file into this HTML file using the respective commands.
Create a header ‘Calculator’ for this application using <h1> HTML tag.
Use the HTML table to create the layout of calculator using <table> HTML tag. The <tr>, <td> tags are part of the <table> tag that help in managing data within the table.
Use HTML <input> tags to create the screen and buttons for the calculator.
Attach the buttons to the relevant JavaScript functions.
Add a Simplilearn logo to the web application.

app.js

This file contains the scripts attached to the HTML file and makes each element in the application interactive.

function display(val) {  document.getElementById("result").value += val;}function solve() {  let x = document.getElementById("result").value;  let y = eval(x);  document.getElementById("result").value = y;}function clearScreen() {  document.getElementById("result").value = "";}

The display() function is used for displaying the value on the calculator screen.
The evaluate() function is attached to the equals button and is used to do the math for our calculator application.
The clear() function is attached to the clear button and clears the calculator screen.

style.css

This file contains the stylesheet for styling HTML elements used in this application. All the CSS styles are self-explanatory and applied to each class defined in the HTML file. You can play with the styles to give this application a personal touch.

@font-face {  font-family: Montserrat;  src: url("fonts/Montserrat-Regular.ttf");} * {  font-family: Montserrat;}body {  background-color: teal;} h1 {    text-align: center;    color: white;    margin-top: 50px;}.screen {  background-color: grey;  border: solid black 2px;  color: white;  font-size: medium;  width: 100%;  cursor: default;  padding: 10px;  margin: auto;  margin-bottom: 10px;}input[type="button"]:hover {  background-color: #fff;}input[type="button"]:active {  background-color: orangered;}.operator {  background-color: orange;  padding: 5px;  color: black;  border: solid black 2px;  width: 100%;  height: 40px;  cursor: pointer;} .number {  padding: 5px;  height: 40px;  color: black;  border: solid black 2px;  width: 100%;  cursor: pointer;} .decimal {  background-color: lightblue;  padding: 5px;  color: black;  border: solid black 2px;  width: 100%;  height: 40px;  cursor: pointer;} .clear {  background-color: lightsalmon;  padding: 5px;  color: black;  border: solid black 2px;  width: 100%;  height: 40px;  cursor: pointer;  margin: auto;  margin-bottom: 10px;} .equal {  background-color: lightgreen;  padding: 5px;  color: black;  border: solid black 2px;  width: 100%;  height: 40px;  cursor: pointer;} .container {  width: 40%;  background-color: #fff;  align-self: center;  display: block;  margin: 100px auto;  border-radius: 10px;  padding: 15px;  box-shadow: 5px 10px 20px black;} table {  width: 100%;} div.relative {  position: absolute;  top: 600px;  right: 120px;}

End Result

The JavaScript Calculator should look and feel like this in the end, though you are free to tweak this game’s logic and style and make it your own.

JavaScript_Calculato_%20Application_%28End_Result%29

Fig: JavaScript Calculator Application (End Result)_JavaScript_Projects

JavaScript To-Do Application

Now that you’ve created your first application based on JavaScript, let’s move onto building our next JavaScript application, which will be a to-do list. So without further ado, let’s get started!

JavaScript_To-Do_Application

Fig: JavaScript To-Do Application

Project Directory

The project directory should look like the image below, in the end.

JavaScript_To-Do_Application_PD

Fig: Project Directory

index.html

This file contains the general layout of the to-do list. The elements are further styled in the CSS file and made interactive in a separate JavaScript file.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>To-do List</title>    <link rel="stylesheet" href="style.css" />  </head>  <body>    <div class="container">      <div id="listBox" class="header">        <h2>My To Do List</h2>        <input type="text" id="item" placeholder="Title..." />        <span onclick="newElement()" class="addBtn">Add</span>      </div>       <ul id="list">        <li>Learn JavaScript</li>        <li class="checked">Subscribe to Simplilearn</li>        <li>Buy Groceries</li>        <li>Read a book</li>      </ul>    </div>    <div class="relative">      <img src="./simplilearn.png" style="width: 200px; height: 80px" />    </div>    <script src="app.js"></script>  </body></html>

Import both CSS stylesheet as well as JavaScript file into this HTML file to reflect the styles in the application.
Use HTML <div> tag to design the to-do list container.
Add a new button to add items to this list.
Use the <ul> (unordered list) ) tag to add items to the todo-list by default.
Add a Simplilearn logo to the web application.

app.js

This file contains the scripts attached to the HTML file and makes each element in the application interactive. We have added comments in the code to better understand each function in this file.

// Create a "close" button and append it to each list itemvar myNodelist = document.getElementsByTagName("LI");var i;for (i = 0; i < myNodelist.length; i++) {  var span = document.createElement("SPAN");  var txt = document.createTextNode("\u00D7");  span.className = "close";  span.appendChild(txt);  myNodelist[i].appendChild(span);} // Click on a close button to hide the current list itemvar close = document.getElementsByClassName("close");var i;for (i = 0; i < close.length; i++) {  close[i].onclick = function() {    var div = this.parentElement;    div.style.display = "none";  }} // Add a "checked" symbol when clicking on a list itemvar list = document.querySelector('ul');list.addEventListener('click', function(ev) {  if (ev.target.tagName === 'LI') {    ev.target.classList.toggle('checked');  }}, false); // Create a new list item when clicking on the "Add" buttonfunction newElement() {  var li = document.createElement("li");  var inputValue = document.getElementById("item").value;  var t = document.createTextNode(inputValue);  li.appendChild(t);  if (inputValue === '') {    alert("This field cannot be empty!");  } else {    document.getElementById("list").appendChild(li);  }  document.getElementById("item").value = "";   var span = document.createElement("SPAN");  var txt = document.createTextNode("\u00D7");  span.className = "close";  span.appendChild(txt);  li.appendChild(span);   for (i = 0; i < close.length; i++) {    close[i].onclick = function() {      var div = this.parentElement;      div.style.display = "none";    }  }}

Create a close button and append it to each list item.
Click on the close button to hide the current list item.
Add a ‘checked’ symbol when clicking on a list item.
Create a new list item when clicking on the ‘Add’ button.

style.css

This file contains the stylesheet for styling HTML elements used in this application. All the CSS styles are self-explanatory and applied to each class defined in the HTML file. Feel free to play with these CSS styles and give this application your personal touch.

@font-face {  font-family: Montserrat;  src: url(fonts/Montserrat-Regular.ttf);} * {  box-sizing: border-box;  font-family: Montserrat;} body {  background-color: lightsteelblue;  background-image: url("bg.jpg");  height: 600px;  background-position: center;  background-repeat: no-repeat;  background-size: cover;} .container {  width: 50%;  background-color: #fff;  align-self: center;  display: block;  margin: 120px auto;  box-shadow: 5px 10px 20px black;} ul {  margin: 0;  border-left: 6px solid teal;  list-style-type: none;  padding: 0;} ul li {  cursor: pointer;  position: relative;  padding: 12px 8px 12px 40px;  background: #eee;  font-size: 18px;  transition: 0.2s;   -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;} ul li:nth-child(odd) {  background: #f9f9f9;} ul li:hover {  background: #ddd;} ul li.checked {  background: #888;  color: #fff;  text-decoration: line-through;} ul li.checked::before {  content: "";  position: absolute;  border-color: #fff;  border-style: solid;  border-width: 0 2px 2px 0;  top: 10px;  left: 16px;  transform: rotate(45deg);  height: 15px;  width: 7px;} .close {  position: absolute;  right: 0;  top: 0;  padding: 12px 16px 12px 16px;} .close:hover {  background-color: #f44336;  color: white;} .header {  background-color: teal;  padding: 30px 30px;  color: white;  text-align: center;} .header:after {  content: "";  display: table;  clear: both;} input {  margin: 0;  border: none;  border-radius: 0;  width: 75%;  padding: 10px;  float: left;  font-size: 16px;} .addBtn {  padding: 10px;  width: 25%;  background: #d9d9d9;  color: #555;  float: left;  text-align: center;  font-size: 16px;  cursor: pointer;  transition: 0.3s;  border-radius: 0;} .addBtn:hover {  background-color: #bbb;} div.relative {  position: absolute;  top: 600px;  right: 75px;}

End Result

The to-do list should look and feel like this in the end. Although you are free to tweak this application’s logic and style and make it your own.

javaScript_To-Do_Application_%28End_Result%29

Fig: JavaScript To-Do Application (End Result)_JavaScript Projects

JavaScript Weather Application

This is the third and final project in this article. We hope you have a better understanding of JavaScript now that you’ve done the previous two projects. This Project will help you in cementing everything you’ve learned so far. Let’s get started!

JavaScript_Weather_Application

Fig: JavaScript Weather Application

Pre-requisites

Create an account on OpenWeatherMap since we are using their API to display a particular city’s weather conditions.

/OpenWeatherMap_Website

Fig: OpenWeatherMap Website

Create a free API key and use that in this application.

API_key

Note: Creating your API key is important since the key in the code will not work.

Project Directory

Your project directory should look like this in the end.

JavaScript_Weather_Application_PD

index.html

This file contains the general layout of the weather app. The elements are further styled in the CSS file and made interactive in a separate JavaScript file.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>Weatherly</title>    <link rel="stylesheet" href="style.css" />  </head>  <body>    <div class="container">      <div class="app-title">        <p>Weatherly</p>        <input          id="search"          type="text"          placeholder="Enter city..."          autocomplete="off"        />        <div class="location-icon">          <img src="icons/location.png" alt="" />        </div>      </div>      <div class="notification"></div>      <div class="weather-container">        <div class="weather-icon">          <img src="icons/unknown.png" alt="" />        </div>        <div class="temperature-value">          <p>- °<span>C</span></p>        </div>        <div class="temperature-description">          <p>-</p>        </div>        <div class="location">          <p>-</p>        </div>      </div>    </div>    <div class="relative">      <img src="./simplilearn.png" style="width: 200px; height: 80px" />    </div>    <script src="app.js"></script>  </body></html>

Import both the CSS stylesheet as well as the JavaScript file to reflect in the application.
Use HTML <div> tag to design the weather container.
Use another <div> that contains the search bar, app title, and current location button.
Use <div> tag for notification whenever API fails to fetch the weather conditions.
Use <div> tag for sub box that contains the weather fetched by API.
Successive divs for weather icons, temperature, description, and location, respectively.
Add the Simplilearn logo to the web application.

app.js

This file contains the scripts attached to the HTML file and makes each element in the application interactive.

// SELECT ELEMENTSconst iconElement = document.querySelector(".weather-icon");const locationIcon = document.querySelector(".location-icon");const tempElement = document.querySelector(".temperature-value p");const descElement = document.querySelector(".temperature-description p");const locationElement = document.querySelector(".location p");const notificationElement = document.querySelector(".notification"); // Get the input fieldvar input = document.getElementById("search");let city = "";let latitude = 0.0;let longitude = 0.0; // Execute a function when the user releases a key on the keyboardinput.addEventListener("keyup", function (event) {  // Number 13 is the "Enter" key on the keyboard  if (event.keyCode === 13) {    // Cancel the default action, if needed    event.preventDefault();    // Trigger the button element with a click    city = input.value;    getSearchWeather(city);    console.log(city);  }}); // App dataconst weather = {}; weather.temperature = {  unit: "celsius",}; // APP CONSTS AND VARSconst KELVIN = 273; // API KEYconst key = "b8946f440b89108412a9559cc9e0707b"; // CHECK IF BROWSER SUPPORTS GEOLOCATIONif ("geolocation" in navigator) {  navigator.geolocation.getCurrentPosition(setPosition, showError);} else {  notificationElement.style.display = "block";  notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";} // SET USER'S POSITIONfunction setPosition(position) {  latitude = position.coords.latitude;  longitude = position.coords.longitude;   getWeather(latitude, longitude);} locationIcon.addEventListener("click", function (event) {  console.log("hi");  getWeather(latitude, longitude);}); // SHOW ERROR WHEN THERE IS AN ISSUE WITH GEOLOCATION SERVICEfunction showError(error) {  notificationElement.style.display = "block";  notificationElement.innerHTML = `<p> ${error.message} </p>`;} // SEARCH FOR WEATHER CONDITIONS IN THE USER INPUTTED LOCATIONfunction getSearchWeather(city) {  let api = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}`;   fetch(api)    .then(function (response) {      let data = response.json();      return data;    })    .then(function (data) {      weather.temperature.value = Math.floor(data.main.temp - KELVIN);      weather.description = data.weather[0].description;      weather.iconId = data.weather[0].icon;      weather.city = data.name;      weather.country = data.sys.country;    })    .then(function () {      displayWeather();    });} // GET WEATHER FROM API PROVIDERfunction getWeather(latitude, longitude) {  let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;   fetch(api)    .then(function (response) {      let data = response.json();      return data;    })    .then(function (data) {      weather.temperature.value = Math.floor(data.main.temp - KELVIN);      weather.description = data.weather[0].description;      weather.iconId = data.weather[0].icon;      weather.city = data.name;      weather.country = data.sys.country;    })    .then(function () {      displayWeather();    });} // DISPLAY WEATHER TO UIfunction displayWeather() {  iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;  tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;  descElement.innerHTML = weather.description;  locationElement.innerHTML = `${weather.city}, ${weather.country}`;}

Select HTML elements and store them in separate variables.
Get the input field.
Define the constants for app data, unit, and the API key.
Check if the browser supports geolocation.
Set the user’s position.
Show error when there is an issue with geolocation service.
Fetch weather conditions in the searched location.
Fetch weather conditions from the API depending on the user’s current location.
Display weather to UI.

style.css

This file contains the stylesheet for styling HTML elements used in this application. All the CSS styles are self-explanatory and applied to each class defined in the HTML file. You can change these styles according to your design choices.

@font-face {  font-family: Montserrat;  src: url("font/Montserrat-SemiBold.ttf");} * {  font-family: "Montserrat";} body {  background-image: url("bg.jpg");  background-color: steelblue;  height: 500px;  background-position: center;  background-repeat: no-repeat;  background-size: cover;} .container {  width: 50%;  background-color: #fff;  align-self: center;  display: block;  margin: 100px auto;  border-radius: 10px;  padding-bottom: 50px;  box-shadow: 5px 10px 20px black;} .app-title {  width: 100%;  height: 150px;  border-radius: 10px 10px 0 0;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;} .app-title p {  text-align: center;  padding: 15px;  margin: 0 auto;  font-size: 1.2em;  color: #333;} #search {  display: block;  margin-left: auto;  margin-right: auto;  width: 40%;  padding: 5px;  height: 20px;  border-radius: 5px;  outline: none;  border: 3px solid steelblue;} .notification {  background-color: #f8d7da;  display: none;} .notification p {  color: #721c24;  font-size: 1.2em;  margin: 0;  text-align: center;  padding: 10px 0;} .weather-container {  width: 100%;  height: 260px;  background-color: #f4f9ff;  margin-top: 20px;} .weather-icon {  width: 100%;  height: 128px;} .weather-icon img {  display: block;  margin: 0 auto;} .location-icon {  width: 100%;  height: 40px;  padding: 10px;} .location-icon img {  display: block;  width: 32px;  height: 32px;  margin: 10px auto;  cursor: pointer;  padding: 5px;  border: steelblue solid 2px;  border-radius: 10px;  color: steelblue;} .temperature-value {  width: 100%;  height: 60px;} .temperature-value p {  padding: 0;  margin: 0;  color: #293251;  font-size: 4em;  text-align: center;} .temperature-value span {  color: #293251;  font-size: 0.5em;} .temperature-description p {  padding: 8px;  margin: 0;  color: #293251;  text-align: center;  font-size: 1.2em;} .location p {  margin: 0;  padding: 0;  color: #293251;  text-align: center;  font-size: 0.8em;} div.relative {  position: absolute;  top: 600px;  right: 120px;}

End Result

The weather application should look and feel like this in the end, though you are free to tweak the logic and style of this application and make it your own!

JavaScript_Weather_Application_%28End_Result

Fig: JavaScript Weather Application (End Result)_JavaScript_Projects

Hope you learned the basics of JavaScript and enjoyed going through this ‘JavaScript Projects’ article.

Get Ahead of the Curve and Master Web Development Today

Are you wondering how you can gain the skills necessary to take advantage of JavaScript’s immense popularity now that you are familiar with fundamental concepts after working on these JavaScript Projects? We have your back! We offer a comprehensive Java Certification Training, that will help you become ready with more than just JavaScript.

To learn more about Javascript projects, check out our Youtube video to code these projects along with us, and understand the concepts used in this article, better. If you’re an aspiring web or/and mobile developer, this JavaScript training will broaden your skills and open up new career horizons.

Do you have any questions for us? Do mention them in the comments section of this ‘JavaScript Projects’ article and we'll have our experts answer them for you!

Tutorial Playlist

JavaScript Tutorial: Learn JavaScript from Scratch

An Introduction to JavaScript: Here Is All You Need to Know

JavaScript Hello World: Here's What You Need To Know

All You Need to Know About JavaScript Arrays

Using Array Filter In JavaScript to Filter Array Elements

Everything You Need to Know About Array Reduce JavaScript

Introduction To JavaScript Loops: Do-While, For, For-In Loops

All You Need to Learn About Javascript Functions

The Best Guide on How to Implement JavaScript Closures

JavaScript “This” Keyword and How to Implement It

How to Implement JavaScript Form Validation

An Introduction Guide To JavaScript RegEx

How to Do an Email Validation in JavaScript?

All You Need to Know About JavaScript Promises

How to Implement JavaScript Async/Await

JavaScript DOM Tutorial: 2020 Edition

JavaScript Objects: Properties, Methods, and Accessors

An Introduction to Javascript Games: The Best Guide

An Easy Guide to Build a Calculator App in JavaScript

Javascript Projects: The Best Guide

What is OOP in JavaScript? How is it Implemented?

The Best Guide to Understanding JavaScript Learning Path

Java Vs .NET: Which Is the Best Technology to Choose?

Top 80+ JavaScript Interview Questions and Answers for 2024

Typeof in JavaScript: Checking Data Types Using the Typeof Operator

Tips and Tricks That You Should Know Before Going to a Coding Interview

Callback Functions in JavaScript: Everything You Need to Know

JavaScript Events

JavaScript Projects: The Best Guide

JavaScript Tutorial: Learn JavaScript from Scratch

An Introduction to JavaScript: Here Is All You Need to Know

JavaScript Hello World: Here's What You Need To Know

All You Need to Know About JavaScript Arrays

Using Array Filter In JavaScript to Filter Array Elements

Everything You Need to Know About Array Reduce JavaScript

Introduction To JavaScript Loops: Do-While, For, For-In Loops

All You Need to Learn About Javascript Functions

The Best Guide on How to Implement JavaScript Closures

JavaScript “This” Keyword and How to Implement It

How to Implement JavaScript Form Validation

An Introduction Guide To JavaScript RegEx

How to Do an Email Validation in JavaScript?

All You Need to Know About JavaScript Promises

How to Implement JavaScript Async/Await

JavaScript DOM Tutorial: 2020 Edition

JavaScript Objects: Properties, Methods, and Accessors

An Introduction to Javascript Games: The Best Guide

An Easy Guide to Build a Calculator App in JavaScript

Javascript Projects: The Best Guide

What is OOP in JavaScript? How is it Implemented?

The Best Guide to Understanding JavaScript Learning Path

Java Vs .NET: Which Is the Best Technology to Choose?

Top 80+ JavaScript Interview Questions and Answers for 2024

Typeof in JavaScript: Checking Data Types Using the Typeof Operator

Tips and Tricks That You Should Know Before Going to a Coding Interview

Callback Functions in JavaScript: Everything You Need to Know

JavaScript Events

Table of Contents

Master Core Java 8 Concepts, Java Servlet & More!

JavaScript Calculator Application

Project Directory

index.html

app.js

Unleash Your Career as a Full Stack Developer!

style.css

End Result

JavaScript To-Do Application

Project Directory

index.html

Dive Deep Into Java Core Concepts

app.js

style.css

End Result

JavaScript Weather Application

Pre-requisites

Advance Your MERN Stack Career in 6 Months!

Project Directory

index.html

app.js