Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johndev19/random-quote-machine
This project is a Random Quote Machine, created as part of the FreeCodeCamp Front End Development Libraries Certification. It generates random quotes and allows users to tweet them.
https://github.com/johndev19/random-quote-machine
codecamp css freecodecamp frontend-development html random-quote-machine react react-js
Last synced: 13 days ago
JSON representation
This project is a Random Quote Machine, created as part of the FreeCodeCamp Front End Development Libraries Certification. It generates random quotes and allows users to tweet them.
- Host: GitHub
- URL: https://github.com/johndev19/random-quote-machine
- Owner: JohnDev19
- License: mit
- Created: 2024-07-16T05:31:42.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-16T05:37:22.000Z (4 months ago)
- Last Synced: 2024-10-17T10:33:41.195Z (30 days ago)
- Topics: codecamp, css, freecodecamp, frontend-development, html, random-quote-machine, react, react-js
- Language: CSS
- Homepage: https://johndev19.github.io/Random-Quote-Machine/
- Size: 7.81 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Random Quote Machine
## Overview
This project is a Random Quote Machine, created as part of the FreeCodeCamp Front End Development Libraries Certification. It generates random quotes and allows users to tweet them.
## Features
- Displays random quotes with their authors
- Generates a new random quote on button click
- Allows tweeting the current quote
## Technologies Used
- HTML5
- CSS3
- JavaScript (ES6+)
- React
- Font Awesome (for icons)
## User Stories Fulfilled
1. I can see a wrapper element with a corresponding `id="quote-box"`.
2. Within `#quote-box`, I can see an element with a corresponding `id="text"`.
3. Within `#quote-box`, I can see an element with a corresponding `id="author"`.
4. Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`.
5. Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`.
6. On first load, my quote machine displays a random quote in the element with `id="text"`.
7. On first load, my quote machine displays the random quote's author in the element with `id="author"`.
8. When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element.
9. My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element.
10. I can tweet the current quote by clicking on the `#tweet-quote` `a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote.
11. The `#quote-box` wrapper element should be horizontally centered.
## Installation and Setup
1. Clone this repository to your local machine.
2. Navigate to the project directory.
3. Open `index.html` in your web browser.
## Usage
- Click the "New Quote" button to generate a new random quote.
- Click the Twitter icon to tweet the current quote.
- The design adapts to different screen sizes for optimal viewing on various devices.
- The app supports dark mode based on system preferences.
## Contributing
Contributions, issues, and feature requests are welcome. Feel free to check [issues page](https://github.com/JohnDev19/random-quote-machine/issues) if you want to contribute.
## License
This project is open source and available under the [MIT License](LICENSE).
## Acknowledgements
- [FreeCodeCamp](https://www.freecodecamp.org/) for the project idea and requirements.
- [Font Awesome](https://fontawesome.com/) for the icons used in this project.