Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Random Number Generator #1198

Closed
wants to merge 4 commits into from
Closed

Added Random Number Generator #1198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80ec207
random-word commit
Janani-m17 Jun 5, 2024
591b82d
random number commit
Janani-m17 Jun 5, 2024
edfd93f
c commit
Janani-m17 Jun 5, 2024
06d1c3c
conflict commit
Janani-m17 Jun 5, 2024
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
31 changes: 31 additions & 0 deletions Calculators/Random-Number-Generator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Random Number Generator

This is a simple Random Number Generator built using HTML, CSS, and JavaScript.

## Features

- Generates a random number between 1 and 100.
- Attractive blue-themed design.
- Responsive and centered layout.

## How to Use

1. Clone the repository or download the files.
2. Open the `index.html` file in your web browser.
3. Click the "Generate Number" button to see a random number displayed.

## File Structure

- `index.html`: The main HTML file.
- `styles.css`: The CSS file for styling the page.
- `script.js`: The JavaScript file containing the logic for generating a random number.

## Folder Structure

RandomNumberGenerator/
│
├── index.html
├── styles.css
├── script.js
└── README.md

18 changes: 18 additions & 0 deletions Calculators/Random-Number-Generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Number Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Random Number Generator</h1>
<p>Click the button to generate a random number.</p>
<button onclick="generateRandomNumber()">Generate Number</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions Calculators/Random-Number-Generator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
function generateRandomNumber() {
const randomNumber = Math.floor(Math.random() * 100) + 1;
document.getElementById('result').innerText = 'Random Number: ' + randomNumber;
}
46 changes: 46 additions & 0 deletions Calculators/Random-Number-Generator/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
body {
background-color: #e0f7fa;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
text-align: center;
background-color: #0288d1;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #fff;
}

h1 {
margin: 0 0 20px;
}

button {
background-color: #0277bd;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 0;
cursor: pointer;
border-radius: 5px;
}

button:hover {
background-color: #01579b;
}

#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
Loading