diff --git a/Quote-Generator-Web-App/index.html b/Quote-Generator-Web-App/index.html new file mode 100644 index 0000000..e444225 --- /dev/null +++ b/Quote-Generator-Web-App/index.html @@ -0,0 +1,23 @@ + + + + + + Quote Generator + + + +
+
+
Loading...
+
+
+
+ + + +
+
+ + + diff --git a/Quote-Generator-Web-App/script.js b/Quote-Generator-Web-App/script.js new file mode 100644 index 0000000..1435088 --- /dev/null +++ b/Quote-Generator-Web-App/script.js @@ -0,0 +1,64 @@ +const quoteTextElement = document.getElementById('quoteText'); +const quoteAuthorElement = document.getElementById('quoteAuthor'); +const generateBtn = document.getElementById('generateBtn'); +const shareBtn = document.getElementById('shareBtn'); +const copyBtn = document.getElementById('copyBtn'); + +// JavaScript code as provided in the previous responses + + +// Function to fetch a random quote from the "type.fit" Quote API +async function getQuote() { + try { + const response = await fetch('https://type.fit/api/quotes'); + const data = await response.json(); + const randomIndex = Math.floor(Math.random() * data.length); + const quote = data[randomIndex]; + quoteTextElement.textContent = `"${quote.text}"`; + quoteAuthorElement.textContent = `- ${quote.author || 'Unknown'}`; + } catch (error) { + quoteTextElement.textContent = 'Failed to fetch a quote. Please try again later.'; + quoteAuthorElement.textContent = ''; + } + } +// Same as before... + +// Function to share the quote on Twitter +function shareOnTwitter() { + const quoteText = encodeURIComponent(quoteTextElement.textContent); + const quoteAuthor = encodeURIComponent(quoteAuthorElement.textContent.replace('- ', '')); + const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText} - ${quoteAuthor}`; + window.open(twitterUrl, '_blank'); +} + +// Function to copy the quote to clipboard +// Function to copy the quote to clipboard +function copyToClipboard() { + const quoteToCopy = `"${quoteTextElement.textContent}" - ${quoteAuthorElement.textContent}`; + const tempTextArea = document.createElement('textarea'); + tempTextArea.value = quoteToCopy; + document.body.appendChild(tempTextArea); + tempTextArea.select(); + document.execCommand('copy'); + document.body.removeChild(tempTextArea); + + // Show success message + const successMessage = document.createElement('div'); + successMessage.textContent = 'Quote copied to clipboard!'; + successMessage.classList.add('success-message'); + document.body.appendChild(successMessage); + + // Remove the success message after a few seconds + setTimeout(() => { + document.body.removeChild(successMessage); + }, 2000); + } + + +// Event listeners for the "Generate Quote", "Share", and "Copy" buttons +generateBtn.addEventListener('click', getQuote); +shareBtn.addEventListener('click', shareOnTwitter); +copyBtn.addEventListener('click', copyToClipboard); + +// Initial quote load on page load +getQuote(); diff --git a/Quote-Generator-Web-App/styles.css b/Quote-Generator-Web-App/styles.css new file mode 100644 index 0000000..43f453c --- /dev/null +++ b/Quote-Generator-Web-App/styles.css @@ -0,0 +1,47 @@ +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + font-family: Arial, sans-serif; + background-color: #f0f0f0; + } + + .container { + text-align: center; + } + + .quote-box { + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; + max-width: 500px; + margin: 0 auto; + } + + .quote-text { + font-size: 24px; + font-weight: bold; + } + + .quote-author { + margin-top: 10px; + font-size: 18px; + } + + .generate-btn, + .share-btn, + .copy-btn { + padding: 10px 20px; + font-size: 18px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + margin: 5px; + } + \ No newline at end of file