Learn JavaScript by Building 12+ Fun Projects (With Code!)
Learn JavaScript by building real-world projects! This guide covers 12+ fun and interactive JavaScript projects, from beginner to advanced, with code
📘 15+ Best JavaScript Books for Beginners and Experienced Coders
1. JavaScript Calculator
The calculator is one of the easy JavaScript projects on our list. We will use simple HTML and CSS, and create all functional components using basic JavaScript functions. We’ll continue using HTML to display buttons and improve the presentation with CSS. Finally, we’ll need to ensure buttons perform the right functions using JavaScript.
The main function is eval(), a global JS function that solves JS code. The display() function will display the selected number on the calculator screen. Note that the program will work only for mouse events. Here is the complete code, split into HTML, CSS and JS sections:
HTML:
<div class="calculator">
<input type="text" class="calculator-screen" value="" disabled />
<div class="calculator-keys">
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" value="0">0</button>
<button type="button" class="decimal" value=".">.</button>
<button type="button" class="all-clear" value="all-clear">AC</button>
<button type="button" class="equal-sign operator" value="=">=</button>
</div>
</div>
CSS:
html {
font-size: 62.5%;
box-sizing: border-box;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
.calculator {
border: 1px solid #ccc;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
}
.calculator-screen {
width: 100%;
font-size: 5rem;
height: 80px;
border: none;
background-color: #252525;
color: #fff;
text-align: right;
padding-right: 20px;
padding-left: 10px;
}
button {
height: 60px;
background-color: #fff;
border-radius: 3px;
border: 1px solid #c4c4c4;
background-color: transparent;
font-size: 2rem;
color: #333;
background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
text-shadow: 0 1px rgba(255,255,255,.4);
}
button:hover {
background-color: #eaeaea;
}
.operator {
color: #337cac;
}
.all-clear {
background-color: #f0595f;
border-color: #b0353a;
color: #fff;
}
.all-clear:hover {
background-color: #f17377;
}
.equal-sign {
background-color: #2e86c0;
border-color: #337cac;
color: #fff;
height: 100%;
grid-area: 2 / 4 / 6 / 5;
}
.equal-sign:hover {
background-color: #4e9ed4;
}
.calculator-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
padding: 20px;
}
JavaScript:
const calculator = {
displayValue: '0',
firstOperand: null,
waitingForSecondOperand: false,
operator: null,
};
function inputDigit(digit) {
const { displayValue, waitingForSecondOperand } = calculator;
if (waitingForSecondOperand === true) {
calculator.displayValue = digit;
calculator.waitingForSecondOperand = false;
} else {
calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}
}
function inputDecimal(dot) {
if (calculator.waitingForSecondOperand === true) {
calculator.displayValue = "0."
calculator.waitingForSecondOperand = false;
return
}
if (!calculator.displayValue.includes(dot)) {
calculator.displayValue += dot;
}
}
function handleOperator(nextOperator) {
const { firstOperand, displayValue, operator } = calculator
const inputValue = parseFloat(displayValue);
if (operator && calculator.waitingForSecondOperand) {
calculator.operator = nextOperator;
return;
}
if (firstOperand == null && !isNaN(inputValue)) {
calculator.firstOperand = inputValue;
} else if (operator) {
const result = calculate(firstOperand, inputValue, operator);
calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
calculator.firstOperand = result;
}
calculator.waitingForSecondOperand = true;
calculator.operator = nextOperator;
}
function calculate(firstOperand, secondOperand, operator) {
if (operator === '+') {
return firstOperand + secondOperand;
} else if (operator === '-') {
return firstOperand - secondOperand;
} else if (operator === '*') {
return firstOperand * secondOperand;
} else if (operator === '/') {
return firstOperand / secondOperand;
}
return secondOperand;
}
function resetCalculator() {
calculator.displayValue = '0';
calculator.firstOperand = null;
calculator.waitingForSecondOperand = false;
calculator.operator = null;
}
function updateDisplay() {
const display = document.querySelector('.calculator-screen');
display.value = calculator.displayValue;
}
updateDisplay();
const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', event => {
const { target } = event;
const { value } = target;
if (!target.matches('button')) {
return;
}
switch (value) {
case '+':
case '-':
case '*':
case '/':
case '=':
handleOperator(value);
break;
case '.':
inputDecimal(value);
break;
case 'all-clear':
resetCalculator();
break;
default:
if (Number.isInteger(parseFloat(value))) {
inputDigit(value);
}
}
updateDisplay();
});
2. Hangman Game
Hangman is a well-known game, and one of our simple JS projects. You can develop it in a jiffy using JavaScript, HTML, and CSS. Note that the main functionality is defined using JS. HTML is for display, and CSS does the job of beautifying the contents.
Many methods are defined in the JS code, so it may seem a bit complicated, but you will realize it is simple once you read the code thoroughly. You can also run the code and see the execution line by line.
Check the code and execution here.
3. Tic Tac Toe Game
JavaScript makes it easy to develop a Tic-Tac-Toe game yourself. You can look at the entire code here, and it explains how to build a 3x3 tic-tac-toe step by step. Then, you can later expand to NxN for your own practice and knowledge. The HTML and CSS for the project are quite simple. The author first starts with pseudocode and then goes on to explain each function individually.
4. JavaScript Weather App
Weather apps are also popular JavaScript projects. Once you change the location name in this project, the weather display changes immediately without a page refresh. The UI is also quite sleek.
Note that most weather apps use an API that gets the weather data. We will use the popular and most common API, OpenWeatherMap.
Check out this Youtube video that explains the weather app code and functionality in detail. There are three files, as usual: index.html, main.js, and main.css. Although you can put all the code in a single file (HTML), it is more convenient to maintain separate files.
5. JavaScript Music Events
Here, we’ll introduce you to event listeners that will act on keyboard events. For example, an event will take place if the ‘S’ key is pressed. Each one will have a different code and action.
Apart from event listeners, we will also learn how to add and play audio files. Note that we have added very basic CSS, as the focus here is on JavaScript. You will have to import your own sounds and background image for the program to work fully.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KeyBoard Music</title>
</head>
<body>
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
</div>
</div>
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/chord.wav"></audio>
<audio data-key="68" src="sounds/ride.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/tink.wav"></audio>
<audio data-key="72" src="sounds/kick.wav"></audio>
<audio data-key="74" src="sounds/swipe.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/boom.wav"></audio>
</body>
<script>
function removeTransition(event) {
if (event.propertyName !== 'transform') return
event.target.classList.remove('playing')
}
function playSound(event) {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
const key = document.querySelector(`div[data-key="${event.keyCode}"]`)
if (!audio) return
key.classList.add('playing')
audio.currentTime = 0
audio.play()
}
const keys = Array.from(document.querySelectorAll('.key'))
keys.forEach((key) => key.addEventListener('transitionend', removeTransition))
window.addEventListener('keydown', playSound)
</script>
<style>
html {
font-size: 12px;
background: url('drums.jpg') top center;
background-size: 80%;
}
.keys {
display: flex;
flex: 1;
align-items: top;
justify-content: center;
}
.key {
border: 0.4rem solid blue;
border-radius: 0.5rem;
margin: 1rem;
font-size: 2rem;
padding: 1rem 0.5rem;
transition: all 0.01s ease;
width: 5rem;
text-align: center;
color: black;
text-shadow: 0 0 0.5rem yellow;
}
</style>
</html>6. JavaScript Form Validation
Form validation is a useful aspect and used by many websites for client-side validation of user information, such as card and address details. For example, if there is a mandatory input field name, the user may type a number, leave the field blank, or type just one letter. JS can validate this information.
The project below involves simple form validation. Of course, the project will need HTML elements as well. We have not carried out any extensive styling, only including basic elements in the HTML itself.
Here is the complete code of a simple form with basic validations:
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
function validate() {
var text;
if( document.myForm.name.value == "" ) {
text = "Name cannot be empty";
document.getElementById("demo").innerHTML = text;
document.myForm.name.focus() ;
return false;
}
if( document.myForm.email.value == "" ) {
text = "E-mail cannot be empty";
document.getElementById("demo").innerHTML = text;
document.myForm.email.focus() ;
return false;
}
var emailID = document.myForm.email.value;
atposn = emailID.indexOf("@");
dotposn = emailID.lastIndexOf(".");
if (atposn < 1 || ( dotposn - atposn < 2 )) {
text = "Please enter valid email ID";
document.getElementById("demo").innerHTML = text;
document.myForm.email.focus() ;
return false;
}
if( document.myForm.phone.value == "" || isNaN( document.myForm.phone.value ) ||
document.myForm.phone.value.length != 10 ) {
text = "Please enter a valid 10-digit phone number";
document.getElementById("demo").innerHTML = text;
document.myForm.phone.focus() ;
return false;
}
if( document.myForm.subject.value == "0" ) {
text = "Please provide your area of expertise";
document.getElementById("demo").innerHTML = text;
return false;
}
return( true );
}
</script>
</head>
<body>
<form action = "" name = "myForm" onsubmit = "return(validate());">
<h1 align="center">USER REGISTRATION</H1>
<table align="center" cellspacing = "3" cellpadding = "3" border = "3">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "name" /></td>
</tr>
<tr>
<td align = "right">E-mail</td>
<td><input type = "text" name = "email" /></td>
</tr>
<tr>
<td align = "right">Phone Number</td>
<td><input type = "text" name = "phone" /></td>
</tr>
<tr>
<td align = "right">Subject</td>
<td>
<select name = "subject">
<option value = "0" selected>Select</option>
<option value = "1">HTML</option>
<option value = "2">JavaScript</option>
<option value = "3">CSS</option>
<option value = "4">JSP</option>
</select>
</td>
</tr>
</table>
<p id="demo" style="color:red; text-align:center"></p>
<div style="text-align:center"><input type = "submit" value = "Submit" /></div>
</form>
</body>
</html>7. JavaScript Photo Details Display
Here, we will display some images on a web page. Once the user hovers over the images, more details will appear. You can download images from anywhere or use the ones you already have.
Again, we have used basic HTML and CSS along with JS. The latter carries out most of the work. You will learn how mouse hover (over and out) events work through this project.
<!DOCTYPE html>
<html>
<head>
<title>My Sun Sign Infos</title>
</head>
<script>
function display(element){
document.getElementById('image').innerHTML = element.alt;
}
function revert(){
document.getElementById('image').innerHTML = "Hover over a sunsign image to display details.";
}
</script>
<style>
#image{
width: 650px;
height: 70px;
border:5px solid pink;
background-color: black;
background-repeat: no-repeat;
color:white;
background-size: 100%;
font-family: Didot;
font-size: 150%;
line-height: 60px;
text-align: center;
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
<body>
<div>
<p id = "image">Hover over a sunsign image to display details.<p>
<img alt = "Sagittarius are beautiful, loyal and passionate." src = "saggi.jpg" onmouseover = "display(this)" onmouseout = "revert()">
<img alt = "Pisces are dreamy, helpful and love everyone!" src = "pisces.jpg" onmouseover = "display(this)" onmouseout = "revert()">
<img alt = "Leo are strong and fearless. They aim for and achieve a lot!" src = "leo.jpg" onmouseover = "display(this)" onmouseout = "revert()">
<img alt = "Scorpions are friends for life. They are trustworthy and truthful." src = "scorpio.jpg" onmouseover = "display(this)" onmouseout = "revert()">
</div>
</body>
</html>To make this project more complex, try this slideshow project from W3Schools. You can change the onClick events to onmousehover and onmouseout events, in which case, the images will change once the user hovers over the images.
8. Build an Interactive Landing Page
This project involves building a dynamic landing page that stores your name and text written in local storage, and shows you an appropriate image and greeting message based on the day's time. This YouTube video will help you learn about this project’s JS components.
Intermediate JavaScript Projects
9. Build a Shopping Cart for Order Fulfillment
So far, we have run through small projects with pure JS, HTML, and CSS. Here, the author builds a full-fledged shopping cart for order fulfillment, and the project also uses jQuery.
You can use this as an opportunity to learn the important concepts of jQuery. This will be a good project to build because shopping websites are extremely popular today, as digital shopping has become quite popular. This project will take time, but it is worth it!
10. Single Page Application
Here, the page won’t reload upon navigating the side links, but the content will change. Again, we will use eventListeners to change the view from one link to another. Check out the code and explanation on this YouTube video.
11. JavaScript Browser Code Editor
While you already have an ample choice of JS code editors, it’s always nice to be able to create your own. JS allows you to create an in-browser code editor, which is what this project is about. It makes use of some useful JS methods - and even features syntax highlighting!
The source code for this project is available here.
12. Real-time Chat Application
Chat applications are comparatively simple to make and you can create one yourself using JavaScript. This project makes use of both React and Node.js, so it might be a little intimidating. However, it’s a good way to get your hands dirty and learn how to work with these invaluable tools.
You can view the source code on GitHub.
13. 2D Platforming Game
Games are an excellent and fun way to learn JS. It’s why you’ll see so many projects revolving around games. This project teaches you how to create a 2D platformer game — all using JS, HTML, and CSS.
Check out the source code here.
14. Photo-sharing App
Everyone knows Instagram. It has a lot of features, but fundamentally, it’s a photo-sharing application. You can create a similar but smaller-scale version of it using JS. This is a hefty project and you’ll find yourself using React, Node.js, and Postgres, among other things.
Take a look at the source code here.
15. File Sharing App
Learning how to share files is another useful skill to have. You’ll be using the Virgil Crypto Library in JavaScript to create this app. It’s secure, and you’ll be able to download, decrypt, and view encrypted media files.
Take a look at the source code here.
#javascript #js
