From 0402538ccab3c958ca820a1fbcb81dd4f5a7b73f Mon Sep 17 00:00:00 2001 From: Vedang Shailesh Joshi Date: Mon, 3 Jun 2024 16:23:22 +0530 Subject: [PATCH] Motivational Quote API is implemented --- .../MotivationalQuoteAPI/README.md | 57 +++++++++++++++++ .../MotivationalQuoteAPI/index.html | 17 +++++ .../MotivationalQuoteAPI/script.js | 26 ++++++++ .../MotivationalQuoteAPI/style.css | 64 +++++++++++++++++++ 4 files changed, 164 insertions(+) create mode 100644 Existing_API_Collection/MotivationalQuoteAPI/README.md create mode 100644 Existing_API_Collection/MotivationalQuoteAPI/index.html create mode 100644 Existing_API_Collection/MotivationalQuoteAPI/script.js create mode 100644 Existing_API_Collection/MotivationalQuoteAPI/style.css diff --git a/Existing_API_Collection/MotivationalQuoteAPI/README.md b/Existing_API_Collection/MotivationalQuoteAPI/README.md new file mode 100644 index 0000000..5390985 --- /dev/null +++ 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 new file mode 100644 index 0000000..4ba2a13 --- /dev/null +++ b/Existing_API_Collection/MotivationalQuoteAPI/index.html @@ -0,0 +1,17 @@ + + + + + + Random Motivational Quote + + + +
+

Motivational Quote

+
Click the button to get a quote!
+ +
+ + + diff --git a/Existing_API_Collection/MotivationalQuoteAPI/script.js b/Existing_API_Collection/MotivationalQuoteAPI/script.js new file mode 100644 index 0000000..9da720f --- /dev/null +++ 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 new file mode 100644 index 0000000..8241b02 --- /dev/null +++ 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); + } +}