Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/faizbyp/music-quote
Project for the FCC Front End Development Libraries Certification
https://github.com/faizbyp/music-quote
Last synced: 8 days ago
JSON representation
Project for the FCC Front End Development Libraries Certification
- Host: GitHub
- URL: https://github.com/faizbyp/music-quote
- Owner: faizbyp
- Created: 2024-05-27T01:58:46.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-28T13:49:58.000Z (7 months ago)
- Last Synced: 2024-05-28T21:30:17.661Z (7 months ago)
- Language: JavaScript
- Homepage: https://music-quote.vercel.app
- Size: 53.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Music Quote
https://music-quote.vercel.app/
The project uses React JS as the frontend library and Bootstrap as the CSS framework. The data of the quotes was collected inside a JavaScript array of objects so then it could be randomized when the user clicked on the button. The useState hook was used to rerender the DOM based on the quote selected by the randomizer. Besides that, user can also share the quote on their X/Twitter account directly. The quote text was passed into the X/Twitter intent URL as a query so all they had to do was click the button, and post the tweet.
## Development Logs
- June 8, 2024: Color changed on quote randomize
- May 28, 2024: Project launched
## User Stories
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-quot`e 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. Please run tests with browser's zoom level at 100% and page maximized.
## All Tests Passed
Visit the [test deployment](https://mellifluous-frangollo-f9256a.netlify.app/)
