Skip to content
A random quote generator built with HTML, CSS/Bootstrap, and jQuery
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
LICENSE
README.md
index.html
main.css
main.js

README.md

Random Quote Machine

Generates a random quote from the Quotes on Design API and a random background image from the Unsplash API

Table of Contents

Project Status

This project is currently: In Progress

Features

Complete:

  • Generate a random quote and background image when the "New Quote" button is clicked
  • Users can tweet the quote by clicking the Twitter icon button

To-Do:

  • Refactor code to utilize vanilla JavaScript
  • Incorporate additional APIs for quote generation
  • Allow users to select from a list of categories for quote generation
  • Allow users to select from a list of categories for background image generation
  • Implement additional options for sharing quotes to social media

User Stories Fulfilled:

  • User Story #1: I can see a wrapper element with a corresponding id="quote-box".
  • User Story #2: Within #quote-box, I can see an element with a corresponding id="text".
  • User Story #3: Within #quote-box, I can see an element with a corresponding id="author".
  • User Story #4: Within #quote-box, I can see a clickable element with a corresponding id="new-quote".
  • User Story #5: Within #quote-box, I can see a clickable element with a corresponding id="tweet-quote".
  • User Story #6: On first load, my quote machine displays a random quote in the element with id="text".
  • User Story #7: On first load, my quote machine displays the random quote's author in the element with id="author".
  • User Story #8: When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.
  • User Story #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.
  • User Story #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 it's href attribute to tweet the current quote.
  • User Story #11: The #quote-box wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.

Screenshots

Random Quote Example Screenshot

Random Quote Example Screenshot

Technologies

Built with:

  • HTML
  • CSS / Bootstrap
  • jQuery

Inspirations

This project was built as part of freeCodeCamp's Front End Libraries Certification.

Contact

Twitter - @CBStanley12

DEV - cbstanley12

License

MIT License: A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

You can’t perform that action at this time.