Discover the Best Digital Receipt Generator for Research and Development

Digital receipt generator for Research and Development

[Music] [Music] um um all right so sorry i'm back so i'm continuing as i said um if is anybody available i mean i would acquire the background to keep your microphone uh turned on whilst i walk through this uh i'll be asking questions like can you hear me and stuff like that i'll be glad if you can respond so i know that everything is showing well and we are all good so um did anybody do that if you can hear me let me know you can hear me [Music] somebody hear me [Music] this is what we intend coding with html and css and this is the result i mean after clicking obviously on the generate button over here we expect to see this result with all the fields populated with the right information so that's what we are up to now we are going to begin doing now um at least most of you have started with this page already so you have this looking fairly good from here so i'm going to take one someone's work i'm going to take someone's work and then explain through with it okay okay good so this is and this is ephraim's work okay this is ephraim's work and this is what he's been able to do um and i think this is the results the result is all we have i have over here so um i think everything is all good at this point the customer name email contacts item description amounts and then the dates as well they did speak as well so and this is a button yeah um i also like the fact that for the amount you use uh input type number so then we are sure that nobody enters uh alphabets or strings like i mean characters we don't want over here are the contacts well um you can't so much okay i think the contact is good because actually you want numbers here so i think this is good this is good too did he just come oh no so i think this is good this is good so well done with that yeah i'm also looking through your codes i see that you are using internal css up here using some internal css up here i wish you would work on your um i mean you're in indenting a little bit so that i mean the yakuza a little bit more clear for us also i see each one a two body rule some class names over there that's fine i see it's an l i'm wondering what caused you to name them that way but well that's your own living but i mean next time try and use something more relatable so that anybody at all reading through it can look at it and then know uh i mean get some understanding now i see that you are using a lot of nba spin on breaking space over here to achieve your your spacing right i believe um subsequently you could consider using pattern okay instead of that because you can imagine how long you would go if uh how many times you open this nbsp just to achieve what you want to so subsequently consider is important that is why there is padding or there's margin or there are things like that available i think that's the reviews for now no then there was a review down there good um below here there's something not clear here but i think i'm just going to space it out let me see i believe this end somewhere here okay and i think this starts from here and then somewhere here okay that's fine and then your row closes up over here and that's okay okay good so um here's used inputs type button you know input type submit sorry for the button and the value generates and class okay okay these are the two buttons you called it and that's fine and then over here the submit button so okay that's cool that's cool that's cool that's not bad we can move with this yeah so now um from the image of course i always say that before you start coding we need to look at i mean your plan for coding or let's call it our sudo code okay yeah from the image over here something should usually when you are giving a text or some ui or something to try and code of course some stuff starts come coming into mind where am i going to get this for can i even do this no this i'm not sure i can do now uh once you win in your mind that oh yes you can do this or yes you know where to find this from it gives you a little confidence or dash assurance that you can work on the tax okay so don't worry so much about do you know what code cities last time i said i worry about the fact that you know what it is what can you identify on this page you can see some typography elements around you can see some input fields you can see different input fields for instance email you should know that the email should take input type email let me see over here whether he got that [Music] what's your email let me just wrap this okay input type email that's right that's right that's good so input type email is there so he got it right inputs type email is there um yeah and this should be a text area this description space should be a text area so you look at the image you know that we are going to use a text area somewhere let me see what he uses here so good he uses a text area down here that's lovely that's awesome that's awesome he uses a text area right here that is very good and what else what else does it let me see over here input type dates okay some people are asking where do you get this icon from well you don't need to insert an icon at that point because you can use input type dates okay input type date as he has done over here and then that gives you the date speaker it gives you the date speaker so if you go to his page you can see when you click on it it gives you a date speaker and you can select that and it gets populated in the field there so now some good work done right there so guys you realize um and down here there are buttons these two things are buttons you know there are two ways to achieve buttons one is in a form and one is having outside the form in a form you can use the input type submit and to give you a button for you to customize okay outside the form you can just use the button elements and then put your value in there and then bind certain events handlers to it's like on click or something okay so those are two ways you can get a button so at least for this page alone you you you are warning your mind that okay you know what to do you know what elements to use and everything now coming to this page uh same thing basic stuff there's an image up here there are some typography elements p elements and maybe could this could be some h3 or h5 there could be some h2 around here this is some div with some styles and this lines you are seeing there can be achieved by let's say border bottom okay um yeah you can you know you know how to customize the border bottom okay so you can just say border uh border width for instance this the accounts table over here you can just increase the weight of the border a little bit and you're good to go and then down here we have our buttons showing again styled nicely basically what we have the color change in our background colors okay so this should be possible too for you to do now so this is html css we are done with that now you'll be wondering how do we make this functional and that's what we are going to spend our time talking about with javascript how do we make this functional so uh i mean your day-to-day activities you may we need to print a receipt for a customer or something yeah you go to your page enter some stuff here but how does it translate to this with all the information displayed at the right places and then with the even functionality of clicking to print clicking to download and clicking to send us email now we will do this with time eventually we will explore all of it okay just follow along and then uh you'll be fine yeah so we'll use javascript for this okay but then how do we even start i told you that i think i gave you a certain guide to applying javascript to your html because basically javascript is used to change behaviors of pages so before you change something's behavior you're supposed to know whose behavior are you going to change what element is it you are supposed to even know how the element is called and make sure you've called it properly you've given it a name properly remember we give atm we name html elements with id if we want them to be accessible with javascript mind you you can use class as we did in css in javascript we like to use the id and leave our elements now after you have done that name the element identified which elements will do what the next thing you are supposed to i mean of course know about us the me see okay let me see you are supposed to know about what trey gets this whole action at what point would the behavior of the page change okay that is if you click on the generate button obviously you may enter information in all these fields but if you don't click on the generates you are not going to get your receipts i mean in the ninth in this nines form so of course you know that you are supposed to click the generates uh for something to happen yeah so that's one thing you should do now after you click the generate what's next you get this new page meaning that everything on this page is replaced now by this and on this we are going to have uh the information we filled here the values we put in this form fields showing at their respective places over here nicely right so then this gets uh interesting okay so how are we going to go about that now to just tell you what i think in mind uh after i build my html and css one thing i'll spend time doing is to name them okay name them with the ids i see that this has not been properly done here but i'll go ahead and optimize this code clean up some stuff i mean we want to keep it standard okay uh good work for whatever you've done so far looking close to this but we want to keep the code standard so i'll go ahead and optimize this and then after that um i'll use that for um for for further explanations exactly so um oh sorry yeah so the first thing i'll do is to name name my fields and make sure that all of them are referenced properly now the next thing is that i'm going to think of how to collect how to collect um let me see how to collect the values that are entered in these fields okay how do i collect it when i click on this button generate how do i collect the values that are entered in this field so let me let me put that down this is my serial code okay so let me say collect form values okay that's the first thing i'm going to think about how to do now the next thing i'm going to think about how to do is to probably store the values okay because um if i don't store it it may get lost i mean you know you don't store it then it's um volatile right so you're supposed to store it so let's think of a way to store the values we collect so let's say store the values the form values okay and now i think one important reason why we even need to store the form values is that over here we have a button we've called receipts logs and i mean the inspiration for putting that button there is that after you've generated receipts for a number of people you want to check your history or all receipts you've worked with in the past this receipt logs on click should be able to pull that up okay pull your pass records up so that you reprint or i don't know but i mean for viewing sake or any other reason that feature should be possible so that tells us we have to store every um instance of this form submission okay so how are we going to do that we think about it and we will do that now after storing it we need to think of how to retrieve it from storage okay it's not enough to store it you stored it now when you need it again how do you retrieve it from storage okay subsequently now then we need to figure out how to populate the values [Music] at their respective sections uh on here on the left the receipts page so what i mean by that is that after collecting my value storing them uh retrieving them i mean how do i get them to show at the right places over there it's something we have to think about and worry about okay so we are going to do that together right we will start and then continue with times once more we'll continue with time and then hopefully before we finish this project you have the good gaps on html css and javascript okay and then we can move into the data and analysis so um let's get started i hoped that this code would have been i mean best so that i don't have to work too much on html and css but trust me this nbsp you've put around this is confusing me a little bit so i'm going to just spend some few minutes optimizing this code explain i'll explain as i go along basically correcting this to look nicer okay and then after that we we look at the javascript side is that is okay can you guys hear me can you still hear me at this point someone said something yes all right that's awesome that's awesome and i hope you found it yeah i hope you follow everything is clear at this point yeah yeah that's fine so um i'll just spend some let me see just some ten minutes uh optimizing this code and then let's see so right from the top here he has a div i'm very much particular about indent and okay because indenting allows me to like see my codes very well so i'm going to go ahead and indent this push this inside a little bit then we have this wrapped around the strong i don't see the use of this clasp over here so i'm going to take it off so strong open the air strong closed there so basically he's using the strong element to sort of deepen this deep in this particular text and i think you could have done it with um css okay so permits me to take off the strong at this point very well it is not too necessary let's see if this and see what we have here yeah i mean almost the same results let's move to the next one over here here's another div here and then i also indent this take off the strong over here i mean take off the strong tags yeah we're going good and then coming to the next line he's declared a p element over here and he's used the em okay the em to sort of give it the slanted um that give it the slanted you know feeling i mean that's what we have over here so that's why this is it looks a little slanted you can go check out what the em element does more and learn about it now coming down here he has opened the form then closed it and that doesn't make too much sense because um all the input fields are supposed to be inside the form you get it the input fields are supposed to be inside the form all right if you put it outside the form and you submit it won't work okay so guys form tag form tag um or let me say the form element you put all these input fields inside the form element so i'm going to copy them and bring them in one by one and i think once i'm doing that i'm going to be styling and then optimizing it even further so um no before i continue um let me talk about this form field a little bit so this form um elements okay sorry take certain parameters i mean there are a lot okay but what we need at this point uh um two things first thing we need is the method form method okay now in form methods we have two main methods we use we have either the posts method or we have the gets is that right i mean in another um session i'll talk more about what they each mean but i'm going to use the let me just use one let me use post okay let me suppose i know why i'm using post now let me i'll explain in a subsequent session now after the method attributes one other attributes we need or we would it's very useful over here is the action okay action so action form action what's like what handles this form okay after this form is submitted what action does it trigger okay so with time we are going to put an action over there for now i'm just going to put this characters there in case you don't know what the characters mean uh using combining da hash and exclamation means that are invisible nothing should happen okay yeah so i mean that's what i use as i walk around if i don't want my phone to submit to anywhere for now but so now i can copy this stuff and bring them in one at a time let's copy the first line i'm going to indent them policy we don't need a strong okay we don't need a strong in this case we don't need this in this case okay so we are just we just need let's say the label which is customer name and then inputs type which is a text okay yeah yeah yeah that's good um and then this nbsp comes for now because that is what you are using for your spacing i don't really want to break your space in uh i'll leave it there for now okay let's not let's not worry too much about styling let's just get a code right so yeah i'm going to go ahead and do this for the rest so i'll paste this here take off the strong put this on the next line uh let's come to the next one [Music] let me see if i can do that quickly without wasting time um see let me let me run that okay let me write that because i see the strongest is used the strong quite a number of times i'm going to i mean find a way and deleting them in box so usually a workaround i do is find and replace okay so in in venus code if you want to find you say control f if you say ctrl f this comes up up here for you to find okay this by clicking on this arrow this icon over here you get an extra field where you can enter something to replace okay but because i don't want to replace it anything i basically want to say that anywhere there is strong clean it and don't put anything there okay so i'm just going to leave it blank and then i'm going to hit enter there should be a way to say replace all yes so um so um yeah we can replace all with this this button here okay so i'm just going to say replace all then immediately you can see that everywhere it has replaced uh anywhere the strong was declared with blank nothing okay yeah but mind you that's just for the opening tag so i should do the same for the closing tag right so i'm just going to say the opening strong tag so it should find all instances of that and replace it with nothing okay so i'm just going to do that so yeah by doing that i've been able to in one go remove all the strong tags okay so i i used this finder replace a lot i mean it saves me a lot of time so you guys should uh also check it out and then i mean it's lovely it's lovely man yeah so um let's continue let's continue so we have email yeah we clean this so now we have contacts contacts okay we have some brs down here breaking spaces and this is not necessary yeah then it comes to the item so the items we have the label for item we have a big space and then input type text again then we have a couple of bros down here i'll put them on the same okay i'll put them on the same line here okay okay okay okay let me put these two on this line all right probably let me clean what yeah so nbsp are breaking spaces so uh i mean by cleaning one just one space would have been cleaned okay yeah description okay so description was put in a div wow i'm just going to copy that and put that here so this text area and then all right yeah cool now mind you the text area of course uh can take some attributes okay one one key attribute i like to use is the rule okay so i can say text area rules okay and i can say that give me five rules when we save it we'll see how that that that looks or translates at the end what's next yeah there we come to the amounts mind you i think there's one beer here come to the amount okay so for the amount to same thing we want to do it this way to make it clear yeah what is next okay then we have the dates also oh this strong didn't go anyway we got him now uh how did this also we have a couple of beers here too many there are two million yeah okay okay okay okay yeah after this what do we have yeah and then after the dates i think we have this this div over here we don't need this piece so we are just going to clear up this piece we write some javascript there for sure documents for now let's clear up this piece yeah and then we have this okay that's fine that's fine so you can notice that uh having trimmed and optimized up everything all the form fields are in the form okay this is the closing tag of the phone and this is it's opening up here okay so all the stuff we did are inside the form all right let's save this and see how it looks like okay not bad not bad no bad uh we're still good still good probably just some one space here after the description let me just go and do that let me just go and do that um some beer also should do right a couple of beer yeah let's abuse it [Music] oh no i can't [Music] what could be the problem let's put them here let's drop them right here yeah we got you yeah one should be fine yeah one is fine okay yeah so this is how we have it what do we have here we have some end over here which is not needed i think this will clean him real quick yeah we are good we are we're good so yeah this is what we have at least these schools are better we are not the best piece of code but at least better i've been left to me alone i'll take off all this and bsp and rather use um i mean css to space them or give the imagine i am nicely but for now i mean this will suffice okay good so um that was just me doing atm unlucky that's fine that's just me doing it that's fine so back to our cdo code back to our cdo code um the first thing we want to do if we want to apply javascript before i continue um any question does anybody have any question with what i just did with the html i mean that was me working on somebody's piece of code making it better and does anybody have a question a frame yourself do you have a question on that so you have a question lose it all right great all right um if any if no one else has a question i think you can continue we can continue yeah so back to my pseudo code we haven't started coding javascript yet by my pseudo code in my mind okay i've planned that the first thing i should do is find a way and collect all the values that will be entered in this form okay find a way and store it somewhere find a way and retrieve it from the storage and then find a way and populate it at their respective places okay today what i would like us to do is just to break in and and work and collect form values exactly for today let's work under collect form values in a subsequent session we will do storing the values reaching it will continue all the way down now um to collect the form values okay one thing that comes to mind is uh what elements are we going to collect their values okay basically these elements over here right now there are there are different types of elements here this is a label okay this is a typography like it's a label we don't need to collect anything about this label but rather we would like to collect something up from this inputs field you get it so it continues all the way down it's not all the elements here that we need to collect their their values right so we need to identify which of these elements do we need to collect their values now we can only identify that if we have named them guys you get it we have to name the elements so all the elements here we have that we need they are values we have to name them now because we want javascript to be able to collect them or call them we will use their id the id property is that right so let me just add it to my sudo code in collecting the form values first thing i should think about is naming or let me say form fields okay naming or form fields i'll have to name all my form fields right yeah we are going to go about that and do it so um let's do that let's jump into that real quick so uh we need to collect the input field so from our codes let's look for the input so this is our first input field here okay and it's um it is related to the customer name right so i'm going to give it an id okay and say customer underscore name now mind you in giving an id you can use i mean any name uh i mean of your choice just follow the best practices they are right naming conventions to use okay guys we've gone through this uh otherwise just refer to my uh previous sessions and then uh or i mean just go and uh research on naming conventions so that you know how to maybe your ideas the right or the best way but and every name you put in there should suffice okay so um i'm just going to call this customer name for simplicity instead of customer maybe i'll say cass okay s cos okay please uh why are you not using class is that why are you using id instead of class okay good so yeah um you can mute yourself mute yourself if you're not talking yeah right so to answer that uh why we are not using the class um the class property instead of the id property mind you we use the class in in css basically the whole thing about class and ids are in my in in my understanding they are like let's say naming elements okay so you can name an element a class customer name okay now in css you could have done something like dots customer name over here okay and every style you put in here is going to affect this particular guy called customer name now in javascript um we are more of no before i say anything about javascript mind you in css we could have said um id customer name and refer to it in css here usually they use the hash okay we could have done that right but see best practice css i mean are binded to elements with the class attributes okay the class attributes in javascript we bind the names to elements with the id attributes exactly so when you want javascript to be able to call your element please use their id attributes you can tell javascript to code for them with a class they are class attributes right but i prefer using id now one thing to mention is that um in a page okay or in a document it is not advisable to have um or it is not right to have two elements with the same id you get it but you can have multiple elements with the same class name you get it so i think yes yeah so i mean it goes to tell you i mean to even clarify more why a class is preferred in css because maybe this customer name you can put something in here and say background background yellow and you want this to be applied to not only this guy not only this guy but some more people down there now with class class gives you the opportunity to go round and whoever you want assign this to them the same class name and whatever is styled here would affect them right but with id id is sort of limited to one person exactly is that clear to an extent yes all right great so we use id so because we are doing tabasco so i can move on now right yes please so um i'm going to name them and i'm saying i'm instead of customer i'm just going to say underscore name so over here maybe i'll say cast email things like that okay understand why i'm i'm going that way i've explained that so let's go quickly so this will be cast email this should be cast contacts the item this should be cast item okay then this would be the what's the the custom the customer description has a description i mean there's a descript or desk or something let's just say description for now now i i hope you are you understand where i'm putting them i'm assigning them to the input fields because that's what we want to collect their values right now i'm putting it in the opening tag of the input fields please in the opening tag of the i mean actually the inputs will just have you cleaned up so i think that statement doesn't work all right so let's just continue in peace okay so customer amount to then over here i'll say customer date as well yeah that's fine inputs type submits yeah let's give this an id too so an id we can see we can say submit oh no it's generate right yeah so let's call it generates generates let's call it generate button no okay ing to my naming conversion i'm using underscores so generate button okay uh this two we can call it uh let's say logs button okay logs guys this is my name when it gets to your turn use your old nip make sure you are following the best practices yeah you are using something relatable okay and something that works in the store so yeah so i've named all my elements guys from the top here i've named all my elements with the id so now i can call them okay or i can refer to them is okay that's awesome so we've been able to um we've been able to achieve this in naming all our form fields now the next thing we should worry about is on what instance do we even collect the fields okay let's say i come in the form and i type in some stuff here okay on what instance does this thing start being collected okay and when i start talking about this you know what i'm talking about our favorite event handlers or events okay there are various events okay uh in our case um we want to see on click on click of a button so on click of a button you start doing something okay now on click of what button what button should we click to start this whole process on click of the generate button exactly so on click of the generate button then continue doing what you have to do okay so i'm just going to go into my code and say that how do i assign on click to the generate button okay we can assign that by using the the i mean the on click events okay so on click on click do something right here right on click do something do something okay good now for today because we are collecting the values basically to continue the sentence what what i wanted to read is that on click of the generate of the generate button collects all the values from the fields exactly on click of the generate button collect all the values from the fields now what fields are we talking about we are talking about the customer cost name custom you remember cast name cast email cast contact cash item cash description cash amount and cash dates you get it so on click of the generate button collect all the values from all those fields that i've listed so you are just you are going to collect them individually do you follow now um as i said to even collect something from them you must have named them right if you haven't named them sorry i don't know how you're going to call them and collect something you must have named them in our case we have named them or yeah nicely right by starting cast something cut something so to update my sudoku i'll just say collect all the values from the form fields what form fields are we talking about we are talking about the the customer name we are talking about the customer contacts we are talking about the um let me let me admit to this person in yeah we continue we are talking about the customer name the customer contact we are talking about the customer what email blah blah blah all the way you get it to the last item now so how do we do that how do we do that how do we do that first of all let's look at how to collect one one of them let's see how to call it what could what javascript code can we write to collect this when we are able to get this we can basically duplicate it and yes in all the cases substitutes for the right to name exactly yeah so i'm going to do that now um i mean me me here thinking of what i mean javascript code we can use for that i mean what comes to mind is one of my favorite codes something that documents dots gets elements by id right you get it now my id i love this guy so much you should also like him too right now we've used this before in displaying information but in this case we are collecting okay mind you we've used the documents or get elements by idn i remember we use the the particular you know that the get element that is like some sort of a wide object but we use the particular one we used was dot inner html right today we are going to use something new let's go to w3schools and let me just enlighten you a bit about document.gets elements by id good so over here i mean w3schools is giving us a lot of information interesting information um um i mean about the document does get elements by id mind you it is under the dom dom okay uh you remember that dom the document objects model remember this if you don't refer to our previous sessions and update yourself on that they say the html dom document object is the owner of all other objects in your web page okay the document object represents your web page i mean obviously if you want to access any elements in an html page you start with assessing the document object right now below examples of how you can use the document object to access and manipulate html good now let's take the first one what we've used all this all is document dot get elements by id then you put the id here now read the description they say it finds an element by element id so whatever id you put over here is going to look through your documents and find out who is the guy that has called this id by this id you get it there's another one documents get elements mind you it is elements this is elements okay this is element this is elements you get it wrong you are going to be hot okay so document don't get elements by tag name now they say what it finds elements by tag name so whatever tag name you put over here is going to find all elements that are called that name now um what is a tag okay uh when we say tag name you know what tags are tags are basically distinct this label is attack inputs it's attack h2 it's a tag all those kind of things so you could say over here document. get elements by tag name say input okay then it's going to get all the inputs uh tags and i mean you can continue that script or that piece of code and say something extra now a similar thing happens with the get elements by class name okay elements so it can get multiple elements the id can get only one element the ele the and the class name and tag name can get multiple elements okay today we will use the id okay we use the id for today good uh remove right remove now um [Music] these methods go with um setting properties okay the properties are what have been listed down here okay well we've used this uh dot element dot inner atm we've used this before so it changed the inner atm of our element we are here to use attribute stardust property and all the rest okay just read more explore more by where necessary would use it now we have more over here for adding and deleting elements we have create elements we remove child pen chart replace chart right now we even have events at hand list over here dot on click okay so you can do something here [Music] yeah there's more there's more that we can we can explore over here but for now um what i want you to [Music] to know is this coming oh good but um i'm trying to learn something here so that i can okay let's look at this piece of code here so good i found something useful over here um now we are going to use here now where's my sudoku good now guys um my method of i mean going to collect the the form values okay was was to use the document dot get element by id possum id then i will say dot value okay i'm looking for what's the particular i mean page that can let us learn more about it [Music] okay okay good um interesting anyway we go we keep learning every day right so um i just saw something new that kind of excited me sorry i'm back now yeah so we are going to use uh this document.getelements by id dot value now let me explain to you what let me explain to you what is what they all mean it basically means that look through the document gets the elements called this this by this by this thing over here and then gets its value this is understandable right somebody tell me is this understandable do you understand this do you yes okay who else will somebody say i understand it's confusing who else who else was good i'll go over it again there is a piece of javascript code that is called document.getelement by id dot value okay now what this piece of code means okay is that i'm just going to increase zoom over here okay what this means is that in the whole document get the elements that is called by whatever you put in here and then get its value this should be clear right yes good so we are going to use the same as a line of code to collect all the form values so in the case of customer name we are going to say something like this documents get elements by id then we put here customer name custom dot value it means that look through this page where find the element that is called customer name and then whatever is in there no gets it for me exactly exactly yes it's clear for me good yes good good now after getting them we can leave them hanging okay the right thing to do is to store them in variables okay store them in variables so i'm just going to add that as my cdo code and let me just say for now store in variables or let me see instead of using the word store let me say assign assign to variables okay assigned to variables okay so you know how to uh i mean declare variables with keywords in our case we use let's so you can say let's some variable name which can in my case can be i can say customer name let's custom customer name equal to this okay and what this line uh will mean is that this let's customize means that i've created a new variable called customer name okay now what am i putting in customer name i'm putting what's the this code fetch from the document okay so in english what i'm saying is that create a variable called customer name now in the customer name hold the value of what is found in the elements that is called underscore name exactly is that clear is that clear somebody says something yes good good good good yeah it's clear it's great right we go over it again we keep practicing so um let's cast name let's go to document.getelementbyidcastname.value so we will do that for the rest of the elements okay so it is basically in each instance change the right id over here so this will be cast contacts and then over here to that i'll change the name of the variable mind you different variables in each case maybe i'll say class email you get it all the way down so what's more is there we have cast name cast immunocast contact we have cast item mind you there's a different naming convention i'm using here and there's a different one i'm using here don't get confused know what to use at the right right time okay here we have class description and we need more we need more i think after cast description we have the class amount that has bits so over here you see cast amounts is that right so um we've been able to create variables for each of them and then we've been able to assign the value we collect from them into the variable is that clear now mind you all of this thing we are doing individually we are we are we are doing something getting those getting that getting this getting blah blah blah blah blah now mind you all of this is supposed to happen on click of the generate button meaning that all of them technically were supposed to happen in here where was that yeah all of them were supposed to be written in here like this [Music] right yeah this was how it was supposed to have happened of course i would have changed the i mean this invented comments well but but don't you realize that this is this is no good i mean this is no good you can't dump all this [Music] you can dump all that today so how then okay do we uh sort of like um assign all these actions to one thing so that by calling the term all of this will happen at once okay what i'm talking about is i'm talking about a new thing called functions okay javascript functions so we are going to learn something new javascript functions functions are what are awesome guys javascript functions are awesome okay so if you thought we wouldn't do functions here we are we are coming to do functions we've been able to do this let's leave it a little bit of this yeah yeah can't check it for now so we're going to learn about javascript functions and in order not to confuse you okay i may end at this point and continue at another time before then read on functions explore what functions are w3 schools record camp any other our javascript handbook and any other resources out there explore functions and come prepared for our next session exactly so for today i'm just going to copy this javascript codes come here into my html code open a script stack and dump the them there for now okay let me dump this here for now okay yeah let me dump this here for now now um this is working okay this is working let's say we want to we want to just echo them i mean let's just see uh no no no not today not today anyway that's fine so i'm going to end at this point at least one new thing you've learnt is how to do this document.getelement by id dot value go back edit your html assign their respective ids to them go back create variables for each of their fields and then collect their values nicely until we meet in the next class is that okay any questions at this point ask questions questions are good stacy jemima meshach tamati [Music] anybody else yes i'll share my coaches i'll share my culture to you too i mean just for uh reference i mean mind you don't use my quotes refer to them yo thanks thanks any question if there are no questions if there are no comments i think we can end this class of course this was recorded i believe the recording went well yeah i think it did go pretty well so i'm good at the end of this i'll find a way and share the recording with you okay so that you can refer to it and go over it again so thank you very much for joining this class um i'll catch you in the next one until then i'm available on whatsapp and i mean if you want to just send me text if you want to share photos with me find me on instagram yeah i'm there you could share your photos with me otherwise there's two times linked come on chat mean what's up and say something don't wait till friday before you start bombarding me with uh how do you what was the word for that i'll save that for you guys now all right so formally the classes over