diff --git a/Calculators/Random-Word-Generator-Calculator/README.md b/Calculators/Random-Word-Generator-Calculator/README.md new file mode 100644 index 000000000..6969152ef --- /dev/null +++ b/Calculators/Random-Word-Generator-Calculator/README.md @@ -0,0 +1,15 @@ +#

Random Word Generator Calculator

+ +## Description :- + +This is a calculator that generates random words based on a specified starting letter and the desired number of words. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/78e57adb-0f79-4a4d-8cbe-20484b886b38) diff --git a/Calculators/Random-Word-Generator-Calculator/index.html b/Calculators/Random-Word-Generator-Calculator/index.html new file mode 100644 index 000000000..da8b118fb --- /dev/null +++ b/Calculators/Random-Word-Generator-Calculator/index.html @@ -0,0 +1,22 @@ + + + + + + + Random Word Generator Calculator + + +
+

Random Word Generator

+ + + + + +
+
+ + + + diff --git a/Calculators/Random-Word-Generator-Calculator/script.js b/Calculators/Random-Word-Generator-Calculator/script.js new file mode 100644 index 000000000..be31cf66a --- /dev/null +++ b/Calculators/Random-Word-Generator-Calculator/script.js @@ -0,0 +1,27 @@ +function generateWords() { + var startLetter = document.getElementById("start-letter").value.toLowerCase(); + var wordCount = document.getElementById("word-count").value; + + var apiUrl = "https://random-word-api.vercel.app/api?words=" + wordCount + "&letter=" + startLetter; + + fetch(apiUrl) + .then(response => response.json()) + .then(data => { + var resultContainer = document.getElementById("result-container"); + resultContainer.innerHTML = ""; + data.forEach((word, index) => { + var wordBox = document.createElement("div"); + wordBox.className = "word-box"; + wordBox.textContent = word; + resultContainer.appendChild(wordBox); + }); + + // Clear the input fields + document.getElementById("start-letter").value = ""; + document.getElementById("word-count").value = "1"; + }) + .catch(error => { + console.error("Error fetching random words:", error); + document.getElementById("result-container").textContent = "Failed to generate words. Please try again."; + }); +} diff --git a/Calculators/Random-Word-Generator-Calculator/style.css b/Calculators/Random-Word-Generator-Calculator/style.css new file mode 100644 index 000000000..5d8a280c4 --- /dev/null +++ b/Calculators/Random-Word-Generator-Calculator/style.css @@ -0,0 +1,91 @@ +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(to right, #ff7e5f, #feb47b); + margin: 0; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +.container { + background-color: #ffffff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + text-align: center; + width: 500px; + background-image: url('https://img.freepik.com/free-vector/hand-drawn-abc-background_23-2150598241.jpg'); + border: 5px solid black; +} + +h1 { + font-family: 'Verdana', sans-serif; + background: linear-gradient(to right, blue, #a510d1); + -webkit-background-clip: text; + color: transparent; + margin-bottom: 20px; +} + +label { + display: block; + margin-top: 10px; + font-size: 16px; + color: black; + font-weight: bolder; +} + +input[type="text"], input[type="number"] { + width: calc(100% - 20px); + padding: 10px; + margin-top: 5px; + border: 1px solid #cccccc; + border-radius: 5px; + box-sizing: border-box; +} + +button { + margin-top: 15px; + padding: 10px 20px; + background-color: #15dfea; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + font-weight: bold; +} + +input[type="text"] { + margin-bottom: 45px; /* Add this line */ +} + +button:hover { + background-color: #3815bc; +} + +.result-container { + margin-top: 20px; + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + padding: 10px; + background: linear-gradient(to right, #4facfe, #00f2fe); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + width: calc(100% - 40px); +} + +.word-box { + background-color: white; + color: black; + padding: 10px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: 100px; + text-align: center; + font-family: 'Courier New', Courier, monospace; +} diff --git a/index.html b/index.html index 959b5d5ed..e1518a0ec 100644 --- a/index.html +++ b/index.html @@ -2164,6 +2164,20 @@

Generates randomized English alphabets used in brain teaser activities.

+
+
+

Random Word Generator Calculator

+

Generates random words based on a specified starting letter and the desired number of words.

+ +
+

Ratio Calculator