Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions GenerateRandomNumber/tedante/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Generate Random Number

This is a JavaScript program that generates a random number between two numbers. The user can input the number and the program will generate the number between user input.

## How to Use

1. Enter the first number in the first input box.
2. Enter the second number in the second input box.
3. Click the "Generate Random Number" button to generate a random number between the two numbers.
4. The program will display the random number

## Screenshot
![Random Number Screenshot](./assets/generate-random-number.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 73 additions & 0 deletions GenerateRandomNumber/tedante/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Randon Number</title>

<!-- Include Tailwind CSS and DaisyUI CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@1.20.0/dist/full.css" rel="stylesheet">
</head>

<body>

<!-- Navigation Bar -->
<div class="navbar bg-base-100">
<div class="flex-1">
<a class="btn btn-ghost normal-case text-xl">Generate Random Number</a>
</div>
</div>

<section class="py-12 bg-primary-500 text-white">
<div class="container mx-auto text-center">
<h2 class="text-3xl font-semibold mb-4">Generate Random Number</h2>
<p class="text-lg mb-4">Enter the range (lowest and highest numbers) for the random number:</p>
<div class="flex justify-center space-x-4 text-4xl">
<input type="number" id="lowestInput" class="w-20 h-16 text-lg text-center bg-white rounded-md text-black" placeholder="Lowest">
<span class="text-4xl">to</span>
<input type="number" id="highestInput" class="w-20 h-16 text-lg text-center bg-white rounded-md text-black" placeholder="Highest">
</div>
<p class="text-lg mt-4">Random Number:</p>
<p id="randomNumber" class="text-4xl mt-2">-</p>
<button id="generateButton" class="mt-4 btn btn-primary">Generate Random Number</button>
</div>
</section>

<!-- Footer Section -->
<footer class="py-4">
<div class="container mx-auto text-center">
<p>&copy; 2023 Build with ❤️</p>
</div>
</footer>

<script>
const lowestInput = document.getElementById("lowestInput");
const highestInput = document.getElementById("highestInput");
const randomNumberElement = document.getElementById("randomNumber");
const generateButton = document.getElementById("generateButton");

function generateRandomNumber() {
const lowest = parseInt(lowestInput.value) || 0;
const highest = parseInt(highestInput.value) || 100;

if (lowest >= highest) {
alert("Please enter a valid range where the lowest number is less than the highest number.");
return;
}

const randomNum = Math.floor(Math.random() * (highest - lowest + 1)) + lowest;
randomNumberElement.textContent = randomNum;
}

generateButton.addEventListener("click", generateRandomNumber);
</script>





</body>

</html>