This page requires the user to select a meal main ingredient, selection of an ingredient triggers and API call to fetch a list of associated meals.$$ Selection of a meal triggers an API call that fetches meal details.$$ Display the meal details $($meal name, ingredients and measurements, recipe details, a meal images $($use the CSS fade in animation to load the image$),$ and an embedded YouTube video.

$$

Each select menu should contain a first option named $-$Select One$-$ that is selected by default.$$ If this item is selected after data has been loaded in the page, then downstream page elements should be removed from the DOM and rebuilt once a valid selection is made.

$$

Example: If a user selects a new ingredient from the first select menu, all the other menus and content areas $($recipe$,$ ingredient list, images, etc.$)$ should be removed from the DOM.

$$

If a user selects a new meal from the dropdown list, all the other content areas $($recipe$,$ ingredient list, images, etc.$)$ should be removed from the DOM.

$$

$$

$$

Web Services Used

We$$ll be using the free web API provided $($ httpProcess Steps

$$

Step $1$

$$

Start with an empty HTML file

$$

$1.$ When the web page loads, make a call to thThis will return a list of all of the ingredients available in the database. Each ingredient in the returned dataset will have the following properties:

a$.$ idIngredient $$ the unique ID of the ingredient

b$.$ strIngredient $$ the name of the ingredient

c$.$ strDescription $$ a description of the ingredient

$$

$$ example:$\{"$idIngredient$"$:$"41",$"strIngredient":"Butter",

"strDescription":null,"strType":null$\}$e http:$///......)2.$ Extract the strIngredient values from the API JSON data and save as a list

$3.$Sort the list of ingredients

$4.$ Use the sorted list of ingredients to dynamically create an HTML select element containing all the strIngredient as values and options.$$ This list will be long, so turn on select autocomplete so you can perform typeahead lookups on ingredient names. Example: chicken breast