We should either add this icon/button in the top left or right of the food and drink section, or just have this in the nav bar, and make it show which one they want to change. But is essential in case the user accidentally picked an item or wants to change in general.

When the user hovers over a link it should turn to the dark blue PreDevs color. At the moment this only works when initially loading the page. If the user decides to switch between day and night mode then this effect breaks.

The link hovering should still work regardless of theme being used.

Major reworks throughout the files, focusing almost entirely on the food modal and getSpoonApi().

New changes

• Linked user input from initial food modal. Any mixture of user cuisines and exclusions (when input according to the food modal guidelines) will now randomly generate three recipes that fit all the criteria
• The recipes are stored in localStorage after being fetched initially so you can refresh the page and keep the recipes from before, without having to call the API again.
• If user doesn't want to exclude any ingredients then that's no issue, the field can be left blank
• getSpoonApi() is only ever called when the user is making a selection of their preferences. (i.e., when the user is selecting their preferences upon their first visit, or when they change their preferences using the button on the 'food' card)
• Minor CSS changes
• Bug tested thoroughly, there shouldn't be any issues merging into main (hopefully)

Drink modal updated to check if a user has checked or unchecked a value and displaying it to the page, also adding the users preferences for base ingredient into an array and storing it in localStorage.

The text "Cook time" and "Servings" in the "You've Selected" section do not change colors with the toggle of day and night mode.

Fixed a bug where the second card wouldn't load properly sometimes when the getSpoonApi() function was called. Also optimized much of the code for that specific function.

The website looks awesome on all devices except on the galaxy fold. Body and main elements are all taking up the full width, but when viewed on the galaxy phone, 10% of the screen on the right side shows blank white from nav to footer. The boxes is what is creating it, and making the boxes any smaller than it already is, is going to make it look too thin on the other mobile devices. So maybe we can change or add something to it's parent elements.

After merging the toggle branch to add a theme toggler feature, the backgrounds bug out when toggling on the deployed app. The white background doesn't appear anymore and the console logging an error, and after switching back to dark theme it also doesn't show BUT when we reload on the dark theme, then the dark background appears.

The page currently has placeholder CSS and should be changed! Your task is to simply come up with a design that:

-Can potentially have a day/night theme -Fits the theme of foods and drinks -Looks good 😎

Lots of freedom with this one! Have fun!

There already exists a <footer> section in the HTML.

The task is as follows:

Fill it out, make it look good, make it work!

-Footer should display what CSS framework we used (preferably in icon form) -Footer should also display what APIs we used (Probably link them to the API page as well) -Should also display our names! We made the thing put our names there! (Should link to our GitHub pages) -Any links added should open them up in a separate page. Make sure to use target='_blank'

-Make it look pretty! :)

This issue requires the completion of the 'Introductory Modals' issue. JavaScript functionality will be added to the introductory modals. Your task is as follows:

Food Choice Modal

• Take the user's inputs from the food preference modal and save them to a javaScript variable/object.
• Take the user's dislikes/exclusions and save them to a javaScript variable/object.

Drink Choice Modal

• Take the user's inputs from the drink choice preference modal and save them to a javaScript variable/object.
• Take the user's dislikes/exclusions and save them to a javaScript variable/object.

It is important to be consistent with your formatting of how you choose to store this info. These variables will be used to interact with the API so please make sure that all the variables follow the same format (whichever format you choose)

As the title explains, when the food data is returned and loaded into the cards, the three dots that were previously there, disappear. They should still be present even when card is generated,

We have to add a save button some where on the top left or right to save their food's img, recipe, ingredients, and how long it takes to make it stored in local storage, and displayed in the favorite section for the next time they visit.

how to get

We can get the elements text contents directly from the html with .val() or .text() to store in a variable and to move that data in the fav section while also stored in local storage.