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!
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.
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.
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!
Fig: JavaScript To-Do Application
Project Directory
The project directory should look like the image below, in the end.
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.
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!
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.
Fig: OpenWeatherMap Website
- Create a free API key and use that in this application.
- 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.
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!
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!