Find Me A Recipe is an interactive website that allows users to input up to four ingredients that they currently have in order to discover relevant, unique and healthy dinner recipes.

The website process was designed to be quick and straightforward. It is divided into three sections which include the selection of any diet or allergy preferences, the choice of up to four ingredients and the results of relevant recipes. The ingredient selection, which is the most significant part of the website features a simple and intuitive design. The list is divided into four distinct food categories (“Meats and Animal Products”, “Vegetables”, “Grains” and “Accompaniments”) that are navigable through scrolling which feels natural for the user. Dots placed on the left side of the screen indicate the user’s placement in the list and allows for jumping instantly between sections. The goal with this website was to ensure that there's no incorrect way to input ingredients. Users are able to click on any ingredients and remove it from either the top bar or from within the list. The colour scheme is very health-focused with the use of monochromatic greens contrasted with an orange colour to highlight buttons and actions. The addition of ingredient icons for both preferences and ingredients not only visualise each selection but make the interface more engaging and exciting as a whole.

This website is made using HTML, CSS, JavaScript, jQuery and JSON (JavaScript Object Notation). The JSON is essential to create a basic database that houses all the ingredients and recipes. Each ingredient listed in the JSON has extra Boolean fields that detail whether or not that specific ingredient is appropriate for someone with a certain dietary requirement or allergy. When the user selects a preference from the first screen, the website hides all relevant ingredients which are part of or not part of that specific group. This process also occurs for the recipes so that no recipe results that appear include those ingredients. JavaScript and jQuery are used to move between sections as the website has been incorporated into one page, allows the dot navigation to work and for subtle animations.