From 591b82d4f21c9233efffddc82622d88c6c26563e Mon Sep 17 00:00:00 2001 From: Janani Manikandan Date: Wed, 5 Jun 2024 16:42:58 +0530 Subject: [PATCH] random number commit --- Calculators/Random-Number-Generator/README.md | 31 +++++++++++++ .../index.html | 9 ++-- Calculators/Random-Number-Generator/script.js | 4 ++ .../Random-Number-Generator/styles.css | 46 +++++++++++++++++++ Calculators/Random-Word-Generator/README.md | 22 --------- Calculators/Random-Word-Generator/script.js | 10 ---- Calculators/Random-Word-Generator/styles.css | 46 ------------------- index.html | 8 ++-- 8 files changed, 90 insertions(+), 86 deletions(-) create mode 100644 Calculators/Random-Number-Generator/README.md rename Calculators/{Random-Word-Generator => Random-Number-Generator}/index.html (54%) create mode 100644 Calculators/Random-Number-Generator/script.js create mode 100644 Calculators/Random-Number-Generator/styles.css delete mode 100644 Calculators/Random-Word-Generator/README.md delete mode 100644 Calculators/Random-Word-Generator/script.js delete mode 100644 Calculators/Random-Word-Generator/styles.css diff --git a/Calculators/Random-Number-Generator/README.md b/Calculators/Random-Number-Generator/README.md new file mode 100644 index 000000000..05e7889a0 --- /dev/null +++ b/Calculators/Random-Number-Generator/README.md @@ -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 + diff --git a/Calculators/Random-Word-Generator/index.html b/Calculators/Random-Number-Generator/index.html similarity index 54% rename from Calculators/Random-Word-Generator/index.html rename to Calculators/Random-Number-Generator/index.html index 06ba8b1c4..e446d905e 100644 --- a/Calculators/Random-Word-Generator/index.html +++ b/Calculators/Random-Number-Generator/index.html @@ -3,14 +3,15 @@ - Random Word Generator + Random Number Generator
-

Random Word Generator

-
Click the button to generate a word
- +

Random Number Generator

+

Click the button to generate a random number.

+ +
diff --git a/Calculators/Random-Number-Generator/script.js b/Calculators/Random-Number-Generator/script.js new file mode 100644 index 000000000..8af8c76b2 --- /dev/null +++ b/Calculators/Random-Number-Generator/script.js @@ -0,0 +1,4 @@ +function generateRandomNumber() { + const randomNumber = Math.floor(Math.random() * 100) + 1; + document.getElementById('result').innerText = 'Random Number: ' + randomNumber; +} diff --git a/Calculators/Random-Number-Generator/styles.css b/Calculators/Random-Number-Generator/styles.css new file mode 100644 index 000000000..cf2e610f6 --- /dev/null +++ b/Calculators/Random-Number-Generator/styles.css @@ -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; +} diff --git a/Calculators/Random-Word-Generator/README.md b/Calculators/Random-Word-Generator/README.md deleted file mode 100644 index 48c9b92bc..000000000 --- a/Calculators/Random-Word-Generator/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Random Word Generator - -This is a simple Random Word Generator built with HTML, CSS, and JavaScript. It generates a random word from a predefined list each time the button is clicked. The project uses a blue theme for an attractive and clean design. - -## Features - -- Displays a random word from a predefined list. -- Attractive blue-themed design. -- Responsive layout for different screen sizes. - -## Files - -- `index.html`: The main HTML file. -- `styles.css`: The CSS file for styling the webpage. -- `script.js`: The JavaScript file containing the logic for generating random words. -- `README.md`: The README file with project details. - -## Usage - -1. Clone or download the repository. -2. Open `index.html` in a web browser. -3. Click the "Generate Word" button to display a random word. diff --git a/Calculators/Random-Word-Generator/script.js b/Calculators/Random-Word-Generator/script.js deleted file mode 100644 index 4c08620da..000000000 --- a/Calculators/Random-Word-Generator/script.js +++ /dev/null @@ -1,10 +0,0 @@ -const words = [ - "serendipity", "ephemeral", "luminescence", "ethereal", "resonance", - "ineffable", "sonder", "labyrinthine", "sonder", "petrichor" -]; - -function generateWord() { - const randomIndex = Math.floor(Math.random() * words.length); - const randomWord = words[randomIndex]; - document.getElementById('wordDisplay').innerText = randomWord; -} diff --git a/Calculators/Random-Word-Generator/styles.css b/Calculators/Random-Word-Generator/styles.css deleted file mode 100644 index c31053a42..000000000 --- a/Calculators/Random-Word-Generator/styles.css +++ /dev/null @@ -1,46 +0,0 @@ -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: #0288d1; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - color: white; -} - -h1 { - margin-bottom: 20px; -} - -.word-display { - font-size: 24px; - margin-bottom: 20px; - padding: 10px; - border: 2px solid #01579b; - border-radius: 5px; - background: #03a9f4; -} - -button { - background: #01579b; - color: white; - border: none; - padding: 10px 20px; - font-size: 16px; - border-radius: 5px; - cursor: pointer; - transition: background 0.3s; -} - -button:hover { - background: #0277bd; -} diff --git a/index.html b/index.html index 91344b1c7..255d0abfb 100644 --- a/index.html +++ b/index.html @@ -1744,13 +1744,13 @@

Calculates the Quotient and Remainder.

-

Random Word Generator

-

It randomly generates a word.

+

Random Number Generator

+

It randomly generates a number.

- + - + Source Code