Good day, i need some hints and suggestion regarding a project i am working on your help is very much appreciated.

/***

• quotes array
  1. Create a variable named quotes and set it equal to an empty array.
  2. Add a minimum of five empty objects to your quotes array.
  3. Add data to your quote objects
The objects in the quotes array store the individual properties of the quotes.
  4. Add the following properties to each quote object:
     • quote - string - the actual quote
     • source - string - the person or character who said it
  5. Add a citation property to at least one quote object. The value should be a string holding a reference to the source of the quote, like the book, movie or song where the quote originates.
  6. Add a year property to at least one quote object. The value should be a string or number representing the year the quote originated. ***/

/***

• getRandomQuote function 5.Create the getRandomQuote function The getRandomQuote function should create a random number, and use that random number to return a random quote object from the quotes array.
  • Create a function named getRandomQuote.
  • In the function body, create a variable to store a random number ranging from zero to the index of the last item in the quotes array.
  • Lastly, the function should return a random quote object using the random number variable above and bracket notation on the quotes array. ***/

/***

• printQuote function
  1. Create the printQuote function The app should display a new quote each time the user clicks the "Show another quote" button using a printQuote function.
  2. Create a function named printQuote.
You will program the printQuote function to perform three tasks: call the getRandomQuote function, use the returned quote object to build a string of HTML and quote properties, then use that string to display a random quote in the browser.

  3. In the body of the printQuote function, create a variable to store a random quote object from the getRandomQuote() function.

  4. Create another variable to store the HTML string. Set it equal to a string containing two <p> elements. Use this code snippet as a guide for what the HTML string should look like at this point:
<p class="quote"> A random quote </p>
  5. <p class="source"> quote source </p>
  6. 

  7. The first <p> element should have a class equal to “quote”, and the random quote object’s .quote property nested between the opening and closing <p> tags.
  8. The second <p> element should have a class equal to “source”, and the random quote object’s .source property nested between the tags.
  9. Create two separate if statements below the variables. You will need to add decision making to this function:
  10. Project Warm Up: Using conditionals to test if objects or elements exist before trying to do something with them is a common developer task. For some helpful practice, check out the project Warm Up Conditional String.
  11. If the random quote object has a citation property, concatenate a <span> element with the class "citation" to the HTML string.
  12. If the random quote object has a year property, concatenate a <span> element with the class "year" to the HTML string.
  13. Use the following code snippet as a guide for what the HTML string should look like with the added "citation" and "year" <span> elements (like earlier, omit the second closing </p> tag for now):
<p class="quote"> A random quote </p>
  14. <p class="source"> quote source
  15. <span class="citation"> quote citation </span>
  16. <span class="year"> quote year </span>
  17. </p>


  18. Below the if statements, complete the string by concatenating a closing </p> tag to the HTML string. This is the closing tag for the second paragraph with the class source.

  19. Lastly, set the printQuote function to return the full HTML string displaying a random quote.
Use the following code snippet, along with the variable storing the string you’ve assembled, to update your project’s HTML with a random quote:
document.getElementById('quote-box').innerHTML = yourStringHere;
  20. 

Note: You'll learn all about document.getElementById() and .innerHTML in an upcoming course. In this project, it's going to help you select the 'quote-box' div and update its HTML content with the random quote markup.


***/

/***

• click event listener for the print quote button
• DO NOT CHANGE THE CODE BELOW!! ***/

document.getElementById('load-quote').addEventListener("click", printQuote, false);

Question: how do i code this? any hints and suggestions are welcome, thank you in advance for your help.