A simple, elegant web application that displays random inspirational quotes with the ability to generate new quotes, tweet them, copy to clipboard, and even have them read aloud.
- 🔄 Generate random inspirational quotes
- 🐦 Share quotes directly on Twitter
- 📋 Copy quotes to clipboard with one click
- 🔊 Text-to-speech functionality to hear quotes
- HTML5
- CSS3 (with Flexbox for responsive layout)
- JavaScript (ES6+)
- External APIs:
- ZenQuotes.io for quote generation
- Twitter Web Intent for sharing
- Web Speech API for text-to-speech
The application fetches random quotes from the ZenQuotes API and displays them on the screen. Users can:
- Click "New Quote" to fetch and display a new random quote
- Click "Tweet" to share the current quote on Twitter
- Click "Copy" to copy the quote and author to clipboard
- Click "Speak" to have the browser read the quote aloud
- Clone this repository:
git clone https://github.com/yourusername/quote-generator.git
- Navigate to the project directory:
cd quote-generator
- Open
index.htmlin your browser, or use a local development server.
Simply open the application in a modern web browser. The app will automatically load a random quote on startup. Use the buttons to interact with the quote:
- New Quote: Fetches and displays a new random quote
- Tweet: Opens Twitter with the quote pre-populated in a new tweet
- Copy: Copies the current quote and author to your clipboard
- Speak: Uses your browser's text-to-speech capabilities to read the quote aloud
You can easily customize the appearance by modifying the styles.css file:
- Change the background gradient in the
bodyselector - Modify the quote container styling in the
.quote-containerselector - Adjust button colors in the
buttonselector
This application works best in modern browsers that support:
- ES6+ JavaScript
- Fetch API
- Web Speech API
- Clipboard API
- Quotes provided by ZenQuotes API
- Icons by Font Awesome
- Add ability to filter quotes by category
- Implement local storage to save favorite quotes
- Add dark/light theme toggle
- Create a quotes collection page
Made with ❤️ by mayurCoder2004
