8.21 LAB: Quote web API (Fetch) In this lab, you will use a web API to fetch and display quotes on a selected topic, as

Post by **answerhappygod** » Fri Jul 01, 2022 5:38 am

: 8 21 Lab Quote Web Api Fetch In This Lab You Will Use A Web Api To Fetch And Display Quotes On A Selected Topic As 1 (47.72 KiB) Viewed 51 times

: 8 21 Lab Quote Web Api Fetch In This Lab You Will Use A Web Api To Fetch And Display Quotes On A Selected Topic As 2 (41.38 KiB) Viewed 51 times

: 8 21 Lab Quote Web Api Fetch In This Lab You Will Use A Web Api To Fetch And Display Quotes On A Selected Topic As 3 (42.49 KiB) Viewed 51 times

8.21 LAB: Quote web API (Fetch) In this lab, you will use a web API to fetch and display quotes on a selected topic, as shown below. Notable Quotes Select a topic: humor How many quotes? 3 Fetch Quotes 1. Two things are infinite: the universe and human stupidity, and I'm not sure about the universe - Albert Einstein 2 Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx 3. I want my children to have all the things I couldn't afford. Then I want to move in with them. - Phyllis Diller Quote web API A quote web API returns a collection of randomly selected quotes related to a given topic. The API supports two query string parameters: • topic - Specifies the requested topic. Valid topics are love, motivational, wisdom, and humor. • count - Specifies the number of quotes requested and must be a number from 1 to 5. Ex: The API request: https://wp.zybooks.com/quotes.php?topic=lovescount-3 returns 3 quotes about love, formatted in JSON: [ 1 { "quote": "If I know what love is, it is because of you.", "source": "Hermann Hesse" "quote": "The opposite of love is not hate, it's indifference.", "source": "Elie Wiesel" "quote": "Suffering passes, while love is eternal.", "source": "Laura Ingalls Wilder" If the topic is not given or not recognized, the API returns an error message.
Ex: The request for a "success" quote: https://wp.zybooks.com/quotes.php?topic=success&count=1 returns: "error": "Topic 'success' not found" Fetch the quote The fetchQuotes () function in quote js is called with the selected topic and count when the Fetch Quotes button is clicked. Currently, fetchQuotes () displays example quotes in an ordered list inside the <div> with ID quotes. Modify fetchQuotes () to use the Fetch API to request quotes from the quote web API Call fetch() with an appropriate URL based on the topic and count parameters. Then display the quotes in an ordered list. Each quote should be followed by a space, a dash, a space, and the source. Ex: If the user chooses "love" and "3" and presses Fetch Quotes, fetchQuotes() should place the returned quotes in an ordered list inside the <div> <div id="quotes"> <ol> <li>If I know what love is, it is because of you. Hermann Hesse</li> <li>The opposite of love is not hate, it's indifference. Elie Wiesel</li> <li>Suffering passes, while love is eternal. - Laura Ingalls Wilder</li> </ol> </div> If an error message is received, the error message should be displayed in the <div>. Ex: <div id="quotes"> Topic 'success' not found </div>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 +in 5 6 7009 8 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 381 32 3 4 35 30 33 34 36 37 38 39 48 42 5 40 41 43 44 <title>Notable Quotes</title> <script src="quote.js"></script> <style> body { font-family: Arial, Helvetica, sans-serif; } #quotes { </style> </head> <body> <h1>Notable Quotes</h1> <p> background-color: #F1EAFF; padding-top: 10px; padding-bottom: 10px; <label for="topicselection">Select a topic: </label> <select id="topicselection"> </p> <p> </select> </p> <p> Current file: index.html <option>Choose one</option> <option>love</option> <option>motivational</option> <option>wisdom</option> <option>humor</option> <label for="countselection">How many quotes?</label> <select id="countselection"> 45 </body> 46 </html> <option>1</option> <option>2</option> </select> <option selected>3</option> <option>4</option> <option>5</option> <button id="fetchQuotesBtn">Fetch Quotes</button> </p> <div id="quotes"> </div>