Conveniently searchable and lightweight drink recipe recommendations (alcoholic and nonalcoholic) using the public CocktailDB API. Disclaimer here that a majority of recipes are not recommended for those below legal drinking age. These are marked by a special cocktail glass icon.
Demo: https://h-yung.github.io/drinks/
Tech used: HTML, CSS, JavaScript.
The display rotates on timeout through a sequence of search results from user input. It would be functionally more useful to have it either turn out one random choice from the search results, or sequentially allow the user to progress through them and see the number of results or names from the list.
- Change the timed rotation to carousel that advances with user input - actually would be easier technically than the current setup with autorotate. This could be more of a 'on user input, pause and allow browsing forward and backward in list results' change for next version.
- Language translation options for recipes (DE, IT, ES) as well as option to revert "back".
- Some corrective processing of ingredient list and grammar - would need to rinse data through this step.
- Allow user to choose to see video if it exists for a drink (though few of the drinks have this).
- Filtering option for user and correct results display per above note on "additional features".
- Suggested pairings (other API).
- (Ongoing) Refactoring to streamline.
It's clear I get carried away with CSS /styling even a very simple website...
Asynchronous API calls with timeouts can wreak havoc on search result presentation. Isolate the timeout or promise so that the remaining results of the earlier calls do not keep appearing in the current call. (Thanks Arquimidio!)
The more practical approach to this recipe recommendation (as noted above) was applied to a business marketing website.