4.29 LAB: Quote web API (XMLHttpRequest) In this lab, you will use a web API to fetch and display quotes on a selected topic, as shown below. 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=love&count=3 returns 3 quotes about love, formatted in JSON: [ { "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 with ID quotes. Modify fetchQuotes() to use the XMLHttpRequest object to request quotes from the quote web API. Set the XMLHttpRequest's responseType to expect a JSON response. Create a new function called responseReceivedHandler() that receives the XMLHttpRequest response and displays 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, responseReceivedHandler() should place the returned quotes in an ordered list inside the : If I know what love is, it is because of you. - Hermann Hesse The opposite of love is not hate, it's indifference. - Elie Wiesel Suffering passes, while love is eternal. - Laura Ingalls Wilder If an error message is received, the error message should be displayed in the . Ex: Topic 'success' not found

4.29 LAB: Quote web API (XMLHttpRequest) In this lab, you will use a web API to fetch and display quotes on a selected topic, as shown below. 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=love&count=3 returns 3 quotes about love, formatted in JSON: [ { "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 with ID quotes. Modify fetchQuotes() to use the XMLHttpRequest object to request quotes from the quote web API. Set the XMLHttpRequest's responseType to expect a JSON response. Create a new function called responseReceivedHandler() that receives the XMLHttpRequest response and displays 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, responseReceivedHandler() should place the returned quotes in an ordered list inside the : If I know what love is, it is because of you. - Hermann Hesse The opposite of love is not hate, it's indifference. - Elie Wiesel Suffering passes, while love is eternal. - Laura Ingalls Wilder If an error message is received, the error message should be displayed in the . Ex: Topic 'success' not found

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

4.29 LAB: Quote web API (XMLHttpRequest)

In this lab, you will use a web API to fetch and display quotes on a selected topic, as shown below.

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=love&count=3

returns 3 quotes about love, formatted in JSON:

[ { "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 XMLHttpRequest object to request quotes from the quote web API. Set the XMLHttpRequest's responseType to expect a JSON response.

Create a new function called responseReceivedHandler() that receives the XMLHttpRequest response and displays 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, responseReceivedHandler() 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>

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 6 steps with 3 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.