JavaScript Fun coding Projects

Guess the Number Game 2

Random Quote Generator 3
Typing Speed Test 5
Infinite Scrolling 9
Drag and Drop 11
Password Strength Meter 13
Dynamic Table Generator 17
Drag and Drop File Uploader 18
Stopwatch 19
Rock-Paper-Scissors Game 21

Laurence Svekis https://basescripts.com/

1
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) {

Laurence Svekis https://basescripts.com/

2
 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

Laurence Svekis https://basescripts.com/

3
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];
}

Laurence Svekis https://basescripts.com/

4
// Event listener for button click
const button = document.querySelector("button");
button.addEventListener("click", function() {
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.",

Laurence Svekis https://basescripts.com/

5
 "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");
startButton.addEventListener("click", function() {

Laurence Svekis https://basescripts.com/

6
 // 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");
endButton.addEventListener("click", function() {
// Disable the text input
const input = document.querySelector("#input");
input.disabled = true;

// Record the end time

endTime = new Date();

Laurence Svekis https://basescripts.com/

7
 // 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.
Laurence Svekis https://basescripts.com/
8
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;
loadItems();

// Add a scroll event listener to the container

container.addEventListener("scroll", function() {
if (container.scrollTop + container.clientHeight >=
container.scrollHeight) {
// User has scrolled to the bottom, load more items
loadItems();
}

Laurence Svekis https://basescripts.com/

9
});

// Function to load more items

function loadItems() {
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.

Laurence Svekis https://basescripts.com/

10
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) {
item.addEventListener("dragstart", function(event) {
// 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

list.addEventListener("dragover", function(event) {
// Prevent the default behavior and set the drop
effect
Laurence Svekis https://basescripts.com/
11
 event.preventDefault();
event.dataTransfer.dropEffect = "move";
});

// Add a drop event listener to the list

list.addEventListener("drop", function(event) {
// 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

Laurence Svekis https://basescripts.com/

12
default behavior, gets the data, finds the target item, and inserts
the dropped item before it.

Password Strength Meter

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 passwordInput =
document.querySelector("#password");
const strengthMeter =
document.querySelector("#strength-meter");

// Add an input event listener to the password input

passwordInput.addEventListener("input", function() {
const password = passwordInput.value;
const strength = calculatePasswordStrength(password);

// Update the strength meter element

Laurence Svekis https://basescripts.com/

13
 strengthMeter.value = strength;
strengthMeter.style.backgroundColor =
getStrengthColor(strength);
});

// Function to calculate the strength of a password

function calculatePasswordStrength(password) {
let strength = 0;

// Add points for password length

strength += password.length * 4;

// Add points for uppercase letters

if (/[A-Z]/.test(password)) {
strength += 5;
}

// Add points for lowercase letters

if (/[a-z]/.test(password)) {
strength += 5;
}

// Add points for numbers

if (/\d/.test(password)) {

Laurence Svekis https://basescripts.com/

14
 strength += 5;
}

// Add points for symbols

if (/[^\w\s]/.test(password)) {
strength += 5;
}

// Subtract points for consecutive repeating

characters
if (/([a-zA-Z])\1/.test(password)) {
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) {

Laurence Svekis https://basescripts.com/

15
 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.

Laurence Svekis https://basescripts.com/

16
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);

Laurence Svekis https://basescripts.com/

17
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');

dropArea.addEventListener('dragover', e => {
e.preventDefault();
dropArea.classList.add('dragging');
});

dropArea.addEventListener('dragleave', e => {
e.preventDefault();
dropArea.classList.remove('dragging');
});

Laurence Svekis https://basescripts.com/

18
dropArea.addEventListener('drop', e => {
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;

Laurence Svekis https://basescripts.com/

19
function startStopwatch() {
startTime = Date.now();
setInterval(updateStopwatch, 10);
}

function updateStopwatch() {
const elapsed = Date.now() - startTime;
const minutes = Math.floor(elapsed / 60000);
const seconds = Math.floor((elapsed % 60000) / 1000);
const milliseconds = elapsed % 1000;
stopwatchDisplay.textContent =
`${minutes.toString().padStart(2,
'0')}:${seconds.toString().padStart(2,
'0')}.${milliseconds.toString().padStart(3, '0')}`;
}

function stopStopwatch() {
clearInterval(updateStopwatch);
}

startStopwatch();

Laurence Svekis https://basescripts.com/

20
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') ||

Laurence Svekis https://basescripts.com/

21
 (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
Laurence Svekis https://basescripts.com/
22
with a player choice, and it will return a string with the result of
that round.

Laurence Svekis https://basescripts.com/

23