Firebase Functions Tutorial #3 - HTML Template

Key Takeaways

okay then gang so in this video I want to concentrate on creating a front-end template so the HTML CSS and any front-end interactivity kind of JavaScript that we need to create for this project now I'm quite aware that this is not an HTML or CSS or front-end JavaScript tutorial series and for that reason I'm gonna speed through this and if you do find yourself struggling with the HTML or CSS I would suggest going to view an HTML or CSS tutorial first of all because I will expect you to understand all of this okay so what I'm going to be doing is just copying and pasting chunks of code from the course files on my github repo into this project and I will explain each bit as I do it but if you want to just grab the whole thing copy and paste it all I'll leave a link to the exact branch in the github repo for this lesson you can go there and copy and paste a whole lot okay so first of all we are going to be using Google icons material icons in this project these things right here so what I'm going to do is go to the developer guide and I'm gonna grab this CDN for the fonts icon which is right here so let me grab that and I'm going to paste it in the head over here and that is going to allow us to use the Google icons in this project okay so next up I'm going to create some of the HTML so let me close this file tree so we get a bit more room and now below the h1 the first thing I want to do is a header so I'm just going to copy that from my repo and in fact we'll get rid of this h1 we don't need that there anymore and instead I'm going to paste this in okay so just a header tag and navigation inside and two links one for ad requests and one for sign out and these by the way these have classes because we will be using these as hooks in either the CSS or JavaScript in the future so that's the head at nice and simple next we need a section for the actual contents and that is going to be the list of different requests that have been made so I'm going to paste that in and again we have a section with a class of contents and h1 inside that we have a ul with a class of requests again because we're going to use this in the CSS and possibly the JavaScript in the future and this UL this will be the list of items or requests that eventually it will be output to the screen now ultimately will be dynamically output in this template later on dependent on the data that we have in the database because we might have five requests maybe four we don't want to hard-code everything but I am hard coding one item right now just so we can style it and see what it will look like in the future so we have an li tag a span inside that with a class of text for the title of the tutorial request then below that we have a div and that contains a span with a class of votes that will show how many up votes that particular request has and then an icon down below and this is how we use the material icons we use an eye tag we give a class of material - icons and then this is my own class up vote so I can stand it differently later if I want to or use it as a hook in the JavaScript and then finally this is the keyword of the icon we want to use now all of those key words come from material icons down here so you can see each icon has its own keyword I found one which looked like a little upwards arrow and it was called arrow upward okay so that's those new things I'm gonna save it now and I'm gonna go to our browser I still have the local development server running so if I go to this page localhost and refresh we should see that HTML looks terrible so far but we will make this look better by adding a bit of CSS so let's do that first of all so to do that we need to add a CSS a file into the public folder so new folder and I'm going to call this CSS and any CSS is going to go inside this folder so new file and that will be called styles.css very original okay so same again I'm just going to copy and paste little chunks so first of all I'm just going to do a little reset so the body we're taking away the margin and applying a background color the body h1 h2 PA and input we're given a color of this kind of medium gray color set in a font family stripping away any text decoration and then finally the UL were taken away padding and margin okay so the next thing we need to do is style up the header right here and the nav and the anchor tags inside that head up so let me now grab the next a lot of styles and paste those all right here so we have this header we're going to give that a width of 100% so it goes all the way across a bit of padding we're going to align the text to the right so the links appear on the right side of the page the background is white we say box sizing is border box and that basically means that look we don't want a width of 100% and then 20 pixels of padding on top which would take it outside of the width of the browser instead I want you to incorporate the padding and any border into the whole width of the head and that's what this means okay then we just apply a simple box shadow so it kind of floats off the page a little bit the anchor tags inside the header we say margin left is 10 pixels so we have a little space between each other then a border bottom is two pixels solid and this kind of yellow color then the padding is four pixels all the way around the cursor is pointer so when we hover over it we see that little hand and then finally on hover of these links we say the background should be the same yellow that the border is and the color of the text goes to black whereas before it was this kind of gray color so I'm gonna save that so far because we've done the header styles now and our only flesh over here so we don't see any styles and that's because stupidly I've not linked to whom this fire right here from the index so let me do that I'm going to add a new line down here and then under here I'll say link and it's gonna be a stylesheet H ref is just into the CSS folder forward slash Styles CSS so this should work now refresh over here okay that looks a bit better already so now we just need to style up this bit down here so again if we go back over here we can see that this is this right here the section with a class of content and all the stuff inside it so let me grab the next set of styles copy those and paste them over here I'm just doing this because I don't want to boy you're writing them all out from scratch okay so first of all we have the content right here which is the section itself this thing yep and we're saying we want the max width to be 800 pixels imagine a 40 pixels top and bottom sorry just top zero bottom or two left and right and what that means is it's going to automatically apply margin to the left and right of this content section beyond the 800 pixels so that it sits directly in the middle of the page okay and in fact no I'll show you that later so down here the request list which is this right here we're grabbing the Li tags inside those and styling those so a bit of padding a bit of margin a list style type of Nan so we take away those little discs the background is going to be white and the border radius is going to be oops don't want to open up her and your window the border radius is 10 pixels so that gives it a kind of soft corner on each corner box shadow again just a small one then we're going to display this as flex just because inside we have a few different elements and we want to spread those out we want this span to be on the left side the title of the tutorial request and this stuff on the right side the div that's the upvotes and the arrow and by displaying this as flex and using justified content as space between what that's going to do is apply space between this element and this element so this is going to be on the very left then I load a space then this on the very right if you do want to learn more about flex box I've got a whole series the link is going to be down below okay so anyway now the request list of votes and we say in the position is relative and we do that just so we can apply a top property and say minus 5 pixels just to bring it up a little bit that looks better then we apply a z-index of zero because of this position property and saying Z index is zero just so it doesn't go above any modal's we do in the future which will have a Zed index of one okay so then we have the up vote which is the icon the curse is pointer so that little finger when we hover a border radius of 50% that's because oops have not grabbed all of these let me just grab the background color and paste it in and that's so when we click on the actual up vote icon it's gonna have this circle effect at the background and that's because of this border radius and it's going to have this background when we click on it as well that's what this active pseudo-class means so let me now save this and previous so far and refresh okay that is looking pretty good so far so hopefully I'm not boring you but there's just a little bit more to do and the thing we need to do next is hook up some kind of modal so that when a user clicks on add request it throws up a little pop-up or something and we can add a new request okay so we're going to create that as well now the first thing I want to do to create that is just create the HTML so I'm going to copy that from my repo go back to the index page and right at the top above the header I'm going to paste this in so we have a div it has a class of new requests and inside that a div with a class of modal then an h2 and then a form as well now that form has an import for the request text the title of the request and then a button to submit the form and then finally at the bottom a p with a class of error and that's just for any kind of form feedback later on if there's an error with the form or with the user's data that they input to the form so very simple HTML and at the minute it's gonna look pants it's gonna look something like this but we are going to style it now as well so let me go back to my CSS and I'm gonna grab the modal styles and paste them in my CSS over here like so so this mode all right here we're going to use that class later on as well because we'll have a modal for authentication so these Styles are going to be kind of global for each model we use they're going to have a width of 300 pixels padding of 30 pixels margin 100 pixels top and bottom also left and right again so that sits the modal in the middle of the page much like this stuff is in the middle of the page right now because we use the same technique on that then we have a border radius of 10 pixels just softens and curves the edges a background of white a small box shadow and then we're saying text align to the center so that is the modal and remember that is the thing that sits inside this new requesting right here so it's gonna be like a little white box now this requesting right here we're going to use as some kind of semi transparent veil behind the modal so you know sometimes when you click on a link to sign in and the background kind of fades out a little bit so that the modal stands out a bit more that's what we're using this thing as so to do that we're saying Whitley's 100% the whole page height as well position is going to be fixed and it's going to automatically go from the top zero left zero we don't have to explicitly say that the background is going to be a black color but we're also giving it an alpha channel right here RGBA and that alpha channel is saying basically we want this to be semi-transparent then we're saying the Z index is one so it covers everything including this thing over here that we gave a Z index of zero because Z index of one comes out of the screen more than Z index zero okay and then display is set to none to begin with now I'm going to actually comment this thing out we set the display turn on because automatically when you first land on the page you don't want to see the modal but just for a minute I want to comment this thing out so we can see it okay okay so let me save that and come over here and refresh and we should see now this model right here so this semi-transparent background that is this thing right here new request and the model itself is the thing that sits in the middle right here okay now what I did is set it to be displayed on to begin with but when this new request right here has a class of open applied to it over here if we give this a class of open that's going to be set to display block so we'll use JavaScript later to kind of add this class and take it away when we click on this link over here and we'll take it away when we click on this background over here as well so before we this let me just apply a couple of styles to these things right here so let me go back over here and paste a couple of things in so form element styles first of all the import display:block margin:0 stop and bottom zero left and right a bit of padding a border width of two pixels and that's just at the bottom so this is the top 0 right 0 bottom to left 0 the width is going to be 100% and that means 100% of the model itself barring the padding of the model and then finally we have this button at the bottom in the margin top 10 pixels padding background which is the yellow color 0 border it's got a font weight of bold the font family it's going to inherit from the body and the cursor is pointer and remember in the body we specified the font family right here okay sweet sorrow let me now come over here and I'll refresh and we should see that that looks now a little bit better we don't and that's because I'm not saved this Styles file so let me try that again okay and that looks a lot better so then what I'd like to do is come back over here and uncomment this thing so by default this new requesting is not going to show over here right but when we click on this we need to create some JavaScript that adds a class of open to the new request and when that occurs then it's going to display as block now then when it's open if we click on the background of this new request the bit that's semi-transparent and that's going to take away the open class and therefore close the modal because then it will be display:none again I hope that makes sense so we need to create now a JavaScript file to control this functionality in the public folder I'm going to create a new folder and I'm going to call this Jas so any JavaScript goes in here and we'll call this app Jas as well okay so first of all we need to link to this file from the index now I'm going to do that at the bottom of the page over here and I'm going to do it after all of the firebase stuff so script and then we need a source attribute on that script and that gonna be jeaious /up dots Jas okay so we've hooked this up now we just need to go back over here and add in the code so first of all we need to query the Dom for a couple of different elements we want this element right here but also we want this element at the top where is it new request because that's the thing that we're going to apply the class of open to and take it away from so let me paste these two things in all right at the top so we have the request modal itself which is the new request div that's the thing that opens and closes so this right here we also have this thing down here the request link and that is add request so that's this button right here or this link so we have those two different elements now a reference to each one so first of all let's handle the click event to open up the modal so let me paste this in so open request modal and we take the request link which is the button in the nav then we say add eventlistener it's a click event and we find this function when applicant occurs we take the request modal which is this thing right here remember that div at the top and we want to apply a class of open to them so that's what we do we say take the request modal you get the class list and use the add method and add the class of open to them so this should work press save and refresh over here and then say add request and it's going to open up this modal also but now we can't close it no matter how many times we click so now we need to add an event listener also to the request model itself remember that's the div where this is semi-transparent and when we click on that we want to close the modal so what I'm going to do now is copy and paste another chunk in over here like so and what we're doing is saying take the request modal add an event listener it's a click event listener we taking the events parameter into that function we get that automatically every time as the JavaScript event be it click hover or something else and the reason we take that in is because we use it right here because what we're doing first of all is see look if the target of that event the classlist contains new requests so if the target was this thing right here then what we want to do is we want to take that request modal and remove the open class now why do we do this check well let me just save it and let's test it first of all then I'll explain it so refresh at request and now if we click over here it closes it right now then let me take away this if check let me just cut that and delete that and save it now we don't have that if check anymore now if i refresh over here click add request well it still works but now if I try to put my cursor inside this well it closes as well and that is not much use to the user because down the current requested tutorial so the reason we add this in like here is to say look I want you to check that the thing that the user clicked on the target of the event actually is this new request div that that div contains this class right because if I click on this thing right here the form itself the import well that becomes the target and that doesn't contain that class so if it doesn't contain that class then I'm not going to do anything because I just want the user then to enter in some information but if it does contain that class it means they've clicked on this thing right here the background and therefore we remove the class of open so if I save this again you'll notice if i refresh and then add a request if I click anywhere in the modal now it doesn't close because the event target does not have that new request class so only if I click out here where the event target does have that class does it close ok then whew so we got there in the end I know this was a slog but I want to put this on a video so you're making no assumptions as to how I've created the code but now we have it up or running so we can move on to cloud functions now and we're going to create and deploy our very first cloud function in the next lesson