{"id":29174890,"url":"https://github.com/pvm-harshavardhan/quote-generator","last_synced_at":"2026-04-19T04:35:45.075Z","repository":{"id":302271584,"uuid":"1011848464","full_name":"pvm-harshavardhan/quote-generator","owner":"pvm-harshavardhan","description":"A modern, responsive quote generator app built with HTML, Tailwind CSS, and JavaScript. Instantly fetch random quotes, listen in different voices, copy to clipboard, and share to Twitter—all in a clean, user-friendly interface.","archived":false,"fork":false,"pushed_at":"2025-07-01T12:42:02.000Z","size":0,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-01T13:25:38.203Z","etag":null,"topics":["api","api-ninjas","css3","es6","frontend","frontend-web","html5","javascript","rest","rest-api","restful-api","tailwindcss","web-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pvm-harshavardhan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-01T12:30:10.000Z","updated_at":"2025-07-01T12:43:26.000Z","dependencies_parsed_at":"2025-07-01T13:26:31.661Z","dependency_job_id":"abeaa377-6652-46d6-afbb-e17eb474323c","html_url":"https://github.com/pvm-harshavardhan/quote-generator","commit_stats":null,"previous_names":["pvm-harshavardhan/quote-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pvm-harshavardhan/quote-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fquote-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fquote-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fquote-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fquote-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pvm-harshavardhan","download_url":"https://codeload.github.com/pvm-harshavardhan/quote-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvm-harshavardhan%2Fquote-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31995167,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","api-ninjas","css3","es6","frontend","frontend-web","html5","javascript","rest","rest-api","restful-api","tailwindcss","web-development"],"created_at":"2025-07-01T15:25:44.394Z","updated_at":"2026-04-19T04:35:45.057Z","avatar_url":"https://github.com/pvm-harshavardhan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ Beautiful Quote Generator\n\nA modern, responsive quote generator built with HTML, Tailwind CSS, and JavaScript. Instantly fetches inspiring quotes from a public API, lets you listen to them in any available voice, copy to clipboard with a progress bar, and share directly to Twitter—all in a beautiful, glassy blue UI, smooth interactions, voice playback, social sharing, and more.\n\n![App Screenshot](./project_screenshot.png)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)\n[![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)\n[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript\u0026logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwindcss\u0026logoColor=white)](https://tailwindcss.com/)\n![API](https://img.shields.io/badge/API-API_Ninjas-4CAF50?logo=actix)\n[![Font Awesome](https://img.shields.io/badge/Font_Awesome-538dd7?logo=fontawesome\u0026logoColor=white)](https://fontawesome.com/)\n[![Git](https://img.shields.io/badge/Git-F05032?logo=git\u0026logoColor=white)](https://git-scm.com/)\n[![GitHub](https://img.shields.io/badge/GitHub-181717?logo=github\u0026logoColor=white)](https://github.com/)\n[![GitHub Pages](https://img.shields.io/badge/GitHub-Pages-181717?logo=github\u0026logoColor=white)](https://github.com/)\n\n---\n\n## ✨ Features\n\n- **📜 Random Quotes**: Instantly fetches a new quote and author from the API\n- **🏷️ Category Ribbon**: Prominently displays the quote's category\n- **🔊 Voice Playback**: Listen to quotes in different voices (selectable)\n- **📤 Social Sharing**: Share quotes directly to Twitter\n- **📋 Copy to Clipboard**: Copy the quote and author with one click\n- **🎨 Modern UI**: Elegant, blue-gradient UI with smooth transitions and responsive design\n- **📱 Fully Responsive**: Works beautifully on desktop, tablet, and mobile\n- **⚡ Fast \u0026 Lightweight**: No frameworks or build tools required—just open and use!\n- **🕘 Loading \u0026 Error Handling**: Friendly loading and error messages\n\n---\n\n## 🎮 Usage Guide\n\n### Basic Controls\n\n- **New Quote:** Click the \"New Quote\" button to fetch a new random quote.\n- **Listen:** Click the speaker icon to hear the quote in your selected voice/language.\n- **Change Voice:** Use the dropdown to pick a different voice/language; audio will switch instantly if playing.\n- **Copy:** Click the clipboard icon to copy the quote and author. A popup with a progress bar will confirm success.\n- **Share:** Click the Twitter icon to open a tweet composer with the quote pre-filled.\n\n### Error Handling\n- If the API fails, a friendly error message will appear\n- Voice playback is disabled if not supported by your browser\n\n---\n\n## 🔧 Tech Stack\n\n- **HTML5**: Semantic markup\n- **Tailwind CSS**: Utility-first CSS framework via CDN\n- **JavaScript ES6+**: Async/await, DOM manipulation, fetch API\n- **Font Awesome**: Icon library via CDN\n- **API Ninjas Quotes API**: Real-time quotes and categories\n- **Git** – Version control\n- **GitHub** – Code hosting and collaboration\n\n---\n\n## 🛠️ Getting Started\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/pvm-harshavardhan/quote-generator.git\n   ```\n2. **Change to the project directory:**\n   ```bash\n   cd quote-generator\n   ```\n3. **Update the API key:**\n   - Open `app.js` and replace the placeholder API key with your own from [API Ninjas](https://api-ninjas.com/profile).\n4. **Open the app:**\n   - Open `index.html` in your web browser.\n\n5. **Start generating quotes!** ✨\n\n_No build step or server required!_\n\n---\n\n## 📁 Project Structure\n\n```\nquote-generator/\n├── 📄 index.html     # Main HTML file with Tailwind \u0026 Font Awesome CDN\n├── ⚡ app.js         # JavaScript logic for quotes, UI, and audio\n```\n\n---\n\n## 🔑 API Configuration\n\nThe app uses the **API Ninjas Quotes API** for real-time quote data:\n\n- **API Key**: Configured in `app.js` near the top\n- **Base URL**: `https://api.api-ninjas.com/v1/quotes`\n- **Rate Limits**: See [API Ninjas documentation](https://api-ninjas.com/api/quotes) for current limits\n- **Free Tier**: Available for basic usage\n\n**🔄 Want to use a different quote API provider?**  \nYou can easily switch to another API by updating the endpoint and API key in `app.js`.  \nJust make sure the new API returns a quote and author in its response, and adjust the code if the response format is different.\n\n---\n\n## 📱 Browser Compatibility\n\n- ✅ Chrome (recommended)\n- ✅ Firefox\n- ✅ Safari\n- ✅ Edge\n- ⚠️ Internet Explorer (limited support)\n\n---\n\n## 🐛 Troubleshooting\n\n### **Quotes Not Loading?**\n1. Check your internet connection\n2. Ensure the API key is valid and not rate-limited\n3. Check browser console for errors\n4. Verify file paths in the code\n\n### **Audio/Voice Issues?**\n1. Some browsers/devices may not support all voices\n2. Try refreshing the page or selecting a different voice\n\n### **Styling Issues?**\n1. Make sure Tailwind CSS and Font Awesome CDNs are accessible\n2. Clear browser cache\n\n---\n\n## 🖼️ Customization \u0026 Screenshots\n\n- Update colors and styles in Tailwind classes in `index.html`\n- Add more social sharing options in `app.js` if needed\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome!  \nFeel free to open issues or submit pull requests to improve the app.\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n## 📞 Contact\n\nYour Name - [@pvm_harsha](https://x.com/pvm_harsha)   \nProject Link: [Quote Generator Web Project](https://github.com/pvm-harshavardhan/quote-generator)\n\n---\n\n**Made with ❤️ by P VM Harsha Vardhan**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvm-harshavardhan%2Fquote-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpvm-harshavardhan%2Fquote-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvm-harshavardhan%2Fquote-generator/lists"}