Code a random recipe generator with JavaScript

Key Takeaways

[Music] hello party people look at you all waiting in the chat excellent and we contributively started earlier this time 39 seconds earlier it's an improvement yes Alice and Z says in response oh boy it's time travel yes okay anyway Allison Zay says in response to my question ready for some recipe fun yeah me too all right one you know uh fan of cooking definitely yeah Natalie from London UK how are things in London yeah I haven't been to London for many years hmm especially well at least two more than that for me I think yeah let me know how you're getting actually no I've been telling them a couple months ago did you oh no that was actually a year ago now I might hear about this probably for the best yeah I thought that was a couple of months ago no there was a work trip but that was about that was about a year ago now well yeah okay fair enough hello from my well same way and why um Malaysia I think it's a state um Massachusetts and why state oh uh no it's not one I think it's Malaysia wouldn't that be mL no that's M white well hopefully Zach will clarify soon I just finished my Saturday project brilliant yes that if you're wondering it's a very special way we have of teaching on scrimmer which involves having a look at stuff you've learned throughout the module or in some cases on a course and then throwing you in at the deep end with no life rough yeah nice just like in real life yeah it is actually um you learn everything you need to know to make whatever it is and then you have to put it into practice with zero help why say zero help you can always join our Discord server if you do need help and then stack over hello Marissa Valencia yes from San Antonio Texas you mean I expect a significantly warmer here here no bear not here ah says share program in I love you guys says mermaid oh hello how are you both they're really good I was thinking about this earlier 6.28 out of 10 I would say 6.8 out of ten two eights two eight six two eight out of ten and she's a bit higher now 6.54 I'd say okay what do you say that's very specific I don't know yeah it's all right I would say yeah about six seven eight roughly that's very not specific hello to the rest of you as well oh yeah yeah hello [Music] um say today yeah sorry what are we doing today we're making a dinner generator dinner generator what's a dinner generator generous dinner like uh cook it might be great that would be great and we always say on scrim but when people ask us what to put on my portfolio what projects to build we say um build something that addresses your own needs indeed a second time have for dinner every night sick and tired telling what Michael should throw in the oven to cook so to defrost from ready meals what was the last time we had a ready meal well actually a while ago yeah but fair enough so that's what we're going to do and this is what oh look at that yes I approve I call this person Mr fans who decided this animation because I I save it as Mr which is his initials hyphen thumbs and then it read Mr thumbs appears across many of our assets and here he is today this is what we're going to build um so look at that I even have the same haircuts on that picture because it is you Mike yes [Laughter] um at the click of this give me the dins button right the clicker with dins you get the dins indeed for four days though not why four well because I mean we can change it to however many days you want okay usually if you wanted to buy ingredients you can only buy so far in advance otherwise they go off oh that's a good point yeah yeah and then additionally there's a shopping list beetroot brought beans buckwheat carrots colleague cauliflower cherry tomatoes Chinese cabbage courgette courgette oh why is it always say courgette courgette well this is an optimization we could do lettuce Munch to parsnip quinoa rice noodles squash whole grain pasta ah so you can also like say how many things you need at the moment this is just just a list of yeah all of them as you basically kind of like pull all the things together yes to start yeah I could probably tell oh no so that's my favorite actually it doesn't look that bad yeah I don't see what's wrong with it it's uh very accessible totally responsible very fully responsive dynamic we just have two paragraphs okay here they are and he has a button and a button that says give me the tens indeed um nothing in the way well actually there's some stuff in here I've grabbed the two I can see I can I can tell that the various spellings of dinner is gonna give us a bit of a headache it might do but we'll we have beans uh various other things various other things and I have saved um oh you so basically you pre-populate I have pre-populated the ingredients vegetables hooray literally anyway of vegetables yeah and um whole recipes what does that mean no this is having just said we don't eat radio Mouse it is right I mean bibimbap isn't one I don't know why that's there okay Boombox yeah that's definitely not original well maybe you can oh no it's actually not ready meals it's um the idea is that we pick one protein one carbon three veg or one of these right I see hello from Reunion Island very nice hello to you well that's very far right but probably yeah thank you for dropping on by not to the Mr Terry who or Mrs Terry who is Ian you know um how you would approach this challenge yeah let us know how you would approach this charge there are some to Do's up here already saved the ingredients in an array yeah just to make it easier for enough so now I think we should work on selecting random ingredients for a meal idea for this is using math Dot random.flor and then selecting random random things random things yes okay oh that's good fun um okay and then select random ingredients for a meal and then you have uh selecting time meals alongside random ingredients okay and then generate shopping list from all the required produce the render results in the Dom okay okay um now let me have a think about it what do we uh do when you already pick an ingredient so for example I go with you don't know so I go to like you know tofu with wild rice so I would imagine it's like we're following NHS prescribed um recipe creation which is like uh NHS for those over you outside the UK it's National Health Service yes yes so one cup one protein three match one carb one protein and in the 50s maybe okay but it should be five I think one of your friends yeah but that's for the day not just for dinner yeah that's true okay I think three is enough okay three veggies enough oh wow okay so one from protein one from carbs that's fairly easy but if you just go myself around the road it's a chance that you're gonna end up with Whole Food wild rice or free avocados which some people might be happy with some people might be happy so what do we do with duplicates do be like Boston mushrooms Boston mushrooms Boston mushrooms so you can have like no ideally duplicates we would not have duplicates yeah so you have to remove but for a first iteration I think we can we can have we can get it up and running and then after that we can deal with duplicates I think okay so it might be pretty much okay fair enough um so in that case let's just black plate or a plate what's called plate there'll be an empty array uh can I just scroll down here there's a mouse there so let's plays uh that'll be an empty array I'll also zoom in a little bit uh uh and then presumably we're just gonna add things to it not let dinner even though everything else is called dinner yeah although I guess it doesn't have to be dinner why only one cup one protein a three veg I mean you could make it anything you like food for very common patients clay basically our house tells us to do that yeah there you go eat well guide at least five portions of variety of fruit vegetables a day okay base meals potatoes and then protein and then there is some Dairy attentive products so basically there is this picture for it that's what we got told today right back to the code yeah that's basically a picture you see like this is a third veg third carbs and then the rest of it okay hello to you good to see you here again how are you um okay so was it protein we've got to do your math Stop floor and stuff haven't we yeah I do remember I can never remember how to actually write it I think I actually can that's got floor and then open the bracket okay and that's got random open that bracket uh I mean it's easier just to copy paste it isn't it was it love love fourth floor you know what I'm actually gonna just ask it how co-pilot no not currently integrated Instagram but maybe one day there will be co-pilot or a similar box a I think oh that show is good I'm just gonna write a functions though because I can't be bothered with this thing they must not what now I've got floor without random open times um whatever you want so ours will be name of array dot length yes I'm gonna work I think you're missing at times what do you need to have masked or random clothes and then multiply it by array.length I don't know what this is going to do but it's not what we want oh I see oh yeah yeah because imagine random generates another between uh zero and one uh there you go um it returns a number between zero and one yeah uh so mother random oh there you go two random number between zero and one uh we always had these promising scrambler I think so I'll find out something good less than or equal it's numerical calculator I don't think we've always had that and then times already at the length and then random I'm just going to say called a random ingredient and that will be and I'll just access it from there what's that doing so I created a function that killed random ingredients and I pass it the list of ingredients [Music] okay ingredients so basically and then I just pick a random and read them from it okay hopefully so how's it going to know which of the arrays to look at them because I'm passing it to it so I'm just going to say run ingredient from okay sounds good give that a guy um also.log around hurricane I didn't really shopping list it's not defined that's further up um you can comment out the line probably oh yeah but this code doesn't run right no two I know it should run why uh well because once JavaScript is loaded in Australia is going to try to do it no you still need to call the function though this is the one it doesn't know about okay well let's create it okay generate shopping list which will link s which things Define function I think it's okay okay so we'll just create that test right smacked had it okay yeah second you want to say what's happening with this then right so I have a function that basically accepts uh at a rate and then picks a random element from that array yeah and then what I'm going to do is I just call random protein and then I can also do the same basically for random carb [Music] class carbs into it and then brand page one just gotta have constant is basically get the gist so what I'm going to do is I'm just going to write it straight into their rate because what's the point yeah yeah I'm just gonna write it straight into an array so you don't actually need to declare it as a variable uh yeah because you know I'm just going to initialize those variables and then push them into another array so I might as well just initialize the array with uh those veg I think we're going to need them in two different places though that's all right we'll extracted them sounds good right again and now I'll just see what's up with the plate and I guess seaweed squash and bell pepper actually that sounds pretty good it does oh I I thought they would be like something awful awful awful um or something pretty nice but actually that sounds pretty good oh no I forgot something yes two things right but I forgot one thing okay the other thing is Stanley says writing straight in an array is a good idea the thing I forgot was our weekly part yes oh well no way you yeah please put a bunny rabbit into the chat if you've been before hit me with that tiger we don't use this information it's just for fun yeah yes okay at the disease make the Virgin array and when you randomly choose a veg check if it already exists yes because we don't want well you don't want three cauliflowers on one dish that's for sure yeah yeah I suppose you can do huh uh oh I see what we mean so I am wondering if you can well anyway yeah uh I we can let's just leave your comments for him can end up with three of the same footage there's the chances of that are uh yeah um anyway but I suppose like let's let's just get the whole thing rolling and then we can optimize it because there are you know the features of this aren't less like uh you know exclude the ingredients that you don't like uh weigh some ingredients better like offer only fish on a Friday um you know Sunday has to be beef or something like that you know like roasts and things or like you know maybe you don't eat meat so exclude all the meat from offers definitely yeah so you got all these Tigers coming into the chats [Music] okay uh so now all that plates uh so we have what's that generate they say generate shopping list but it's not really a shopping list as such as generate well it it yeah it's an ingredient list you might already have everything in your fridge it generates everything let's just call it like that could generate everything well yes it's not generating everything [Laughter] uh so we have plate okay we have our plate so we need we need to get these things out I think with a triple dot thing what'd you mean array destructurings what what are you trying to do what we need to do is all of these well actually no not all of them the the plate array right we need to get all the ingredients out don't we yeah but we need what four of them what are you actually doing at the moment well I don't know anyway so I think random greens for a meal I think that's done yeah let's just uh I've been select entire meals alongside random ingredients okay so um here's a poll when we have a to-do list of household chores or anything I like to cross them off or take them off if they're on the computer Michael likes to delete them but the reason I like to cross them off is that you then see all of the things you've done so which do you prefer let us know cross off yeah I think I just have to write it I can't think of suitable emojis which would make sense or delete them to do's yeah I don't know I don't know I think I think deletion is better because now it's like you're back to fresh clean slate I can't see that but then you also feel like you've been doing a load of work but you've got nothing to show for it yeah but I don't need to you know I don't need to report to myself I've just done it yeah I actually use both methods that in todoist they disappear once you've done them and then you get to do it zero which is nice in a sauna they go kind of gray when you see all the ones you've done which is also nice delete them says Stanley there you go so uh select entire meals so I suppose what we can do is the way we have plate right I would imagine that we can have that reason we have left dinner uh uh dinners equals you know you basically have like one played two and so on right now are you gonna differentiate them so I would imagine what you can do is do the same thing oh function foreign from and then you just basically pass in to basically just say junk and you return the array like that hmm tonight yeah so you can say here's my proteins is my carbs yeah the veg a great meal from proteins carbs of veg you do that foreign well yeah I suppose what you can do here is then have a loop and a variable that tells you how many you want but um because we have four so I'll just hardcoding four but I would imagine that yeah you would want to have it as a variable Loop and then you can have an input with how many dinners yeah yeah and now so that should uh give me an array of arrays yeah and then there you go big tomatoes and the rest of it okay big Tomatoes did you really like have their ingredients are there small Tomatoes there's Cherry Tums really huh next in it all right okay fair enough so you have a meal with two types of tomato but I think that's a good thing yeah although the next meal has big tons and then more big Toms was saying right yeah but you know we can we can fix that anyways the next one taking care of noodles with more tomatoes and seaweed if I I would imagine I will be skipping this dinner some interesting combinations that you wouldn't have thought of beans by smarty rice corn carrots and more corn do we need to pass the array to the function okay uh what the hell was that right the one that contains all the meals I think they generate everything function yes we will do I don't think so because it's like in the global scope so these are like uh Global variables of ingredients so you don't need to pass them in no I think abdulaziz been into the array with all the meals in Theory over is this so yeah you do pass in on the other hand I think it might uh I think because this is a global variable I think if you do this it should still work even though it's a bit less explicit but I think it should still work good yeah because it's a global variable so you should have access to it from everywhere I want to think about Warfare with Bill um these yeah these arrays so these arrays are all so I think it should still work yeah well hi yeah it still works I I don't particularly like it because it makes it a bit hard to read it makes it a little bit more magical and also at some point you might want to for example get this from some database or something else or whatever so there's such a thing as being too clever with code uh okay so there we go um all right okay moving on and now uh what we can do is uh const shopping list equals uh create short pin list for okay here we go in this and now let's console log shopping list okay okay we're gonna have a variable cook shopping list do we okay yes we do yes but never mind shopping list for uh goodness and now basically what we can do is a very straightforward return an array where you have is it something like that like a yeah you spread all the dinners and I think that might sounds messy that's what we want so I think what you want is uh so for const ah you basically want to Loop over every single one of them and then you want to flat out like now so you can do a loop where you spread it all out what's it actually doing at the moment then uh that's just doing the same thing seems to be no it's just just copy see it over so if you do that it just pops it over right yeah so um so I have left let's equals that and then there's God now he's got fridge yes I never use 4-H what do you use just a for Loop everyone always says oh yeah we can use the 4-H and I'm like we could do it fair enough um so Dennis forage uh yeah yeah and then what I want to do is I'll just go uh list equals but have whatever you already have plus spread the dinner into right aren't you then going to end up with each time you go around this gonna re-add what you already have oh it could be well let's try it actually you're right I want to just spread the dinner into right now yeah um I'm not sure you might have another console log somewhere now uh yes so what I will do is Dennis like that and then I'll have um okay so shopping list beans Burger wheat okay so it's just one of them yeah so I think yeah that's the last one what controller I think I do want to do that I think I do want to copy previous ly shopping list called homemade chips managed to your broccoli pasta veg meatballs yeah there you go okay um what next but I don't really want to do that but yeah because you have broccoli I only have another broccoli so we can sort them I guess you can but how do you uh that was like well we want to remove the duplicates but we don't want to just remove the double because we also want to count how many of them no that's two different things though because the duplicate is at the meal level because you can have two broccolis over the week but not in one meal so we need to remove the duplicates in in the mail yeah so I think um and then we just wanna count the ones in the shopping list level Koreans and then that shopping list equal um this filter so it's abilities yeah I think I want to sounds good I think I want to reduce because the filter will just filter those items out by aisles but I actually need to count them filter to get rid of the duplicates now yeah but I don't want to do that because I need those for example if when I go to the shop I want to know how many broccolis I need to buy because there's broccoli yes but I think abdulaziz means at the meal level to prevent the duplicates use filter so you filter the array for the one you've already selected at the mule level we're doing oh when you're creating the stuff yeah ah so like when you generated an ingredient filter it out yes yes yes I hope you're having a fantastic Friday yeah pretty good I hope you are too thank you for coming oh yeah what's all this akker I think that's just what is it oh I can never remember how to actually do that so um that is nice just reduce count occurrences there you go that's what I need come to the occurrences frequency or hooray elements perfect so there is some handy you can use object object to hold results um uh counts uh-huh yes so I think that's actually what I need thank you let us know if you're watching the World Cup we are not [Laughter] uh it's in winter you know what I mean like although I guess it's not really winter where it's being held no but I mean it is but it's not to be funny it's hard that there's always summer seems like it yeah um back to this back to this so Four Corners There's No Deal on the way it says I'm good question um so in that case my shopping list is this counts I'll keep them so my array is ingredients and ingredient so shopping list ingredient equals uh so we that's all the shopping lists and the ingredients are you gonna have to explain what this does in a minute yeah I think that's all I want to do list is not iterable whoops what does that mean oh because I renowned it yeah the danger of renaming things cannot wait probably so undefined reading fish cakes laughs I always think people that build things like I don't know an app for an automatic cat toilet do they name the variables like numb of poops or whatever [Laughter] oh no hand I needed to initialize the the so that would be that should be the end of the object there you go shopping list should be an empty object right so the the idea is this uh shopping list is an empty object I go for uh because I already created a list of ingredients like flat ingredients yeah so I go through every single ingredient in it and then basically what I do is I'll create an entry that uh if it's a new entry it becomes a one and if it's an entry that already exists so this means if this entry already exists if it's true yeah uh then you basically take the number that there is and add one to it okay sounds good sure okay oh wow I think we're onto something here hi so there you go we have generated all those dinners and we have a shopping list where it's chicken whole green pasta steak mushroom Chinese cabbage bell pepper fish cakes white rice beetroot big Tomatoes courgettes two two courgettes look at that why could it not read variable fish cakes then oh because I didn't initialize shopping list to an empty object I had like some some other stuff there so it was like uncountry in itself but why specifically fish cakes because it's not like it's the first one on the list yeah but it's regenerated so every time we call this function it's always the same so fish cakes at that point was the first one okay because when we run this again hot smokes Helen for the win this hot smoked salmon that's the first one okay anyway so I think I think we're looking pretty good yeah I think we're I think we're good now so basically what is it the um give me dings that's the button and basically there's dinners element what is that oh these okay it's it's these so basically we want to create a list and then add a shopping list to it so I would imagine that something like oh we need to render all the dinners first with like creating a paragraph and a little rest of it I think yeah but I think you can just [Music] um how do you you do it with in a text right are you making a list you kept it no this the you already have a list no okay that's shopping list as a shopping list not a list item yeah it's confusing that is confusing yes anyway yeah we already have those items but yeah let's let's add the dinners so yes Denzel with an s L okay cool and uh what's it you know in the text yes equals goodness okay yeah we've got some stuff but now that's added to all of the day that's all right really we want a new paragraph for each dinner I think we need to do it at a different point not there hello from Georgia ninjas Grimmer welcome welcome will this be available to watch your pool later I came late yes it will okay so we are adding a bit okay cool so now let's just create uh show goodness right yep um I'm saying yes I don't actually know what it means something I actually think that might be the way to go yeah I think so too I think so too so should it be actually in a text or should it be in her HTML because if you are making it I think you can just create it and then um set the inner text with in a text yeah but it's not only the text is it this is not because this is a list item that looks at yeah so create the list item and then set that items text within a text and then append it what I don't I don't follow what was it you need to create a list first of all obviously you can add an HTML into it no how do you how do you can't list equals document dot create element brackets list brackets Lee yeah okay right let's do it in a text no no you need to do can't do because all of the girls are inside the list earliest unordered list if you want them with numbers can use four oh well create elements yeah brackets you help and then you got in a text equals however you were going to put in the dinner of the day uh okay and then we're gonna have to attend them yeah is there an easier way no okay it is a drag but you know we like draggy things I guess okay so in that case I'll just I'm sure you can just get it from stack overflow uh okay so I'll just create those separate function then see we only need to generate the list once what because the list is the container for all of the dinners yes okay it's a const unordered element in a text uh ah so okay um that it's gonna be I always get it confused which way around it goes I can't what are you doing so I need to create many walls for every dinner is that right yes so um my forage you feel that way inclined foreign for every dinner I create in a text yeah equals so how are you going to get the ingredients in huh right will that work yeah I think so and then so do I then just go Ally thoughts a pen child yeah that should do it I think so show shopping is not defined oh all right sorry I haven't done that function that's all right wonderful create shopping list for dinners no show dinners yes const Ally token create element um okay so I do get the dinners it I do get individual one yeah and it's iterating through the length of the dentist array yeah so I think it's just a line 68 is the problem um no oh hang on yeah hang on no no oh yeah I see because I just say inner text equals but I don't really what I need to do is I need to take this all right yeah because I return a bunch of strings we need to append yeah that the Denzel but I'm not sure what the Denzel is I think it might be a paragraph in which case we need to change it to a div why why can't you open it to a parent oh because you can't offend it to a program I mean you can but I don't think it's supposed to I don't think you should have a list in a paragraph that's right you don't need because there's a need to change a paragraph to a div yes but now I think we need um oh yeah sorry sorry I still need to um I think what we need to do is this this like this [Music] because this should be a paragraph yeah yes mm-hmm yeah that's right okay so in that case uh I don't want to do oh show dinners I just want to say you need to append lead to oh not the other way probably actually yes because Arnold at least and then list item yes you're right oh man yes riffs hello thank you for that so you've got like there you go uh I think I could just go yeah anyway we can do the formatting in a little bit so our pen trial and then I already have here Denzel there's a second argument to it and then basically what I can do why I didn't know about a child [Music] I should I do it right show dinners takes dinners yes sure just takes dinners ill do a pen child says 66.4 key kg oh yeah uh no no the next one line 69. ah oops all brother and child thank you hello okay yes attempt to have a great so I would say that instead of this what we can do is like dinner thoughts joins um to separate them out make it a little bit nicer like that I don't remember the sentence exactly so let's see yeah you only did one lady what's all that no but I want like instead of instead of a comma I want to comma with a space yeah you just put a space that and delete the all of these I don't think so well let's go yes what okay fair enough oh because they're already on the right element so you're just telling them like yeah yeah okay yep after each one right cool yeah okay nice no you get never mind that anyway yeah yeah apparently Okay cool so in that case Also let's uh so we actually have to I have just enough time to do the same thing for um shopping show shopping so that'll be a list down and now we're just gonna say show shopping into list health and I think I'll show shopping best element so we wanted to show list elements something like uh [Laughter] so it's like an element and then Colin how many right the Colon's actually already hard-coded in the HTML what oh that's all right but uh yeah so it should be also an audit list right agility says awesome so ingredient s so shopping for each ingredient I want to have create me a list item and list item in a text no we don't want to do a list item do we or maybe we do yeah we do uh I'm just gonna have one long line but a list would be nice they can have a check box no we're not gonna have a one-line because every shopping is an entry yes yeah that sounds good so console log ingredient s which is not a function oh because it's a oh because it's an object so honey I hate that yeah object object methods I guess Loop of objects okay I think it's far off oh you can say object little Keys No I just use a normal falling that's why yes come on for off uh object objects entries that's what I need foreign [Music] [Music] what's the what's the word for it what's the term quantity okay yeah that was fine uh so not Matt says oh yeah you can you can do that map that's true well anyway I really have four off oh I still have shop in fridge yeah I see her shopping for it okay cool shopping list bell pepper okay nice awesome we have a shopping list okay so good uh excellent so now I'll just take all of that and I remove the old code so what I want to do is clean people yeah so I want to create a list item thank you where inner text will be so I'll have ingredients and then I'll have no really we have it the other way around if I'm handwriting a shopping list I don't write avocado too what you're writing two and then avocado yes what no why did you why would you do that because when you speak you say two avocados you don't say avocado two but your shopping list look like yeah I think I'll probably also want to sort of alphabetically foreign to tell it how it's sorting I think it's by default gonna be very prototype thought and then yeah it doesn't understand sort you need to tell it what to sort no it says it's not it's not a function objects sort my key all right this again it's not just for object by key yeah so you want to do that um oh no what okay it looks like it's not a straightforward as I thought it might be so we won't do it actually help can you okay objects objects are always unsorted so it doesn't actually matter but anyway shopping is not defined there you go so the his shopping list here's all the dinners and here's the shopping list and right on time as well look at that perfect oh my word amazing we're crushing it today yeah it usually goes for item and then quantity really I've been doing it wrong all this time item and then quantity yeah see maybe you're right yeah that's how you write a shopping list no if you would like some more JavaScript fun head on over to javascriptness on scrimba as you can see this is a Advent calendar of code nice yeah every day a new door opens and you get a little coding challenge whoa and this is today's to title case first write a function that takes in one word and capitalizes the first letter of that word and I assume you should not use CSS yes and there's nothing to say you shouldn't so yes give that if you're interested link I'll already share the link if you're interested in typescript you might want to revisit the channel next week no the week after because I will be joined please remember teacher manav who will be giving us a 30-minute Whistle Stop talk of modern Tailwind hacks looking forward to that tail with hacks yes brilliant how do I like hack would Tailwind yeah well thank you all for coming this isn't delightful any closing thoughts uh enjoy your weekend always thanks everyone getting ready with the general doing that too early [Music] laughs