Javascript Projects: The Best Guide

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>

    Want a Top Software Development Job? Start Here!

    Full Stack Developer - MERN StackExplore Program
    Want a Top Software Development Job? Start Here!
  • 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 item

var 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 item

var 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 item

var 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" button

function 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 ELEMENTS

const 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 field

var 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 keyboard

input.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 data

const weather = {};

 

weather.temperature = {

  unit: "celsius",

};

 

// APP CONSTS AND VARS

const KELVIN = 273;

 

// API KEY

const key = "b8946f440b89108412a9559cc9e0707b";

 

// CHECK IF BROWSER SUPPORTS GEOLOCATION

if ("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 POSITION

function 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 SERVICE

function showError(error) {

  notificationElement.style.display = "block";

  notificationElement.innerHTML = `<p> ${error.message} </p>`;

}

 

// SEARCH FOR WEATHER CONDITIONS IN THE USER INPUTTED LOCATION

function 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 PROVIDER

function 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 UI

function 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 Web Development Course, 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!

About the Author

Taha SufiyanTaha Sufiyan

Taha is a Research Analyst at Simplilearn. He is passionate about building great user interfaces and keeps himself updated on the world of Artificial Intelligence. Taha is also interested in gaming and photography.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.