predevz / platello Goto Github PK

css edits

On dark mode, when you first load the page or when you reload the page, the logo "PreDevz" doesn't have the blue in "Pre" in the navbar and in the footer. But when you switch to light mode, then it blue appears in nav and footer, then after switching back to dark mode it also stays blue. But whenever the user reloads it goes away as default.

Create three modals that appear when the user first visits the website. Make sure to refer to the wireframe examples we created. You do not need to create the javaScript behind these modals (however they will eventually save the user's inputs so keep that in mind).

Once the modals are completed give them all the CSS property of display: none . This is so they don't get in the way until they can be properly implemented later.

The modals should be as follows:

Welcome Modal

• Will tell the user welcome and explain the basics of the app
• Should have a button to continue to the next modal

Food Preference Modal

• Will ask the user what kind of foods they like
• Will have a section dedicated to what kind of foods or ingredients the users dislikes or does not want (likely a textbox)
• Should have a button to continue to the next modal

Drink Preference Modal

• Will ask the user what main ingredient they want (i.e, gin, rum, taquila, etc)
• Should have a button to close the modal and go to the main page

Again, the javaScript behind these modals are not the issue. This issue is for creating the modals themselves. Good luck! :)

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! :)

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.

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.

Simple enough task. Literally just add jQuery and moment.JS. Thank you :)

The current adjustment goes too far down below the actual website, so im going to change it from I think 100% margin top, to like 80vh.

On certain devices the html isn't extending to the max width and leaves a blank space on tablet and makes a small scroll bar on the x axis on phones. And the #date in the navbar is buggy on smaller tablet sizes and or minimizing the screen from tablet to screen sizes.

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.

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.

Issue for branch to frequently update the read me with more descriptive info

Recreating modal styling

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

The website needs a favicon!

Adding some materialize preloaders so they fill in the space and to show the user that the data is being fetched.
So we are replacing the title "Card Title" to materializes preloaders

Redesigning for mobile version, most elements are mobile friendly thanks to materialize classes, but overall everything still looks gushed. So we need to resize the elements that needs to look nice on all mobile devices, and tablets.

Fetch Drink APIs, Display on DOM Elements in Drinks section. Use cached DOM elements to change text content from the data.

Change website theme, night and day theme

After choosing what you want, when the user wants to change what they would want for their drinks, and they click "Next" then the modal goes away, and the background is still blured.

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!

If a user wants to save a recipe then they'll hit 'save' and it will go to the 'saved' section of the page. However, the user should be able to delete any recipe from this section if they want. Your task is as follows

• Add a button the user can click to every saved recipe
• This button will delete its corresponding saved recipe from the list

On desktop, it is capable of making more room so things can be side by side, so there is more room on the bottom. The next button is slighty being hidden at the bottom since the checkboxes are in a column, and the user can't scroll if modals are being displayed. So I will test on all devices so user can see the whole modal. And I will redesign the check boxes just a little so that it also flows along with the previous modal, so it's doesn't look out of place in color.

Fixing font size/font weight to flow with the p tags around it. And retyping the welcome modal to update our intention of our project.

Testing to see, if I need to add webkits for more compatibility on the body background property.

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)

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.

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,

Creating a section that will only display when the user has selected one of the randomize meals, and one of the randomize drinks. The section will contain the name of the food and drink, their recipes, and an image for both items (And possibly links to the food, if provided by API).
This is useful to avoid having the user them constantly scrolling up and down for the ingredients of their food/drink and not being able to view the full recipe and ingredients because of the card size if they were on smaller view ports.
The section will appear in between the drinks box and the favorite box.

Simple task. The task is as follows:

-Link the Spoonacular API to the js file
-Successfully retrieve information from the API and store it into a let variable
-Leave comments explaining how it works