Firebase Authentication Tutorial #3 - HTML Template Setup

Key Takeaways

or rather than gank so the first thing we need to do is create some kind of template for this website so I'm going to create all of that in this one video so look for the rest of the series we don't need to focus on the HTML or anything like that and we can just focus on firebase authentication so this is going to be a bit of a speed coding exercise all I'm going to be doing is copying and pasting snippets from my github files over here so I will be walking through every individual section individually but I'm not going to be going into much detail about materialized all the different things I'm going to be using to create this template if you want to learn more about materialized or CSS or HTML check out the relevant links down below going to know series ok so for the rest of us good luck keeping up and here we go so first of all I mean a blank folder called firebase off and we have this image folder inside down inside here there is a logo called logo SVG now if you want to grab that go to the github repo go to lesson 3 right here in the branch drop-down then go into image and you're gonna see this logo to SVG right here so I just save that to my desktop and now it's inside this folder right here because we're gonna use that inside the header alright so the next thing we want to do is create a new file not inside image but we'll call it index dot HTML move it outside the image folder now so down here and then I'm gonna say doc tab and that's going to create this little document for me this look boilerplate so the title of this document is gonna be game guides like so now the first thing I want to do is create a link reference to the materialized CSS so I'm just going to copy this from my repo and paste it right here so this is the materialized library if you want to grab this you can just get it from my repo or you can go to the materialized website and get it from there alright so down here inside the body the first thing I'm gonna do is give the body your class right here of grade that gives it a great background and we're going to lighten this by saying lighten 3 so these are material I CSS classes and they control the CSS for us alright so then inside the body right here the first thing we want to do is create the navbar so I'm going to copy this in paste it right here the navbar okay and all it is is enough element with these different classes this makes the drop shadow disappear gives it a Z depth of 0 we're coloring this navbar again then inside we have this nav wrapper and container which centralizes everything in a central column then we have an anchor tag right here with a class of brand logo again a materialized class just offers some styling for us then right here this is where we're linking to this image right here this logo to SVG so that is going in the nav bar we're overriding some of the styles the width is 180 pixels and the margin top is going to be 10 pixels then we have a ul and this ul is going to contain all of the different Li tags right here we have a rogue spun tag so if you see that in the template delete that we don't mean it not sure how it got in there anyway these are all the Li tags inside and these are the different menu items now you're going to notice that some of them have a class of logged in and some of them have a class I've logged out later on in the course we're going to control which ones are shown two logged in people which are going to be these and which ones are shown two logged out people these but for now to begin with they're all going to show in the nav bar okay so we have account or log outs create guide log in and sign up you're also going to notice they all have a class or modal trigger except log out and they all have a data target of modal create again except log out so each one of these has a data target of a different modal which we're going to create and they all have a class of modal trigger now the idea is that when we click on one of these it's going to open up some kind of pop-up and modal right and these things control which modal that is going to open so if I save this for now let's just preview this in the browser so far I'm going to right click and go to open with live server that is what this thing did for is over here this live server thing so it allows us to right-click on an HTML file and go to open with live server now that's opened up over in this browser so let me scoot this across and this is what it looks like so far so looking pretty good right but if we click on nothing happens yeah so let's create these different modal's so the first thing I want to do is create a modal for signing up so let me again copy this and paste it down here underneath the nav so let's paste that in okay so this has an ID of modal signup we give it an ID because we're going to reference this from the JavaScript later on we have to give this a class of modal this is what materialized uses to say hey this is a modal so I know that this needs to open up and be styled like a modal pop-up okay now this modal signup ID as well this is also the thing that we gave to this right here so data target equals modal sign up now materialized knows that when we click on this it needs to open up this thing right here in this modal alright so inside we have a div with a class of modal content then an h4 then we have the form for signing up so each input field has a div surrounding it with the class of input field this is styling for materialized we have an input of email and we have a label for signup email we have a label for signup password ok so IDs are sign up email and sign up password then we have a button at the bottom week Laura yellow we darken the color and we get rid of the box shadow by using Z depth 0 so if we save this now if we click on sign up then we should see but we don't that sign up button and that's because we have not initialized this signup javascript so it doesn't work out of the box we have to initialize all of the different modal's now instead of me doing this now let's set up all of the different models in the HTML then we'll initialize the JavaScript at the end okay so that's the sign at one done let's do the log in modal next so I'm going to copy this and paste it down below and scoot this back okay so now we have this div with an ID of modal log in again with a class of modal so that materialized knows this is a modal so this modal login ID this much is up to this thing right here modal log in the data target so when we click on this materialized knows to open this modal force okay again inside modal content and h4 and a forum this time with an idea of a login form the above one was signup form again we're going to use these ideas in the JavaScript later on to reference these forms we have two input fields one of them is for a login email and the other one for a login password so we have a type of email and password they are both required and by the way these here required and required ok so that is the login modal the next thing we want to do is an Accounts modal so a modal to show the different account information so let's paste that in right there and again we have an ID this time modal account which marries up to this thing up here modal account when we click on this and inside we have the modal content we're centrally aligning all of the text all of these at the minute is just an h4 that says account details and a div with the class of account details so when you use the signs up later on we're gonna dump their account details in here things like that email or some kind of biography alright so that goes there ok then so the next thing we want to do is a modal for creating a new game guide so let's paste this in or right here and scoot that in so this time modal create is the ID again matching up to what we have up here so create guide has a data target equal to modal create alright so it opens up this model inside model content h4 a form with an idea of create form this time we have these two input fields one for the title which has an idea of title and one for the content which has an ID of content this is actually a text area not just an input field then we have a button at the bottom to create this guide alright okay there so finally we want to show the guide at least so all of the actual content on the page down here so later on we'll be getting this from a database but for now we're just hard coding a few little guides but it's gonna look something like this we're gonna have a div first of all with a class of container that keeps everything again inside a central column we're giving it a margin top as well then we have a ul right here it's a collapsible UL so that means that when we click on an li it toggles the content open and closed now the title of the content the thing that we click is this thing collapsible header and the content is this thing collapsible body while also giving me some color classes as well okay so again we have to initialize this functionality for the collapsible inside JavaScript we'll do that shortly but save this for now and see how it looks okay so it looks like this but ultimately when we've hooked up the JavaScript for the toggles right here when we click on one of these they're gonna expand and also when we click on these they're gonna open up those modal's okay and so finally we need to hook up all this JavaScript so down below just before the closing body tag we're gonna paste these things in right here so first of all we have a script reference to the materialized javascript library there we need that for these things to work then we have two of our own scripts right here one called OJS and one called index KS now everything to do with Dom manipulation manipulating the actual content on the page that is going to go inside index J s and anything to do with the authentication flow is going to go inside of KS now we don't have to split these up I've done this so we have a separation of concerns and when we're using authentication we can focus on that and not have to worry about the other JavaScript and likewise for the index J yes all right so we need to create these inside a folder called scripts and then the file name so let us first of all create these folders or rather this folder so scripts then these files so one called off KS and one called index J s so then we need to initialize a couple of things first of all the modal's so that when we click on these different links these models pop up and secondly we need to initialize this thing down here the collapsible list okay so let's save this first of all then go to index J essence this is to do with Dom manipulation and what I'm gonna do is again just copy and paste this from my repo so it says right here setup materialized components which is what we're doing we're saying document add event listener and we're waiting for the Dom content loaded events are when the content has been loaded on to the page then we're going to say var modal's equals document query select all and any film in the class of modal so we're grabbing all of these different things here that have a class and modal all of those right so we're getting that collection of elements then what we're saying is M modal this is the materialized library a method or rather property called modal on that library and we're initializing it by using the init method and passing in those modal's that we created right there okay we're doing the same things for the collapsible we're saying VAR items equals document where we select all anything with a collapsible class which is over here you can see if we go down here this has a collapsible class so this UL we're turning it into a collapsible you well know by saying M collapsible doc unit and then passing in the items okay so let's save this now and preview this in a browser so now if we click on these we don't see them let's inspect and see we have some kind of error so go to the console they'll be done of an error so let's just refresh and see if this works I'm going to close login now we get the modal's ok sign up we get the sign up model create etc account and if we click on these as well they expand as well whoo so there we go that is the template created now I do realize I have sped through this but if I didn't speed through this then I'll be spending maybe three or four videos creating an HTML template and that is not what this course is all about I didn't want to bog you down with all this now if you want to learn more about materialized feel free check out my materialised series right down below also the same goes for any kind of HTML or CSS if you feel you need more practice then go and check out those first of all so I promise you the rest of the course is not going to be copy and paste like we have done right here I'm going to be explaining in detail everything I write this word just to get the template out of the way so now my friends we can focus in the very next lesson on setting up firebase off in this project and going ahead with the authentication process so I'll see you guys in the next video