UI - Taco randomizer

Coded this taco recommendation app that displays the recipe. The API is down, so i removed the Codepen link.

Background I just made the user interface: created the layout, picked the colors, chose the fonts, etc. Someone else compiled the content of recipes in their database through public contributions, i am accessing it through their TacoFancy API.

Screenshots In the attachments you will see: desktop view 1366x768, tablet portrait view 768x1024 with a recipe shown and another is what you see when a recipe was not added by the author (you will get a link).

Limitations The app is very low performing and created to many mistakes that I learned from and had to adapt to. For one there are access limits, if you keep clicking the button you will not see the page change, i think it's because you can only hit the endpoint so many times per minute, not sure what the limit is but I forced the button to be disabled for 3 seconds, that includes the original page load.

The values are returned in markdown, so i had to use vue-markdown, and it still had many issues like appending links to whatever site it is on. So i just disabled the links in the recipe by setting the pointer-events: none

They unfortunately allow incomplete recipes which means that a title can be returned of the taco, but the recipe will be blank. I decided to add a conditional action so that when the recipe is blank you are shown a dynamic link which asks you if you want to search more related recipes. The link is structured to add the title of the taco as the search term, this opens in another tab and search engine is set to duckduckgo with a recipe filter. It's imperfect but meant to compensate.

Credits Thank you to the maintainers of the API, the contributors of the recipes, and special thanks to many developers who helped me learn vuejs to make this work.