Currently, when any error occurs when fetching data from the api service, the user only sees a perpetual "loading" screen, while the error message is printed in the console. While this is okay for debugging during development, conveying any error messages clearly to the user is a very important aspect of any website.

Using the showModal function (that is also used to show details about a recipe) show the error message to the user in a modal. There is some scope for creativity here, so feel free to think about what should the ideal color for an error message be, what the title and content should be, etc. Make sure normal functioning of the website resumes after the error message has been dismissed by the user.

Attach a gif of what happens when an error occurs (you can try to force an error by simply typing gibberish into the input box)

Visual changes are much easier for PR reviewers when the contributor adds screenshots / gifs, as appropriate, which show the change at a cursory glance, so make this a habit!

In the open source world, it's very easy to take all the free services you get for granted, but we should always give credit where it's due, even if just via a shout out / mention.

For this website, we are using the free theMealDB API. Add a footer at the bottom of the page thanking the service and link to their website. The exact wording of the content of the footer is upto you, as is the styling. Express gratitude however you'd like to! Just remember that this is a footer and not the central focus of the page, so don't over style it and keep it simple, yet easily visible.

Attach a screenshot showing the new footer.

Visual changes are much easier for PR reviewers when the contributor adds screenshots / gifs, as appropriate, which show the change at a cursory glance, so make this a habit!

For dishes with less ingredients, there is a lot of extra space visible before the instructions. The amount of this space seems to be inversely proportional to the number of ingredients. Investigate what is causing so many blank lines and fix the UI so that there are no unpredictable blank lines after the list of ingredients.

Hint: Investigate the data being returned by the API

Attach 2 screenshots, one for before and for after, showing how you have fixed this UI bug. Feel free to elaborate in writing how you figured out what exactly was wrong, since finding the root cause of a bug is as important as fixing it.

Visual changes are much easier for PR reviewers when the contributor adds screenshots / gifs, as appropriate, which show the change at a cursory glance, so make this a habit!