Build a JavaScript application that interacts with The Meal DB API to take and user for another ingredient. A URL example that would return a

$\{"$meals$"$: null$\}$ value is:

Tip: you may find it useful to make use of recursion in this case.

Storing Orders:

Store the order details in sessionstorage.

$2\mathrm{.}2.$ Ensure that each new order has a unique order number.

$2\mathrm{.}3.$ Make sure that your session storage contains the last generated order

number $($which is the number of items in storage session $+1),$ to

avoid having to loop over all the orders when storing them.

Displaying and Completing Orders:

$3\mathrm{.}1.$ Use the prompt$()$ function to display all the incomplete orders stored

in session storage. Present the order number and description only.

$3\mathrm{.}2.$ Prompt the user to enter the order number to mark as complete or$,$

alternatively, enter zero for not completing an order.

$3\mathrm{.}3.$ Once an order's completion status is updated, the status should be

committed to the session storage.

$3\mathrm{.}4.$ Display an appropriate response message if the order number

doesn't exist.

$3\mathrm{.}5.$ Hint: You can use the filter$()$ function to select only incomplete

orders.

Storage Format:

$4\mathrm{.}1.$ Store the collection of orders as a single value in a JSON array.

$4\mathrm{.}2.$ The last order number should be stored as a separate value.

$4\mathrm{.}3.$ Hint: You can retrieve and return values from sessionStorage using

the getItem$()$ method.

Portfolio Integration:

$5\mathrm{.}1.$ After completing your JavaScript project, add a link for potential

clients to download this project in the portfolio section of your web

page.

complete orders of the 'chef's favourite meals'. The application will utilise the

prompt $()$ and alert$()$ functions for user interactions, the fetch API for

consuming the Meal DB API, and sessionStorage to store order details.

You will be utilising the API method to 'filter by main ingredient'. Explore the

list of ingredients available, and observe that the 'strIngredient' encompasses

items such as Pork, Lemon, Mint, and more. In the 'filter by main ingredient'

URL, experiment by substituting "chicken breast" with "beef" and then with

"Fanta", for instance, to observe the URL modification and variations in returned

values. This exercise demonstrates that the API can yield null values.

Taking Orders:

$1\mathrm{.}1.$ Use the prompt$()$ function to take the users' order by asking for their

main ingredient.

$1\mathrm{.}2.$ Call the API to retrieve a list of the chef's favourite meals based on the

main ingredient provided.

$1\mathrm{.}3.$ Make use of the random$()$ function to randomly select a chef's

favourite meal and set it as the order.

$1\mathrm{.}4.$ The order will be defined by its description, order number and the

completion status, which can either be completed or incomplete.

$1\mathrm{.}5.$ The main ingredient is only used to retrieve the description, i$.$e$.$ the

strMeal field, from the API and needn't be stored as part of the order

details.

$1\mathrm{.}6.$ It's important to highlight that when the user enters the main

ingredient, you have to convert the characters to lowercase and

replace each space with an underscore when calling the Meal DB

API. For example, 'Garlic Powder' should be 'garlic$\_$power'. The

resulting URL for the call with be: