Create A Food Recipe App Using Vanilla JavaScript For Beginners

[Music] so [Music] people [Music] wow [Music] so hello everyone welcome to another video today we are going to create a food recipe app so here you can find or you can search for the recipe that you want so let's say that let's search for a chicken recipe so if i search for it as you can see that we have a nice layout is fully responsive and you can see that we have some chicken recipe and this recipe as you can see that we are having here is getting dynamically from an external api and in this video we are going to create it and you can actually search for any kind of recipe and also you can open this recipe to their original website as you can see that that's the original website for our this chicken recipe and it's looking good as you can see we have full functional we have the calories for the recipe and the diet level and also the health level for the recipe and it's looking good as you can see you can search for many things so let's say that apple so you can now get the apple recipe so now you can see that in the mobile device it is looking really amazing and you can search for from here so let's say that chicken looking good and also you can see that that's the first page for our website or the application and which is also looking really attractive and if i go to the responsive section and it is looking really amazing as you can see and here let's check the responsiveness you can see it's a great layout and it is dynamically getting the layout according to our device width so in this video that's what we are going to make and hope you will like it so no more talk let's dive into it so today is the day 22 of our 30 days 30 submits challenge and for the day 22 we are going to create this food recipe app and if you are interested to check out these 30 days 30 summits challenge repo i will link it in the description here you can find all the interesting submits that i did in this 30 days 30 summits challenge so you can come here in this repo and find all the submits and if you come please give it a start and i will appreciate it so for this food recipe app i am inspired by dev ad so in the vet channel he made a video so he made a food recipe app with react jazz so instead of react jazz we are going to use vanilla javascript and we will also make the similar kind of video and if you are interested to check out this video i will link it in the description so this will be the similar kind of app with react.js so now let's come back to our benila javascript app so here in our html first of all let's get a boilerplate here and in the body i will have a section and in the section i will have a d with a class of container and in this container i'll have a h1 where i will also have a class of brand so this will be something like logo so brand and here i will have the recipe so recipe app so this is the logo or brand and after that we will have our form which is the search form so we will not have any kind of action and inside the form we will have the input so we will have a input so this will be a text and also the placeholder will be something like search your app sorry search your recipe and that's it and we will also have these dots and if i save and refresh i should see the inputs and also the title here so after that let's also create another div after the form which will have the search result and here in the search result we will have our result so for now let's actually create some placeholder result so we will have a div with the class of item and here we will have our image for the result so this will be the recipe image so for now let's also have the placeholder image so now you can see that we have this image and we are going to use this image as a placeholder so we can use it here so let's say that image one so now you can see that that's our image so after that we will have our flux container div so deep with the class of flex container so so here we will have two things first one is the our title for our recipe so this will be something like class of title so after that we will have a placeholder title so for now let's say that this is a recipe and also we will have a button so let's have a anchor tag here and for now let's have death link and we will have the button text which will be the view recipe and also after this flex container d we will have a pre graph so let's have a paragraph with a class of data or item data so that's the break drop and inside the break graph we will show the calories of the recipe so calories so let's say that for now 120 and if i save i should see all the information down there so let's also have two more items so i will just duplicate it two more time so now if i save i can see my all items here so perfect so that's it for our html and let's actually link our statute here so link css so here i will use no nato fonts so let's search for it so no need to so that's the font and here i will use this one which is the semi bold 600 so grab it and from the import tag just copy the import tag and paste it in our html sorry in our css so after that let's actually style our this app here so first of all let's actually remove all the inspector gap so let's say that padding will be zero and also margin will be zero and also say that box sizing will be the border box and if i save you can see that we don't have any kind of extra gap anymore so after that let's actually have a image a style here so the width will be 100 and the height will be also 100 percent and also say that the object fit will be the cover not the contain cover now if i save as you can see that now our image is kind of resized so after that let's come to the html and say that font family will be no need to so no need to and after that font size will be let's say that 12 pixel so now you can see that the font is changed here and also let's come to the section here so section so mean height for our section will be 100 vh and the width will be 100 so with 100 percent and also let's have the display flex and also align items center and justify content also center now if i say we can't see anything because now you can see that this image is big that's why we can't see that so what it will do actually it will keep everything means the content in the center of our website so perfect and after that let's actually have some padding in the top also so padding so let's say that hundred pixel top and bottom and zero pixel for the left and right as you can see we have the gap here also let's have a background color so back ground color and i will have a blackish background color so let me copy the color here so here and paste it you can see that now the background is kind of black so after that let's come to the container so container and here let's say that the width will be something like 90 percent and i want the height of something 100 or auto [Music] and also let's say that max height sorry max width will be about 1200 pixel and margin will be zero and auto so now it will remain in 1200 when we will go to the large device so we have a typo here actually so let's actually it should be containered so now you can see we have this gap here because we have 90 percent of our width but in the large devices you can see that the width of our container is 1200 pixel so looking good after that here in our brand so brand let's say that the text alignment will be center and also let's say that the font size will be also forum and color will be white smoke and also let's say the margin bottom so margin bottom will be something like 30 pixels so if i save as you can see that we have our little title here so after that let's actually style this form here so in our form so we can say that the width will be 90 percent and the max width will be 400 pixel so after that let's also say that margin we will have some margin in the top and bottom so margin will be 20 pixel and auto so auto because we want our these form container in the center of our website so you can see that it is now horizontally center so after that what i need actually i need to center my input so if i come to the form input so form input and say that width will be 100 percent so now you can see that that's our the form and the input width is now 100 percent of our form so what i need actually i don't need any kind of background for our input so let's say that background color so background color will be transparent and i want the background actually in our form so background color and i wanna have a color so let me copy the color here you can see so that's the background color that i want so now what i need actually i need to have some padding in our input so padding will be something like 10 pixel so after that let's say that border is so border radius will be 4 pixel and also let's say that i will not have any kind of border here so border none and also let's say that outline also none and also let's increase the font size so font size will be something like two ram so if i save as you can see that that's our search form and also you can see that the border areas is not applied actually let's give it in our form instead of this input because the form having the background color so if i give it so now you can see that we have the form and also we have this border areas working perfectly so after that let's actually say that i wanna display each inline block and that's it for now and instead of these hundred percent i wanna use it ninety percent so because i wanna have also a icon so ninety percent for our input and ten percent will be for our icon so let's actually have the icon so for the icon i will use iron icons so you can come here in the ironicans.com and here you can find some solid clean icon as you can see that here so let's search for search icon so search icon so we will use this so let's have the field one so grab it and copy the tag and use it where you wanna use the or you wanna get the icon so i will use it after the input as you can see so after that i wanna add the cdn here in our file so to have the cdn you can come to the usage and just copy this script tag from here and paste it before the closing body tag so now we have our cdn and we should see our icon also so that's the icon as you can see that and what i need actually after the input let's also grab the iron icon so iron icon and here let's say that the width will be 10 percent and if i save so you can see that we don't have enough space so let's actually make it nine and if i save now you can see that it's working and after that let's say that font size i want to increase it so let's make it 3 ram so save it now you can see that now our this icon is showing perfectly so now i wanna center it vertically so for that i can use some negative margin so margin so margin will be minus eight pixel so now you can see that it's kind of center minus eight yeah that's looking fine for now and after that actually let's change the color of our icon so we will use a blackish or greyish color you can say so if i save now you can see that it's something like grayish color now let's go to the search result so here in our search result here say that margin top will be something like 50 pixel and also the width will be something like hundred percent and display i wanna display them as a grid and also grid cap will be so i wanna have the grid gap of 25 pixel so now actually let's have the grid template so for the grid template so grid template so i wanna have a auto for the row and for the column i will use repeat and i will use autofit so it will be fit automatically and i wanna have a min max here so minimum it will have 300 pixel otherwise it will go down to the new row and also the maximum it should have one effort now if i save as you can see that now it is perfectly in place so minimum value will be that 300 pixel and now you can see that it's looking perfectly so in the mobile you can see that we have now one column and whenever we go to the large device and the column is now three as you can see so after that let's come to the actual item here so in the item i can say the width will be 100 and also i will have a border radius here so border radius will be 8 pixel and i will have a background color so background color will be so let me copy the background color it will be slightly light color that we have in the background so if i save and you can see we have this light color for our item so after that let's have a padding here so padding will be 15 pixels yeah looking fine and also let's have the overflow hidden so after that let's also resize the images here once again so in the item we have the image here i will say that the width will be 100 percent and also the height will be something like 300 pixel and also the border radius will be four pixar so if i save now you can see that all of our image is resized perfectly and that's it for our image and after that let's also style this flex container so that's in the item and i can say that flex container quantity now and here let's say that the display will be flex and align items will be center and also justify content will be a space between so now if i save as you can see that that's our title and that's our button and both are staying in the same row and we have the space between in the justified content so now let's come here in the item and we have a title here so we can just grab the title and say that the color of our title will be the white smoke and also the margin i want have in the top so margin will be 20 pixel in the top and 10 pixel in the right and 0 and 0 for that bottom and the right side sorry left side so after that font size will be about 1.8 mm and also font weight i want to have 400 so if i save as you can see that the title is looking good after that let's actually style the button so button so i can grab it by the class which if i come here so let's actually give it a class so class will be the view button and let's style it with this class so bu button and here let's say that the text decoration so decoration so the text decoration will be none so if i give it that sorry we have a mistake here so it will be actually the curly braces so it's not working so it's not working actually it's working you can see that in the last one have no kind of text decoration so we need to actually give it to our every item here so in our every item just paste the class name in the button so now you can see that it's applying perfectly now what i can do i can say that text alignment will be center and center and after that width will be 130 pixel and after that we will also have some padding here the padding will be 10 pixel and 0 and also let's give it a background color so background color so it is a light dark color if i save as you can see so that's the color for our button background and after that let's say that the color of our text will be the white smoke so after that we will have our font size here so font size will be something like 1.4 ram and we will also have the font weight here so font weight i don't need actually i have only one font weight in our full project so perfect here i can just say it here so font wait 600 so it will be applied so after that let's come here and say that margin top here i wanna have something like 20 pixel in the margin top now it's looking perfect as you can see now let's say that align self will be flex start so looking good and now what i need actually i need to style this data here so i can say something like item data i believe that's the class that we used in this spreadsheet so the color of this will be the white smoke and also let's have the display block and also let's say that the margin top so margin top will be something like 10 pixel and also we'll have a font size of 1.4 m and latter spacing 0.5 prime point zero five prime actually so zero five ram here and line height will be two ram so now if i save as you can see that that's our calorie on data so looking good you can see that so let's come to our javascript part here so in our javascript first of all let's link the javascript file so after the cdn of our icon let's have the script one more so we script and here let's link the javascript file so in our main charts first of all we need to grab our form search form so constant search form here and see that document dot query selector so i can grab the form with the attack because i have only one form in my website so this will work for now and also let's grab the search tip here so search result div so that's the searches are leave that we have here so in this div we will have all of our search so let's actually grab the search result if so document.queryselector and we can grab it by search result class so search result and now we have the searches are deep also and also let's have the container here so we have the container and document dot query selector and we can select the container with the class of container so now we have this three thing and let's say that whenever we will submit the form we want to do something so let's say that form dot add even listener not that search form dot add even listener so i wanna add a submit event so submit and here i will have my arrow function whenever i will submit the form and in this arrow function let's pass the event here and now i can say something like e dot prevent default and it will prevent the default behavior of our form and after that whatever i wanna do actually i wanna get the value of our search so let's have the search value so let's actually have a led variable for that so search query so this will be the search value so for now initial state we will have an empty string but whenever we will search we will get the search query so search query will be in the event we will have the target and from the target i will get the input so let's say that query selector and have the input from the search form so we'll have the input and from the input i want to have the value so we now have the value inside of our this search query so now what i can do i can console log it to show you so console log the search query so if i save it and open my dev tool here so console log and let's say that hello and if i enter it or submit it so you can see that that's the search result or you can see that that's the search query that we have in our input so also say that hello bro so now you can see that we have our search query perfectly in our search query variable so perfect now what i want to do actually i want to fetch it so for fetch the api will use adam api so if you come wwe www.adam.com i don't know how to pronounce that so i believe that's the one so sorry for that if i am wrong and if you come to this website you have some api you can see that we also have the nutrition analysis api and also we have recipes are jpeg so this is the one i am going to use so come to this website and create a account it's free you can create a account very easily after the login you can come to the application and i believe here you will find your recipe api or you can create new application for the nutrition analysis api or any kind of api that provides so i will use recipe search api so you can create also here new one and i will use this existing one so let's come here and view it so you can see that in this api or our test app we have a application id and also we have a application key so we need to use those things in our website or in our application so just copy this application id first of all and create a variable for it so constant app id so app id so inside this app id create a empty string and paste the app id that you copied from the website so also let's have a constant for the app key so app key so let's get empty string and let's come to our website here and that's the app keys so just copy this and paste it in your app key variable so now we have the app key and also the app id so how we are going to fetch the api so for that you need to come to the documentation so come to the documentation and search for recipe search api documentation and here you can see that we have this documentation for recipe search api so if you can see that we have our base url which is api.edumam.com so i can just copy this base url copy and also i can create a variable for our base url so base url so i will just have this backticks here and inside the backticks i just need to paste it so why i am using backtricks here because i want to have some dynamic javascript inside of this string so for that i need to use backticks now i can directly change or manipulate this inside of our string so now if i come here and if you can see that for the parameter of our api we can use these all parameters so for the first one we need the query means the search item or the search query so you can see that for example queue equals to the chicken we can use anything so that's the query and we can also have a application id and application key so those are the things that we are required so you must need application key and id to fetch the api and also you need a query here so without these things we can't actually face it after that you can see that we have also some optionals parameter here which you can use to your api base url to get or manipulate the search result so we will see it so for that first of all create those parameters so first one is the queue and we also need the app id and the app key so let's get back to our base url first of all we need to have a question mark and after that we can say that q equals we can say anything so for now let's say that pizza so i wanna search for the pizza and after that we will have our app id and app key so for that what i need i need a and person and after that we will have our app id so app id and equals we will have our javascript expression here and we can use our javascript so the app id is this one so we can directly use it now so app id and also we will have our app key so now after the javascript expression we can again say that ampersand and app key and here let's say that equal we will have our javascript expression once again and we can say that f key so not that sorry app key actually so now you can see that we have our base url ready to fetch with the api that's the base url actually and after that we have our all the parameters so for that first of all we need this question mark and after that we can use our parameters so we can say that q and the search query will be the pizza and for the next parameter we can separate them with this n person so then the next parameter is the app id and that's the value we used javascript expression here so after that we also have another parameter here so we separated this parameter with the same person and also again we used javascript expression so now we have our base url ready to fetch and actually fetch it so in our these even listener we will call a function which will actually fetch the api so let's call the function and let's name it something like fetch api so fetch api so let's say that that's the function so we will call it after we get the search query so when we will call it we need to also create the function here so let's say that async so because we are going to fetch a api so that's why we need to use it as sync way so let's have the ashing here and say that function and here i will have my function name which is the fetch appear so that's the function name for now so now what i can do is we can cut this base url and paste it inside of our this fetch api function that we created a moment ago so now we have this base url and now we can fetch it directly so let's actually fetch it so i have a constant which will have the response of our fetch so response and say that fetch and we will fetch the url which is the base url and that's it for now and also make sure that you have a weight when you use this fetch so now we have our fetch and the response is now in this variable so let's actually console log this response from our fetch api so response and if i save it and come here in our console log and let's actually have a search here so pizza and whenever i will search it as you can see that we have a response here and that's the response and if you can see that the status is 200 so it's actually saying that we successfully fetched the api so after the fetch api what we wanna do actually we wanna convert the response into our json so for that i can say something like data equals to so we will also use average and we will say that response dot json so this will convert our response into the json and we will have our json into this data so let's actually console.log this data here so if i open my inspect and console.log and here let's say that pizza and you can see that we have a problem here or we have an error data is not defined so sorry not date it's data so pizza once again and if i console log it as you can see that we have our this all things here so now you can see that that's our data in our data you can see a hits array which is the result so for now we have by default 10 result as you can see so also we have this count means how many possible results they have so they have 13 000 result from 13 000 result we are only showing 10 result in our website or we are getting 10 result here so also you can manipulate this so you can see that also form and two so he's saying that we are showing from 0 to 10 means we are showing this 10 only result if you want to show more you can also manipulate these two so let's say that i want to manipulate this so here in our base url we can add a new parameter so i'll create a ampersand sign and after that let's actually say that 2 20 so if i save and create a new search so pizza and let's open my console log here so you can see that now our 2 is 20 and open my heat you can see that now we are hitting 20 result as you can see that from these 13 000 results as you can see here so now we can show our 20 result in our website so with this form and 2 you can actually create pagination so let's say that from our first page it will show from 0 to 20 and after that it will show 20 to 40 and after that in the third page it will show 40 to 60 so that's how you can use your pagination so for now we will not use any kind of pagination we will only show these 20 result in our page so that's it what we are going to do so after that here actually let's pass these data inside of our another function where we will generate our html so let's create a function for our generating html so generate so now reach html and in the function what we will do actually we will pass a data so we will not pass the full data we will pass only the if i come here in the console so you can see that so that's the only data we have and inside the data we have a hit here so i wanna only pass the hits so for that i can say something like data dot hits so now we are sending only data dot hits array inside of our generate html function so let's get the function here so function generate html and inside the function we have access of our hits so we can call it something like results and here let's say that for our results we can map it so let's say that results dot map and here for our each result what we can do we can pass a function so in this function for our each result we will generate a item so for that what i can do i can create a constant in our function so which will have all the items html so we can say that generated html generated html here so first of all it will be empty so in the initial state as you consider we have a empty generated html so whenever we will look through every item we will generate a new item so for that i can come here in our html as you can see that that's the item that represent a recipe card here so grab it and copy it and actually here in our map here what i can say now whenever we will look through each of our results we can generate or we can make this item so we can do something like generated html plus equal we can pass the copied text here so before that let's actually create a template string and inside the template string i will pass it so now what we have so you can see that whenever we are looping through these results item or results area that we are getting from the data so what we are doing is we are creating a html item every time we are looking through this array so it will create the html item and it will add to our generated html so in the end we will have a 20 item okay and what i wanna do actually i wanna apply these 20 item or i wanna append this 20 item in my this search result div so for that i can say something like search result div dot inner html so i want to change the inner html and the new in html will be this generated html so let's say that generated html so now if i save and let's have a pizza one so it's not doing anything so let me see so we have a console error here as you can see that assignment of a constant okay so you can see that we have a constant but we are actually updating this constant so you you can't update the constant actually so for that make it a lot variable so that we can update the generated html so now if i save and have a pizza query here so now you can see that we have a problem so what is the problem here so the problem is as you can see that we did a mistake so it's generated html not the generator html so generate html is a function generated html this one is a variable only so if i save and hopefully it will work now yeah as you can see that we have now 20 result as you can see here high number will search so let's actually change the image each of them so for that if i come here and in our console log so that's the heat that we are actually looping through so inside of this heat we have a recipe and inside of this recipe we have a image which have the image url as you can see so let's use it so for that here as you can see that we are using this image and actually let's create a dynamic image url so let's get back to our javascript with the javascript expression here and we can directly call something like results dot recipe dot image so that's basically we are doing here so we are now here which is the results and inside the results we have the recipe and inside the recipe we have this image okay so now it will dynamically change the url so let's actually save it and give it a try so in our document if i search for pizza and enter so we have a console log error here so image of undefined sorry it's not the results anymore it is actually the result as you can see here so pizza and as you can see that the picture of the image as you can see that it's now updating automatically so now we have 20 results and 20 results have each their own images as you can see so perfect and after that let's actually change the name or the title so for the title if i open my console log we also have something here level so inside the heats we have a recipe and inside the recipe we can see the level here so let's get this so we can say something like result dot recipe dot level okay so let's get it so i can say something like inside our javascript expression i can say result dot sap dot level so if i save it so now we should have our this title dynamically as you can see that now we have perfect title here going on perfect as you can see it's looking good and after that let's actually change these calories so to change the calories we have what we have if i open my console log here so we have these calories as you can see if i open one of the result we have the inside the recipe we have these calories here so let's actually show it so we can remove this and create a javascript expression and here let's say that result dot i can say recipe because it is in the recipe dot i can now just call this calories so calories and now you can see that we have a calorie but here this calorie is having a large number of decimal as you can see but we don't want that i want the two number after the decimal point so for that i can say something like dot 2 string sorry dot to fix actually so to fix so inside that i wanna pass the number that we wanna show so i wanna show two number after the decimal point so pass the two here and save it and now we should have the dynamically recipe here recipe sorry the calorie here so pizza once again and now you can see that we have the pizza calorie dynamically changing according to the pizza or according to the recipe so last what i need actually i need to activate these button so what i wanna have in this button i wanna have the actual recipe so for the actual recipe we have a url here so inside the recipe you can see this url which will show the actual recipe for this card as you can see so we can link it with this anchor tag so in the anchor tag we have this button and for the href we have now death link so we will have a dynamically link here so for that i can say something like it's in the result we have a recipe and inside the recipe we have the url and also make sure that the target is the blank underscore blank actually so now if i save and say that pizza and if i search for pizza and we can now open this recipe and if i click it as you can see that it's opening to another website where you can find these recipe information all the other thing that you can use to make this recipe so perfect and also you can do one more thing you can also add some interesting facts something like if i open it so you can see that we have here what we have so we have the diet levels so also we have something like these health levels as you can see so you can also use them or you can also use the ingredients as you can see that that's all the ingredients that you need to make this recipe so you can also add these in your website so for now i will not use them so i will use only this health level and also the what was that i wanna also the diet levels so these two levels i wanna add so it will be similar that we have here so these calories so let's create two more copies of this and say that diet level so that level and here for that i will have i don't need all these things so i can say something like in the result i have the recipe and inside the recipe i'll have this diet treble so that level i believe that's the one and also we will have a health level so health level and here i just can say only the similar thing so it is in the result we can call the recipe and inside the recipe now we can call the health level so health level so let me check it once again so if i open my console log here i can see so you can see that he's in the result we have recipe and we have these diet level so in the recipe we have debt levels actually it's apples and also i think it's also the levels so we can also this health levels perfect so now if i save it and let's have the pizza now you can see that the diet level is now empty for this one and but we have the health level so going on here so also you can see that this one have the dial table which is the balance if you want you can do something like that so if our diet level dot length is is higher than zero means we have a debt level and then we want to show the diet level so which is this one and past it and else what i want to show i want to show that no data found so it will work i believe so pizza now you can see that we have now no data found but whenever we have these diet level so it's showing the length actually i don't need the length i want to show the actual diet levels so as you can see that no data founds and whenever you have the actual data for that level it will show you otherwise it will show that no data found so that's it as you can see looking good this amazing app and let's actually search for chicken so whenever you are searching as you can see that whatever you search it will give us the result for the pizza because if you can notice or if you can remember here when we made this base url we set the query for only the pizza so let's actually dynamically change this search query so to change this search query we need to cut it and create a javascript expression and inside that we can use javascript and here let's say that i wanna use the search query that we will get from our this input so for that i can say something like search query and save it and if i come here now i say chicken now you can see that we are having now chicken recipe here and after that let's also have some fish recipe yeah looking fine for now and we don't want this demo recipe card anymore so let's actually remove them so here if you want you can keep one so you can get the reference and after that i will just remove this other two and if i save now as you can see that we don't have any kind of things or we don't have any kind of card but whenever we will search it so chicken now you can see that we have the chicken recipe here you can increase the logo name and also this item or sorry this search item so for that you can do something like so i wanna have the initial class here so this class will have when you will come to your website first time however you will do one search it will remove the initial class so with this initial class now you can have some style so let's increase the font size so let me copy the class here and paste it here so you can see that i am saying that whenever i have the initial class i will change the brand font size and will make it 7 a.m and ram actually so you can see that now our font size is bigger and also we can do something like dot container and initial so what is going on and here you can say something like form so now you can also change the form max width so max width let's say that 800 so we'll have a bigger font sorry bigger form here and also you can change the input so let's say that copy the selection and paste it here and let's say that the input will be something like the padding i want to increase it so the padding will be 20 pixel and also the font size will be about 3m so now you can see that now our this brand name and also the search form is kind of bigger and whenever i will search it a query or we will search a recipe what we will do first thing is we will firstly remove this initial class so we will back to our normal site so for that what i can do whenever i will generate the html i wanna say something like from our container i wanna remove a class so class list dot remove which is the initial and wrap it with a coat here so if i save and give it a try so let's say that is a chicken and as you can see that we are now in the back of our these regular size of our brand name or the logo name whatever you can say and also our this form is now in the regular site but whenever we will come to our website first time it will make the logo name and the search form bigger so after that let's actually make it responsive so if i come to our mobile device as you can see it's not looking that much good so in our mobile device what i can do so let's have a media query here and here let's say that 768 pixel and i can say something like search result and the grid gap so let's actually decrease the grid cap so i wanna get gap 10 pixel and after that let's actually decrease the font size of this brand name so for that i can say something like container dot initial and also we'll have a brand here and in this brand i can say something like font size forum so now you can see that in our mobile device the name or the title or the brand whatever you can say it's looking good and finally we need to fix the form so for the form let's actually grab it so with the class of initial so whenever we will have this initial class we have the form not the class form it is only the form i want to have the max width of something like 500 pixel and the container have the initial class we will also change the form input so from input will have the padding of 10 pixel so we will actually decrease the padding and also the font size will be our tournament so now if i save as you can see that is looking perfect for our mobile so let's have a search so let's say that apple and if i save as you can see that we have now apple recipe here looking good and let's also search or let's also go to the ipad pro as you can see that in the ipad now we have in the two column layout and it's also looking good and about you will go to the larger device as you can see that it's automatically going the responsive column according to the mobile or the according to the device that you are using so looking perfect for now and that's it actually for this video you can see that it's looking really amazing so that's it for this video i hope you like it and if you did please give it a thumbs up for more video like this one i make this kind of website related video so to see those upcoming videos please subscribe the channel and my name is arfan and i will see you in the next video till then bye bye for the houses you

Channel: WEB CIFAR

Views: 23,703

Keywords: food app, food app js, food app JavaScript, recipe app, recipe app js, recipe app tutorial, food app tutorial, how to make a food app, how to make a recipe app, build a js app, how to create a app, how to create a simple app, js api, js json, food recipe app, food recipe api, food recipe web app, vanilla js app project, vanilla js api, how to create a recipe app, how to create a food app, JavaScript tutorial, build an app, web cifar, shaif arfan

Id: x8EY0BlhPGk

Length: 56min 32sec (3392 seconds)

Published: Fri Aug 21 2020