DEV Community

Roxana Davis
Roxana Davis

Posted on

Random Number Generator

The tool is a Random Number Generator implemented using HTML, CSS, and JavaScript. When the user clicks on the "Generate Number" button, the JavaScript function generateRandomNumber() is triggered, which generates a random number between 1 and 100 using the Math.random() function. The generated number is displayed on the web page using the innerHTML property of the

element with the id="result".

The HTML code includes a header with the title "Random Number Generator", a brief description of the tool, and the button to trigger the JavaScript function. The CSS code is used to style the page elements, including the font, button color, and footer.

The footer includes a copyright notice and can be used to include a link to the website that hosts the tool. This tool can be used for a variety of applications, such as generating a random number for a lottery, a game, or for selecting a winner in a contest.

<!DOCTYPE html>
<html>
<head>
    <title>Random Number Generator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Random Number Generator</h1>
    <p>Click the button to generate a random number:</p>
    <button onclick="generateRandomNumber()">Generate Number</button>
    <p id="result"></p>
    <script src="script.js"></script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

h1 {
    margin-top: 50px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

footer {
    margin-top: 50px;
    background-color: #ddd;
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode
function generateRandomNumber() {
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    document.getElementById("result").innerHTML = "Your random number is: " + randomNumber;
}

Enter fullscreen mode Exit fullscreen mode

This tool is developed by Roxana Davis from Poppy Playtime APK.

Top comments (2)

Collapse
 
jerry44544 profile image
james anderson

Sure! I can help you generate random numbers. How many random numbers would you like maca coffee online in pakistan, and within what range would you like them?

Collapse
 
zoyakhanblogger profile image
Zoya Khan

informative post :)