Random Quote Generator

• JavaScript
• HTML
• CSS
• WebStorm
• GitHub

PROJECT SCREENSHOT

Requirements:

• Create an array of JavaScript objects to hold the data for your quotes.
  • Name the array quotes.
  • The quotes array should be accessible in the global scope.
• Each quote object in the quotes array should have
  • A quote property which contains a string: the text of the quote that will be displayed on the page.
  • A source property which contains a string identifying the creator of the quote. For example: "Mark Twain" or "Traditional Irish proverb.”
  • An optional citation property which contains a string identifying where the quote comes from, like a speech or publication. For example, "Famous Anonymous Jokes."
  • If there is no known publication, do not include this property on the object.
  • An optional year property which contains a number identifying the date of the quote. For example, 1997.
  • If there is no known date, then do not include this property on the object.
• Create a function named getRandomQuote which:
  • selects a random quote object from the quotes array
  • returns the randomly selected quote object
• Create a function named printQuote which follows these rules:
  • printQuote calls the getRandomQuote function and stores the returned quote object in a variable
  • printQuote constructs a string containing the different properties of the quote object using the following HTML template:

<p class="quote"> [quote here] </p>
<p class="source"> [source here]
  <span class="citation"> [citation here] </span>
  <span class="year"> [year here] </span>
</p>

• printQuote doesn't add a span for a citation if there is no citation property for the quote
• printQuote doesn't add a span for the year property for the quote
• printQuote displays the final HTML string to the page. You can use this JS snippet to accomplish that:

document.getElementById('quote-box').innerHTML

• Add comments to your code
• Check for cross-browser compatibility with at least 3 browsers

Extra Credit Criteria

• Add more properties to the quote object. For example, a tags property could include a list of "tags" like "humor", "business", or "politics" to categorize each quote.
• When the quote changes, randomly change the background color of the page.
• Don't display a random quote more than once until ALL quotes from the array have been displayed.
• To help reviewers (and yourself) verify that the quotes don’t repeat until they’ve all been displayed, log the quote to the console each time the “Show Another Quote” button is clicked.
• Refresh the quote after a set amount of time. For example, every 30 seconds, make a new quote appear. (You can use the setInterval() or setTimeout() method to do this.

Resources

• setInterval
• setTimeout
• Color names

Issues

Review the css with mobile first in mind.

Define media queries in terms of min-width

@media (min-width: 769px) {
	.container {
		width: 70%;
		max-width: 1000px;
		margin: 0 auto;
	}
}

For the random quotes website, I'll need to have an even smaller min-width initially.

One Rule for All

* {
  box-sizing: border-box;
}