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.
Top comments (1)
Great explanation! I’ve been experimenting with small JavaScript calculators myself, and projects like this are a really good way to understand DOM manipulation, event handling, and input validation in practice. I especially like how the functionality is broken down into smaller parts instead of treating the calculator as one big piece of code. Definitely gives me a few ideas for improving my own calculator projects.