Merge pull request thinkswell#965 from yashwanthvarma18/RandomQuoteGe…

…nerator-yashwanthvarma18 Random Quote Generator- yashwanthvarma18
dayo4 · Oct 16, 2023 · 123623a · 123623a
2 parents 919706d + 562d94e
commit 123623a
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 0 deletions.
diff --git a/RandomQuote/yashwanthvarma18/README.md b/RandomQuote/yashwanthvarma18/README.md
@@ -0,0 +1,30 @@
+# Random Quote Generator
+
+A simple web application that generates random quotes using the [Type Fit API](https://type.fit/api/quotes).
+
+![Random Quote Generator](ss.png)
+
+## Features
+
+- Click the "Generate Quote" button to fetch and display a random quote.
+- The quotes are fetched from the [Type Fit API](https://type.fit/api/quotes).
+- Each quote is displayed with double quotation marks for proper formatting.
+
+
+## Installation
+
+1. Clone this repository or download the ZIP file.
+2. Open the `index.html` file in your web browser.
+
+## Usage
+
+- Click the "Generate Quote" button to fetch and display a new random quote.
+- Enjoy insightful and inspirational quotes.
+
+
+## Acknowledgments
+
+- [Type Fit API](https://type.fit/api/quotes) for providing the quotes.
+
+<!-- Created By YASHWANTH VARMA -->
+
diff --git a/RandomQuote/yashwanthvarma18/index.html b/RandomQuote/yashwanthvarma18/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&family=Merriweather:wght@700&family=Montserrat:wght@200&family=Oswald:wght@200;500&family=Poppins:wght@300&family=Signika:wght@300&family=Teko:wght@500&family=Titillium+Web:wght@600&display=swap" rel="stylesheet">
+    <title>Quote GENERATOR</title>
+</head>
+<body>
+    <div class="container">
+        <h1>QUOTE Generator</h1>
+        <button id="generateQuote">Generate Quote</button>
+        <p id="quoteText"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+</body>
+</html>
diff --git a/RandomQuote/yashwanthvarma18/script.js b/RandomQuote/yashwanthvarma18/script.js
@@ -0,0 +1,20 @@
+const quoteText = document.getElementById('quoteText');
+const generateQuoteButton = document.getElementById('generateQuote');
+
+generateQuoteButton.addEventListener('click', getQuote);
+
+function getQuote() {
+  const settings = {
+    "async": true,
+    "crossDomain": true,
+    "url": "https://type.fit/api/quotes",
+    "method": "GET"
+  };
+
+  $.ajax(settings).done(function (response) {
+    const data = JSON.parse(response);
+    const randomIndex = Math.floor(Math.random() * data.length);
+    const randomQuote = data[randomIndex].text;
+    quoteText.innerText = `"${randomQuote}"`; // Add double quotation marks around the quote
+  });
+}
diff --git a/RandomQuote/yashwanthvarma18/ss.png b/RandomQuote/yashwanthvarma18/ss.png
diff --git a/RandomQuote/yashwanthvarma18/style.css b/RandomQuote/yashwanthvarma18/style.css
@@ -0,0 +1,62 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-image: url('https://images4.alphacoders.com/133/1330757.png');
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: #fff;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.3); /* Grayish background with 30% opacity */
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(206, 192, 192, 0.2);
+    backdrop-filter: blur(5px); /* Apply a blur effect */
+    padding: 20px;
+    max-width: 400px;
+    margin: 0 auto;
+    height: 300px; /* Fixed height for the box */
+    overflow-y: auto; /* Allow vertical scrolling if needed */
+    text-align: center; /* Center-align text */
+}
+
+h1 {
+    margin-top: 60px;
+    color: #fff;
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 36px;
+}
+
+button {
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    padding: 8px 16px;
+    font-size: 18px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+    transition: transform 0.2s ease; /* Add transition for smooth scaling */
+    font-family: 'Fjalla One', sans-serif;
+}
+
+button:hover {
+    background-color: #0056b3;
+    transform: scale(1.05); /* Scale up by 5% on hover */
+}
+
+#quoteText {
+    font-size: 18px;
+    color: #fff;
+    line-height: 1.5; /* You can adjust this value as needed for spacing */
+    font-family: 'Merriweather', serif;
+}