Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sabeer-junaid/quotify
✨ A simple and elegant 📃 quote generator website that displays random inspirational quotes. this project is perfect for anyone looking to add a touch of motivation to their day. The design is clean, responsive, and easy to customize. 💻
https://github.com/sabeer-junaid/quotify
api contribute contribute-here contribute-repository css good-first-issue good-practices html javascript open-source quote-generator quotes-api
Last synced: 7 days ago
JSON representation
✨ A simple and elegant 📃 quote generator website that displays random inspirational quotes. this project is perfect for anyone looking to add a touch of motivation to their day. The design is clean, responsive, and easy to customize. 💻
- Host: GitHub
- URL: https://github.com/sabeer-junaid/quotify
- Owner: Sabeer-Junaid
- License: mit
- Created: 2024-05-31T13:47:29.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-06-17T23:33:06.000Z (5 months ago)
- Last Synced: 2024-06-18T00:54:31.809Z (5 months ago)
- Topics: api, contribute, contribute-here, contribute-repository, css, good-first-issue, good-practices, html, javascript, open-source, quote-generator, quotes-api
- Language: HTML
- Homepage: https://sabeer-junaid.github.io/quotify
- Size: 103 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Quote Generator
A simple and elegant quote generator website that displays random inspirational quotes. this project is perfect for anyone looking to add a touch of motivation to their day. The design is clean, responsive, and easy to customize.
## 🌟 Key Features
1. #### Random Quote Display
* Display a random quote from a collection each time the page loads.
* Show the quote text and author.
2. #### New Quote Button
* A button to fetch and display a new random quote without refreshing the page.
3. #### API Integration
* Fetch quotes from a public quotes API for a diverse collection of quotes.
* Handle API errors gracefully, with fallback quotes if the API call fails.
4. #### Responsive Design
* Ensure the layout is responsive and looks good on all devices (desktops, tablets, and mobile phones).
* Sharing Options
5. #### Provide buttons to share the quote on social media platforms like Twitter and Facebook.
* Enable copying the quote to the clipboard for easy sharing.
* Loading Indicator
6. #### Display a loading indicator while fetching a new quote to enhance user experience.
* Customizable Themes (Optional)
7. #### Allow users to switch between different themes (e.g., light and dark mode) for better user experience and accessibility.
* Animation Effects (Optional)
8. #### Add smooth transition or animation effects when a new quote is displayed.
- Quote Categories (Optional)
9. #### Allow users to filter quotes by category (e.g., inspirational, motivational, humorous).
- Offline Support (Optional)
## 🛠️ Built With
## 👩💻 Development Steps
#### 1. Setup and Planning
- Define requirements and key features.
- Choose tools (HTML, CSS, JavaScript).
#### 2. Project Initialization
- Create project structure.
- Set up Git for version control.
#### 3. Design User Interface
- Create `index.html` for basic structure.
- Style with `styles.css`.
#### 4. Fetch and Display Quotes
- Integrate with a quotes API using `fetch()` in `scripts.js`.
- Dynamically display quotes on the webpage.
#### 5. Add Interactivity
- Implement "New Quote" button functionality.
- Add a loading indicator for fetching new quotes.
- Integrate sharing options for social media.
#### 6. Enhance User Experience
- Ensure responsive design with CSS media queries.
- Add accessibility features.
- Optional: Implement theme switching.
#### 7. Testing and Debugging
- Test functionality and fix bugs.
- Perform cross-browser testing.
#### 8. Deployment
- Minify CSS and JavaScript files.
- Deploy to a hosting service (e.g., GitHub Pages, Netlify).
#### 9. Documentation and Community Engagement
- Write `README.md` with usage instructions.
- Share on GitHub and encourage contributions.
#### 10. Continuous Improvement
- Gather feedback.
## 🚀 Getting Started
1. Clone the project repository:
```bash
git clone https://github.com/Sabeer-Junaid/quotify.git
```
2.Navigate to the project directory:
```
cd quotify
```
3. Once the index.html file is opened, you should see your Quotify project running in your web browser.
## 🤝 Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
check out CONTRIBUTING.md
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📄 License