Feature: Quote Generator #4707

keshavsingh4522 · Oct 11, 2024 · 579bde5 · 579bde5
1 parent 6beac31
commit 579bde5
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 0 deletions.
diff --git a/JS/LICENSE 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
@@ -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
@@ -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;
+    }
+  }
+
diff --git a/JS/index.html b/JS/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Category-Based Random Quote Generator</title>
+  <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <div id="quote-box">
+      <p class="quote">"Select a category to generate a quote"</p>
+      <p class="source"></p>
+    </div>
+
+    <!-- Dropdown to select the category -->
+    <label for="category">Choose a category:</label>
+    <select id="category">
+      <option value="happiness">Happiness</option>
+      <option value="love">Love</option>
+      <option value="inspiration">Inspiration</option>
+      <option value="life">Life</option>
+      <option value="success">Success</option>
+    </select>
+
+    <!-- Button to generate a new quote -->
+    <button id="loadQuote">Generate Quote</button>
+
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/JS/js/script.js 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 = `<p class="quote">"${quotes.quote}"</p><p class="source">${quotes.source}</p>`;
+
+    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);