dishamodi0910 · dishamodi0910 · Jul 20, 2024 · Jun 3, 2024
diff --git a/Existing_API_Collection/MotivationalQuoteAPI/README.md b/Existing_API_Collection/MotivationalQuoteAPI/README.md
@@ -0,0 +1,57 @@
+# Random Motivational Quote Generator
+
+This is a simple web application that displays a random motivational quote when a button is clicked. The quotes are fetched from an online API.
+
+## Table of Contents
+
+- [Demo](#demo)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Technologies Used](#technologies-used)
+- [Credits](#credits)
+- [License](#license)
+
+## Demo
+
+![Demo](demo.gif)
+
+## Features
+
+- Fetches a random motivational quote from the Quotable API.
+- Modern and aesthetic design with smooth animations and vibrant colors.
+- Responsive layout that works well on different screen sizes.
+
+## Installation
+
+1. Clone the repository:
+    ```sh
+    git clone https://github.com/your-username/random-quote-generator.git
+    cd random-quote-generator
+    ```
+
+2. Open `index.html` in your web browser:
+    ```sh
+    open index.html
+    ```
+
+## Usage
+
+1. Click the "Get Quote" button to fetch a new random motivational quote.
+2. The quote will be displayed in the quote box with a smooth animation.
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+- [Quotable API](https://github.com/lukePeavey/quotable) for fetching quotes
+
+## Credits
+
+- Design inspired by various modern web design practices.
+- Quotes provided by the [Quotable API](https://github.com/lukePeavey/quotable).
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
diff --git a/Existing_API_Collection/MotivationalQuoteAPI/index.html b/Existing_API_Collection/MotivationalQuoteAPI/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Motivational Quote</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Motivational Quote</h1>
+        <div id="quote" class="quote-box">Click the button to get a quote!</div>
+        <button id="quoteButton">Get Quote</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/MotivationalQuoteAPI/script.js b/Existing_API_Collection/MotivationalQuoteAPI/script.js
@@ -0,0 +1,26 @@
+document.getElementById('quoteButton').addEventListener('click', fetchQuote);
+
+async function fetchQuote() {
+    const quoteBox = document.getElementById('quote');
+    quoteBox.textContent = 'Fetching quote...';
+    try {
+        const response = await fetch('https://api.quotable.io/random');
+        const data = await response.json();
+        quoteBox.textContent = `"${data.content}" — ${data.author}`;
+        animateQuoteBox();
+    } catch (error) {
+        quoteBox.textContent = 'An error occurred. Please try again.';
+        console.error('Error fetching quote:', error);
+    }
+}
+
+function animateQuoteBox() {
+    const quoteBox = document.getElementById('quote');
+    quoteBox.style.backgroundColor = '#ff7e5f';
+    quoteBox.style.color = '#fff';
+    setTimeout(() => {
+        quoteBox.style.backgroundColor = '#fff';
+        quoteBox.style.color = '#555';
+    }, 500);
+}
+
diff --git a/Existing_API_Collection/MotivationalQuoteAPI/style.css b/Existing_API_Collection/MotivationalQuoteAPI/style.css
@@ -0,0 +1,64 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+    font-family: 'Roboto', sans-serif;
+    color: #333;
+}
+
+.container {
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 2rem 3rem;
+    border-radius: 15px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    animation: fadeIn 1s ease-in-out;
+}
+
+h1 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+    color: #ff7e5f;
+}
+
+.quote-box {
+    margin: 1.5rem 0;
+    padding: 1.5rem;
+    border: 2px solid #ff7e5f;
+    border-radius: 10px;
+    background-color: #fff;
+    font-size: 1.25rem;
+    color: #555;
+    transition: background-color 0.5s, color 0.5s;
+}
+
+button {
+    padding: 0.75rem 2rem;
+    font-size: 1rem;
+    color: #fff;
+    background-color: #ff7e5f;
+    border: none;
+    border-radius: 30px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+    background-color: #ff4e50;
+    transform: scale(1.05);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}