From 579bde51baa487a4863f6c9a009fc1490e2c8c2e Mon Sep 17 00:00:00 2001 From: Aryan Kumar Date: Fri, 11 Oct 2024 21:53:56 +0530 Subject: [PATCH] Feature: Quote Generator #4707 --- JS/LICENSE | 21 ++++++++ JS/README.md | 2 + JS/css/styles.css | 119 ++++++++++++++++++++++++++++++++++++++++++++++ JS/index.html | 31 ++++++++++++ JS/js/script.js | 60 +++++++++++++++++++++++ 5 files changed, 233 insertions(+) create mode 100644 JS/LICENSE create mode 100644 JS/README.md create mode 100644 JS/css/styles.css create mode 100644 JS/index.html create mode 100644 JS/js/script.js diff --git a/JS/LICENSE b/JS/LICENSE new file mode 100644 index 000000000..9cab69509 --- /dev/null +++ b/JS/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Aryan Kumar + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/JS/README.md b/JS/README.md new file mode 100644 index 000000000..78b6b63ea --- /dev/null +++ b/JS/README.md @@ -0,0 +1,2 @@ +# Quotify +A personalized daily inspiration tool that serves impactful quotes tailored to your preferences. diff --git a/JS/css/styles.css b/JS/css/styles.css new file mode 100644 index 000000000..618b050a2 --- /dev/null +++ b/JS/css/styles.css @@ -0,0 +1,119 @@ +/* Basic reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + /* Body styling */ + body { + font-family: 'Amatic SC', cursive; + background-color: #f0f0f0; + color: #333; + text-align: center; + padding: 20px; + } + + /* Container */ + .container { + max-width: 600px; + margin: 0 auto; + padding: 20px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + /* Heading */ + h1 { + font-size: 2.5rem; + margin-bottom: 20px; + color: #7f56da; + } + + /* Quote box styling */ + .quote-box { + margin-top: 20px; + } + + .quote { + font-size: 5.8rem; + font-weight: bold; + color: #333; + margin-bottom: 10px; + } + + .source { + font-size: 3.2rem; + font-style: bold; + } + + .citation { + display: block; + margin-top: 5px; + font-size: 1rem; + color: #888; + } + +/* Category label styling */ +label { + font-size: 1.2rem; + color: #333; + margin-right: 10px; + } + + /* Category dropdown styling */ + #category { + padding: 10px; + border: 2px solid #7f56da; + border-radius: 5px; + font-size: 1rem; + background-color: #fff; + color: #333; + cursor: pointer; + transition: border-color 0.3s ease; + } + + /* Change border color on focus */ + #category:focus { + border-color: #6934c7; + outline: none; + } + + /* Button styling */ + #loadQuote { + padding: 10px 20px; + background-color: #7f56da; + color: white; + border: none; + border-radius: 5px; + font-size: 1.2rem; + cursor: pointer; + transition: background-color 0.3s ease; + margin-left: 10px; + } + + /* Button hover effect */ + #loadQuote:hover { + background-color: #6934c7; + } + + /* Responsive styling */ + @media (max-width: 600px) { + .category-container { + flex-direction: column; + } + + .category { + margin-bottom: 10px; + } + + .quote { + font-size: 4.5rem; + } + + .source { + font-size: rem; + } + } + \ No newline at end of file diff --git a/JS/index.html b/JS/index.html new file mode 100644 index 000000000..ac6412f6d --- /dev/null +++ b/JS/index.html @@ -0,0 +1,31 @@ + + + + + + Category-Based Random Quote Generator + + + + +
+

"Select a category to generate a quote"

+

+
+ + + + + + + + + + + diff --git a/JS/js/script.js b/JS/js/script.js new file mode 100644 index 000000000..a24284447 --- /dev/null +++ b/JS/js/script.js @@ -0,0 +1,60 @@ +const apiKey = 'YOUR_API_KEY'; // Replace with your API key from api-ninjas + +// Fetch a random quote from the Ninja API based on the selected category +async function getRandomQuote(category) { + const apiKey = 'LiBjVnD6uNfUF7snLSRYHA==TMcG60tXyAxBVbH7'; // Replace with your actual API key + const url = `https://api.api-ninjas.com/v1/quotes?category=${category}`; + try { + const response = await fetch(url, { + method: 'GET', + headers: { + 'X-Api-Key': apiKey + } + }); + + if (!response.ok) { + throw new Error('Failed to fetch quote'); + } + + const data = await response.json(); + + // Return the fetched quote object (first quote) + return { + quote: data[0].quote, + source: data[0].author + }; + } catch (error) { + console.error('Error fetching quote:', error); + return { + quote: 'Sorry, no quote found for this category.', + source: '' + }; + } +} + +// Function to display the quote +async function printQuote() { + const category = document.getElementById("category").value; // Get selected category + const quotes = await getRandomQuote(category); // Fetch the random quote + const quoteContainer = document.getElementById("quote-box"); + + // Construct the HTML to display the quote and source + let quoteString = `

"${quotes.quote}"

${quotes.source}

`; + + quoteContainer.innerHTML = quoteString; + + // Assign a random color to the document background + document.body.style.backgroundColor = getRandomColor(); +} + +// Function to select random RGB color value +function getRandomColor() { + var red = Math.floor(Math.random() * 256); + var green = Math.floor(Math.random() * 256); + var blue = Math.floor(Math.random() * 256); + var randomColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; + return randomColor; +} + +// Event listener on the LoadQuote button to generate a new quote +document.getElementById("loadQuote").addEventListener("click", printQuote);