# 10 Fun JavaScript Coding Projects to Learn JavaScript code with Source Code and Downloadable PDF Guide

JavaScript Fun coding Projects

Guess the Number Game – Random Quote Generator – Typing Speed Test – Infinite Scrolling – Drag and Drop – Password Strength Meter – Dynamic Table Generator – Drag and Drop File Uploader – Stopwatch – Rock-Paper-Scissors Game

# Guess the Number Game

This game allows users to guess a random number between 1 and 100. Here’s how to build it:

// Generate a random number between 1 and 100

const secretNumber = Math.floor(Math.random() * 100) + 1;

// Keep track of the number of guesses

let numGuesses = 0;

// Prompt the user to guess a number

let guess = parseInt(prompt(“Guess a number between 1 and 100”));

// While the guess is not correct

while (guess !== secretNumber) {

// Increment the number of guesses

numGuesses++;

// Provide a hint to the user

if (guess < secretNumber) {

guess = parseInt(prompt(“Too low. Guess again.”));

} else {

guess = parseInt(prompt(“Too high. Guess again.”));

}

}

// The user has guessed the correct number

alert(`You win! It took you \${numGuesses} guesses.`);

In this example, we generate a random number between 1 and 100 using Math.random() and Math.floor(). We then use a while loop to prompt the user to guess a number until they guess the correct number. We keep track of the number of guesses using a numGuesses variable and provide hints to the user if their guess is too high or too low. Once the user has guessed the correct number, we display a message indicating how many guesses it took them to win.

# Random Quote Generator

This script displays a random quote each time the user clicks a button. Here’s how to build it:

// Array of quotes

const quotes = [

“The greatest glory in living lies not in never falling, but in rising every time we fall. -Nelson Mandela”,

“The way to get started is to quit talking and begin doing. -Walt Disney”,

“Your time is limited, don’t waste it living someone else’s life. -Steve Jobs”,

“If life were predictable it would cease to be life, and be without flavor. -Eleanor Roosevelt”,

“If you look at what you have in life, you’ll always have more. If you look at what you don’t have in life, you’ll never have enough. -Oprah Winfrey”,

“If you set your goals ridiculously high and it’s a failure, you will fail above everyone else’s success. -James Cameron”

];

// Function to generate a random quote

function getRandomQuote() {

const randomIndex = Math.floor(Math.random() * quotes.length);

return quotes[randomIndex];

}

// Event listener for button click

const button = document.querySelector(“button”);

const quote = getRandomQuote();

document.querySelector(“#quote”).textContent = quote;

});

In this example, we create an array of quotes and a function getRandomQuote() that returns a random quote from the array. We add an event listener to a button that, when clicked, generates a random quote and displays it on the page.

# Typing Speed Test

This script tests the user’s typing speed by measuring how long it takes them to type a random sentence. Here’s how to build it:

// Array of sentences for typing test

const sentences = [

“The quick brown fox jumps over the lazy dog.”,

“The only way to do great work is to love what you do.”,

“Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.”,

“Success is not final, failure is not fatal: it is the courage to continue that counts.”,

“The best way to predict the future is to invent it.”,

“The only person you are destined to become is the person you decide to be.”

];

// Function to generate a random sentence

function getRandomSentence() {

const randomIndex = Math.floor(Math.random() * sentences.length);

return sentences[randomIndex];

}

// Variables for tracking the typing test

let startTime, endTime;

// Event listener for typing test start

const startButton = document.querySelector(“#start”);

// Display a random sentence

const sentence = getRandomSentence();

document.querySelector(“#sentence”).textContent = sentence;

// Enable the text input and set focus

const input = document.querySelector(“#input”);

input.disabled = false;

input.focus();

// Record the start time

startTime = new Date();

});

// Event listener for typing test end

const endButton = document.querySelector(“#end”);

// Disable the text input

const input = document.querySelector(“#input”);

input.disabled = true;

// Record the end time

endTime = new Date();

// Calculate the typing speed

const timeDiff = endTime – startTime;

const seconds = timeDiff / 1000;

const numWords = document.querySelector(“#sentence”).textContent.split(” “).length;

const wordsPerMinute = Math.round(numWords / seconds * 60);

// Display the typing speed

document.querySelector(“#speed”).textContent = wordsPerMinute;

});

In this example, we create an array of sentences for the typing test and a function getRandomSentence() that returns a random sentence from the array. We add event listeners to two buttons, one to start the test and one to end it. When the user clicks the start button, we display a random sentence, enable the text input, and record the start time. When the user clicks the end button, we disable the text input, record the end time, calculate the typing speed, and display it on the page. The typing speed is calculated by dividing the number of words in the sentence by the time it took to type the sentence, then multiplying by 60 to get words per minute.

# Infinite Scrolling

This example demonstrates how to implement infinite scrolling using JavaScript. We have a container element with a fixed height and overflow set to auto. When the user scrolls to the bottom of the container, we load more content and append it to the container.

// Get the container element

const container = document.querySelector(“#container”);

// Initialize the counter and load the first set of items

let counter = 0;

// Add a scroll event listener to the container

if (container.scrollTop + container.clientHeight >= container.scrollHeight) {

// User has scrolled to the bottom, load more items

}

});

// Function to load more items

for (let i = 0; i < 10; i++) {

// Create a new item and append it to the container

const item = document.createElement(“div”);

item.textContent = `Item \${counter++}`;

container.appendChild(item);

}

}

In this example, we first get the container element and initialize the counter to 0. We then load the first set of items using the loadItems() function. We add a scroll event listener to the container that checks if the user has scrolled to the bottom of the container. If they have, we call the loadItems() function to load more items. The loadItems() function creates 10 new items and appends them to the container, incrementing the counter for each item.

# Drag and Drop

This example demonstrates how to implement drag and drop using JavaScript. We have a list of items that can be dragged and dropped to rearrange their order. We use the HTML5 Drag and Drop API to implement the functionality.

// Get the list and all list items

const list = document.querySelector(“#list”);

const items = document.querySelectorAll(“li”);

// Add a dragstart event listener to each item

items.forEach(function(item) {

// Set the data and the effect on the drag event

event.dataTransfer.setData(“text/plain”, item.textContent);

event.dataTransfer.effectAllowed = “move”;

});

});

// Add a dragover event listener to the list

// Prevent the default behavior and set the drop effect

event.preventDefault();

event.dataTransfer.dropEffect = “move”;

});

// Add a drop event listener to the list

// Prevent the default behavior and get the data

event.preventDefault();

const data = event.dataTransfer.getData(“text/plain”);

// Find the target item and insert the dropped item before it

const target = event.target.closest(“li”);

const item = document.createElement(“li”);

item.textContent = data;

list.insertBefore(item, target);

});

In this example, we first get the list and all list items. We add a dragstart event listener to each item that sets the data and effect on the drag event. We then add a dragover event listener to the list that prevents the default behavior and sets the drop effect. Finally, we add a drop event listener to the list that prevents the default behavior, gets the data, finds the target item, and inserts the dropped item before it.

This example demonstrates how to implement a password strength meter using JavaScript. We have a password input field and a meter element that shows the strength of the password. The strength is determined by the length of the password and variation of the case of the letters, use of numbers, and symbols and how many times a character is repeated.

// Get the password input and strength meter elements

const strengthMeter = document.querySelector(“#strength-meter”);

// Update the strength meter element

strengthMeter.value = strength;

strengthMeter.style.backgroundColor = getStrengthColor(strength);

});

// Function to calculate the strength of a password

let strength = 0;

// Add points for uppercase letters

strength += 5;

}

// Add points for lowercase letters

strength += 5;

}

strength += 5;

}

strength += 5;

}

// Subtract points for consecutive repeating characters

strength -= 10;

}

return Math.max(0, Math.min(100, strength));

}

// Function to get the color for a strength value

function getStrengthColor(strength) {

if (strength <= 25) {

return “red”;

} else if (strength <= 50) {

return “orange”;

} else if (strength <= 75) {

return “yellow”;

} else {

return “green”;

}

}

In this example, we first get the password input and strength meter elements. We add an input event listener to the password input that calculates the strength of the password using the calculatePasswordStrength() function and updates the strength meter element with the result.

The calculatePasswordStrength() function takes a password as input and calculates its strength based on various criteria. We add points for the length of the password, uppercase and lowercase letters, numbers, and symbols. We also subtract points for consecutive repeating characters. The strength is then clamped to a value between 0 and 100.

The getStrengthColor() function takes a strength value as input and returns a color based on its range. A strength value of 0-25 is red, 26-50 is orange, 51-75 is yellow, and 76-100 is green.

Together, these functions implement a simple password strength meter that updates in real time as the user types in their password.

# Dynamic Table Generator

const table = document.createElement(‘table’);

const tbody = document.createElement(‘tbody’);

const rows = 5;

const cols = 5;

for (let i = 0; i < rows; i++) {

const row = document.createElement(‘tr’);

for (let j = 0; j < cols; j++) {

const cell = document.createElement(‘td’);

cell.textContent = `Row \${i + 1}, Column \${j + 1}`;

row.appendChild(cell);

}

tbody.appendChild(row);

}

table.appendChild(tbody);

document.body.appendChild(table);

This code generates a dynamic table with 5 rows and 5 columns. We first create a table and tbody element using createElement(), then use two nested for loops to create the rows and columns. For each cell, we set the text content to the row and column number, and append it to the current row. Finally, we append the tbody to the table and the table to the body of the HTML document.

# Drag and Drop File Uploader

const fileInput = document.querySelector(‘#file-input’);

const dropArea = document.querySelector(‘#drop-area’);

e.preventDefault();

});

e.preventDefault();

dropArea.classList.remove(‘dragging’);

});

e.preventDefault();

dropArea.classList.remove(‘dragging’);

const files = e.dataTransfer.files;

fileInput.files = files;

});

This code creates a drag and drop file uploader. We first get the file input and drop area elements using querySelector(). We add event listeners to the drop area for dragover, dragleave, and drop events. When the user drags a file over the drop area, we prevent the default behavior and add a CSS class to highlight the area. When the user leaves the drop area, we remove the CSS class. When the user drops the file, we prevent the default behavior, remove the CSS class, and set the file input’s files property to the dropped files.

# Stopwatch

const stopwatchDisplay = document.querySelector(‘#stopwatch’);

let startTime;

function startStopwatch() {

startTime = Date.now();

}

const elapsed = Date.now() – startTime;

const minutes = Math.floor(elapsed / 60000);

const seconds = Math.floor((elapsed % 60000) / 1000);

const milliseconds = elapsed % 1000;

}

function stopStopwatch() {

}

startStopwatch();

This code creates a stopwatch that displays the elapsed time in minutes, seconds, and milliseconds. We first get the stopwatch display element using querySelector(). We define three functions: startStopwatch(), updateStopwatch(), and stopStopwatch(). startStopwatch() sets the start time using Date.now() and starts a timer using setInterval(). The timer calls updateStopwatch() every 10 milliseconds. updateStopwatch() calculates the elapsed time using Date.now() – startTime, and formats it as a string in minutes, seconds, and milliseconds. We use padStart()

# Rock-Paper-Scissors Game

const choices = [‘rock’, ‘paper’, ‘scissors’];

function playRound(playerChoice) {

const computerChoice = choices[Math.floor(Math.random() * choices.length)];

let result = ”;

if (playerChoice === computerChoice) {

result = ‘Tie!’;

} else if ((playerChoice === ‘rock’ && computerChoice === ‘scissors’) ||

(playerChoice === ‘paper’ && computerChoice === ‘rock’) ||

(playerChoice === ‘scissors’ && computerChoice === ‘paper’)) {

result = ‘You win!’;

} else {

result = ‘Computer wins!’;

}

return `You chose \${playerChoice}, computer chose \${computerChoice}. \${result}`;

}

console.log(playRound(‘rock’)); // Example output: “You chose rock, computer chose scissors. You win!”

This code implements a simple game of rock-paper-scissors. We start by defining an array of the three choices. We define a function playRound(playerChoice) that takes the player’s choice as an argument. Inside the function, we randomly select the computer’s choice using Math.floor(Math.random() * choices.length). We then use a series of if-else statements to determine the result of the round, based on the player’s and computer’s choices. We return a string that includes both choices and the result of the round. We can test the function by calling it with a player choice, and it will return a string with the result of that round.