JavaScript Application For Random Number Generator
Last Updated : 06 Jan, 2025
Creating a random number generator is a fun and practical project for beginners in JavaScript. It helps you learn how to handle user inputs, generate random values within a range, and dynamically update the user interface.
What We’re Going to Create
We’ll build a user-friendly application that allows users to:
- Enter a minimum and maximum range for generating random numbers.
- Generate a random number within the specified range.
- Reset the inputs and results to start fresh.
The application will have a clean interface and intuitive controls, making it easy for anyone to use.
Project Preview
JavaScript Application For Random Number GeneratorRandom Number Generator - HTML and CSS
The HTML code creates the structure for a Random Number Generator web application, including input fields for the minimum and maximum range, a button to generate the number, and a button to reset the inputs. It also displays the generated random number dynamically on the page and the CSS Styles the generate button, reset button and the result displaying area.
HTML <html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 300vh; background-color: #f2f2f2; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 30px; text-align: center; width: 300px; } h1 { font-size: 24px; margin-bottom: 20px; } .input-section { margin-bottom: 20px; } input[type="number"] { padding: 8px; margin: 10px 5px; width: 80px; border: 1px solid #ccc; border-radius: 5px; } button { padding: 10px 20px; margin-top: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #45a049; } button:active { background-color: #3e8e41; } #randomNumber { font-size: 24px; font-weight: bold; margin: 20px 0; color: #333; } #reset { background-color: #f44336; margin-top: 10px; } #reset:hover { background-color: #e53935; } </style> </head> <body> <div class="container"> <h1>Random Number Generator</h1> <div class="input-section"> <label for="min">Minimum:</label> <input type="number" id="min" value="1"> <label for="max">Maximum:</label> <input type="number" id="max" value="100"> </div> <button id="generate">Generate Random Number</button> <div class="result"> <p id="randomNumber">Click the button to generate</p> </div> <button id="reset">Reset</button> </div> </body> </html> In this example
- The container centers the app and styles the layout with a clean, minimal design.
- The input fields allow users to specify the range (minimum and maximum numbers).
- The buttons provide functionality to generate a random number or reset the form.
- Styling includes hover and active effects to make the UI interactive and user-friendly.
Random Number Generator - JavaScript Logic
The JavaScript code powers the functionality of the Random Number Generator by handling user input, generating random numbers within the specified range, and updating the result display. It also provides a reset feature to clear inputs and the displayed number.
JavaScript const min = document.getElementById('min'); const max = document.getElementById('max'); const genBtn = document.getElementById('generate'); const resetBtn = document.getElementById('reset'); const randNumDisplay = document.getElementById('randomNumber'); function genRandNum() { const minVal = parseInt(min.value); const maxVal = parseInt(max.value); if (isNaN(minVal) || isNaN(maxVal) || minVal >= maxVal) { alert("Please enter valid minimum and maximum values."); return; } const randNum = Math.floor(Math.random() * (maxVal - minVal + 1)) + minVal; randNumDisplay.textContent = randNum; } function reset() { min.value = 1; max.value = 100; randNumDisplay.textContent = "Click the button to generate"; } genBtn.addEventListener('click', genRandNum); resetBtn.addEventListener('click', reset); In this example
- Variables like min, max, genBtn, resetBtn, and randNumDisplay are used to reference specific HTML elements.
- The genRandNum() function fetches user input, validates the range, generates a random number, and updates the display dynamically.
- The reset() function restores default values for inputs and resets the display text.
- Event listeners connect the buttons to their respective functions for generating or resetting the random number.
Complete code
HTML <html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 300vh; background-color: #f2f2f2; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 30px; text-align: center; width: 300px; } h1 { font-size: 24px; margin-bottom: 20px; } .input-section { margin-bottom: 20px; } input[type="number"] { padding: 8px; margin: 10px 5px; width: 80px; border: 1px solid #ccc; border-radius: 5px; } button { padding: 10px 20px; margin-top: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #45a049; } button:active { background-color: #3e8e41; } #randomNumber { font-size: 24px; font-weight: bold; margin: 20px 0; color: #333; } #reset { background-color: #f44336; margin-top: 10px; } #reset:hover { background-color: #e53935; } </style> </head> <body> <div class="container"> <h1>Random Number Generator</h1> <div class="input-section"> <label for="min">Minimum:</label> <input type="number" id="min" value="1"> <label for="max">Maximum:</label> <input type="number" id="max" value="100"> </div> <button id="generate">Generate Random Number</button> <div class="result"> <p id="randomNumber">Click the button to generate</p> </div> <button id="reset">Reset</button> </div> <script> // Select DOM elements const min = document.getElementById('min'); const max = document.getElementById('max'); const genBtn = document.getElementById('generate'); const resetBtn = document.getElementById('reset'); const randNumDisplay = document.getElementById('randomNumber'); // Function to generate a random number function genRandNum() { const minVal = parseInt(min.value); const maxVal = parseInt(max.value); // Validate inputs if (isNaN(minVal) || isNaN(maxVal) || minVal >= maxVal) { alert("Please enter valid minimum and maximum values."); return; } // Generate a random number within the range const randNum = Math.floor(Math.random() * (maxVal - minVal + 1)) + minVal; randNumDisplay.textContent = randNum; } // Reset the inputs and result function reset() { min.value = 1; max.value = 100; randNumDisplay.textContent = "Click the button to generate"; } // Event listeners genBtn.addEventListener('click', genRandNum); resetBtn.addEventListener('click', reset); </script> </body> </html>