Meal and Drink Randomizer with Bulma, Carousel.js, AJAX, jQuery, Regex and localStorage
View Deployed Application Here.
- Clone repository to your local device
- Test by opening the index.html file in your browser. If it looks good, it's working right.
- If it does not work, right-click Inspect console to determine if there is an Error with the API.
GIVEN a user wants a meal or drink recipe
WHEN I visit a webpage
THEN I find buttons to randomly generate meals
WHEN I click "Feelin' Lucky"
THEN I randomly generate both a meal and a drink
WHEN I click an "Ingredient(s)" button
THEN I find a list of ingredients I can choose from
WHEN I make an ingredient button green
THEN recipes show up with that ingredient
WHEN I make an ingredient button red
THEN recipes show up that do not have that ingredient
WHEN I click the 'Eat it!' button
THEN a randomly selected meal will generate, regardless of if I have selected specific ingredients
WHEN I click the 'Mix me up!' button
THEN a randomly selected drink will generate, regardless of if I have selected specific ingredients
WHEN I scroll down the page
THEN I see a tab with four titles "Meal Ingredients | Meal Recipe | Drink Ingredients | Drink Recipe"
WHEN I click one of these tabs
THEN I can intuitively find the ingredients and recipe for each meal or drink I am looking for
- Click "I'm feelin' lucky" to randomly generate both a Meal and a Drink.
- Click 'Food Ingredient(s)' or 'Drink Ingredient(s)' to select specific ingredients you may have lying around the house.
- Looking at Ingredients, click once (green button) to find a recipe with that ingredient. Click again (red button) to find a recipe without that ingredient.
- After selecting ingredients, click 'Eat it!' and/or 'Mix me up!' buttons.
- Click Meal/Drink Ingredients/Recipe tabs below image cards to find ingredients required for each item, as well as instructions for recreation.
- Enjoy :)
This repo is a Group Project created by Toni Powell, Cathy Marchese, Bjorn Yourey, Ryan Royalty and Jonathan Hammond. Feel free to inspect the code and notice how we made a Meal and Drink Randomizer, with a Specific Ingredient Selection feature:
- HTML built with Bulma CSS Framework's simple grid system
- Fully Responsive Slider with older browser support, courtesy of Owl Carousel 2
- Accessible color palette with intuitive element positioning for a simple and intuitive user experience
- Utilization of Tabs to conserve page room by overlapping 4 corresponding columns
- Custom ingredient selector with built-in search bar
- Like/dislike functionality to enhance search results
- Regular Expression (Regex) search patterns to filter similar object keys
- Usage of localStorage for saved preferences
selecting singular queries in jQuery
HTML 5 elements that can be nested inside P element
MDN, <pre>: The Preformatted Text element
git pull from master into the development branch
3 Methods to Loop Over Object Properties in JavaScript in Seconds
dynamically creating variables
Why won't my <select> show on screen
$(document).ready() to assure jQuery Fires after document page load
Site Inspiration for Recipe Finding
Changing Image Source Using jQuery
Add an 'i' information bubble that pops open a modal when clicked for how to use, about the project, etc.
On the fly ingredient classification: User can click the ingredients that display in the Meal or Drink Ingredient tabs, and change them to "Try to include" or Red "Try to Exclude" directly from the main page. The purpose of this feature being that people may not remember that they like or dislike something until it shows up in a recipe that they've cycled to.
Meal and Drink bookmarking. If you come across a meal or drink that you particularly like, you will be able to save its details for later recall, instead of trying to find it again in the randomization cycle.
Meal and Drink exclusion. If you come across a meal or drink that you particularly dislike, you will be able to exclude it entirely from future searches.
Meal and Drink recipe upload. We'd like to find a way for the user to upload their own recipes, either with the API we're currently using (which is permitted) or having a separate user only list that gets pulled from in addition to the API call.
A way to require specific ingredients in the recipe search, since right now the program gives a random best guess. For example, if you're chicken is about to go bad, show ONLY recipes that use that ingredient.
Tapping an ingredient button twice assigns it a 'dislike' value in localStorage to prevent recipes from showing up. However quick double tapping the zooms in the screen on mobile. This should be fixed to improve UX
Carousel images are different sizes. Because of this, the slider increases and decreases in height every transition, though only on mobile. Having no set width/heights also gets docked in Lighthouse. Re-formatting images will improve UX & Lighthouse score.
Header might look nicer if heading information was overlapped onto the Carousel images. Also, might be worth testing to add social media icons (for sharing) somewhere on the cards, or maybe the navbar, fixed to the side, etc.
When a card title's line length is longer than the one right next to it, it results in cards having different heights and looking slightly uneven. It might be worth looking into max-height or possibly the CSS clamp() property to prevent this from happening.
Re-arrange the mobile layout. One thought that sticks out: try to stick each meal card within another tab component. This way, one would not have to be stacked over one another on the y axis. Z axis may look better, but inevitably it would be one over the other. Also, reducing and experimenting with different button sizes and layout would be a big to do, as the landing page is not as intuitive as it can be.
Finding a different tab layout for mobile would probably also enhance user experience. Currently, Each list item is stacked over one another, but the corresponding data-content shows up below the entire list. It may be worth testing an accordion on mobile, but this is still really great looking.
Experimentation with Webpack (and future classes cover node also) may also provide a boost to performance by reducing total number of requests count.
Add a description tag, increase background:foreground color contrast and finish adding button labels to resolve accessibility issues.
Add attributes to anchor tags in the #tabs section to make for crawlable links.
We've chosen an MIT License. Do what you'd like with this material, but make sure to visit TheMealDB and TheCocktailDB to read the documentation, and if you'd like to show them some love, become one of their Patreon supporters as well!
