I wanted to build a small JavaScript project that was simple enough to understand but still gave me some practical experience with user input, DOM manipulation, event handling, and JavaScript's random number functionality.

A random number calculator turned out to be a good project for this.

The idea is simple: the user enters a minimum and maximum value, clicks a button, and the application generates a random number within that range.

In this article, I'll walk through how I approached the project and explain the important parts of the implementation.

What We Are Building

The calculator has three basic inputs:

Minimum value
Maximum value
Generate button

After the user enters the range, JavaScript generates a random number and displays the result on the page.

For example:

Minimum: 1
Maximum: 100

The application might return:

Random number: 73

[INSERT YOUR CALCULATOR SCREENSHOT HERE]

Setting Up the HTML Structure

I started with a simple HTML structure containing two number inputs, a button, and an element for displaying the result.

Random Number Calculator

Minimum Number

Maximum Number

Generate Random Number

Your result will appear here.

The important part here is giving each input and output element an ID. This makes it easy for JavaScript to access the elements later.

For example:

can be accessed from JavaScript with:

document.getElementById("min")
Adding Some CSS

Once the HTML structure was ready, I added some basic CSS to make the calculator easier to use.

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

.calculator {
width: 350px;
padding: 25px;
border-radius: 10px;
border: 1px solid #ddd;
}

input {
width: 100%;
padding: 10px;
margin: 8px 0 15px;
box-sizing: border-box;
}

button {
width: 100%;
padding: 12px;
cursor: pointer;
}

result {

margin-top: 20px;
font-size: 20px;
font-weight: bold;
}

The goal wasn't to create a complicated interface. I mainly wanted the inputs, button, and result to be easy to understand.

[INSERT YOUR STYLED CALCULATOR SCREENSHOT HERE]

The JavaScript Logic

This is where the calculator actually becomes functional.

First, I selected the required HTML elements:

const minInput = document.getElementById("min");
const maxInput = document.getElementById("max");
const generateButton = document.getElementById("generate");
const result = document.getElementById("result");

Then I added a click event to the button:

generateButton.addEventListener("click", generateRandomNumber);

The main function looks like this:

function generateRandomNumber() {
const min = Number(minInput.value);
const max = Number(maxInput.value);

if (min > max) {
result.textContent = "Minimum cannot be greater than maximum.";
return;
}

const randomNumber =
Math.floor(Math.random() * (max - min + 1)) + min;

result.textContent = Random number: ${randomNumber};
}
Understanding Math.random()

The most interesting part of this project is probably this line:

Math.random()

JavaScript's Math.random() returns a pseudo-random number greater than or equal to 0 and less than 1.

For example, it could produce a value such as:

0.2718

But we don't want a decimal between 0 and 1. We want a number inside the range entered by the user.

That's why the calculation is:

Math.floor(Math.random() * (max - min + 1)) + min

Suppose the user enters:

Minimum = 10
Maximum = 20

The calculation becomes:

Math.floor(Math.random() * 11) + 10

This produces an integer between 10 and 20, inclusive.

Why Is There a +1?

This was one of the small details I had to understand while building the project.

If we wrote:

Math.floor(Math.random() * (max - min)) + min

the maximum value would not be included.

Using:

(max - min + 1)

makes the upper boundary inclusive.

So for a range from 1 to 10, the possible results are:

1, 2, 3, 4, 5, 6, 7, 8, 9, 10
Handling Invalid Input

A calculator should also handle situations where the user enters something that doesn't make sense.

For example:

Minimum = 100
Maximum = 20

The minimum cannot be greater than the maximum, so I added this check:

if (min > max) {
result.textContent = "Minimum cannot be greater than maximum.";
return;
}

This prevents the calculation from running with an invalid range.

You can also extend the project to handle empty fields, negative numbers, decimals, or other input requirements depending on what the calculator is intended to do.

What I Learned From This Project

Although the project itself is small, it helped me practice several JavaScript concepts:

Selecting elements from the DOM
Reading values from form inputs
Converting strings to numbers
Handling button events
Creating JavaScript functions
Using Math.random()
Using Math.floor()
Validating user input
Updating page content dynamically

I also found that small projects like this are useful because they make it easier to understand how individual JavaScript concepts work together.

Ideas for Improving the Calculator

There are several features that could be added later.

For example:

Generate Multiple Numbers

Instead of generating one number, the user could choose how many random numbers they want.

Avoid Duplicate Numbers

The application could keep track of previously generated numbers and prevent duplicates.

Add a History

A small history section could display previously generated results.

Add Copy Functionality

A copy button could allow users to quickly copy the generated number.

Improve Accessibility

Labels, keyboard navigation, focus states, and accessible messages could make the calculator easier for more users.

Final Result

The final application is intentionally simple, but it demonstrates how a few basic JavaScript concepts can be combined into a useful browser-based tool.

[INSERT FINAL SCREENSHOT HERE]

Building small projects like this has also made it easier for me to understand JavaScript beyond individual syntax examples. Instead of only reading about Math.random(), DOM manipulation, and event listeners, I had to use them together to solve an actual problem.

If you're learning JavaScript, I recommend trying a similar project yourself and then adding one feature at a time. Even a small calculator can become a useful exercise when you start handling validation, edge cases, and a better user interface.

Demo and Source Code

You can add your actual project links here:

GitHub: YOUR-GITHUB-REPOSITORY

Live Demo: YOUR-LIVE-DEMO

Thanks for reading. If you have suggestions for improving the calculator or ideas for additional features, I'd be interested to hear them in the comments.