Build a personal Instagram clone with HTML, CSS and JavaScript - Part 1

hey hello okay welcome and quick one before we start um the course the title says build a personal instagram with html css and javascript now the main reason i created this course is to teach modularization and database management for front-end developers but what's that like without having an actual application so we use this part one to build an instagram clone with html css and release javascript for modularization you see what that is as we progress and then in the parts of this course we'll talk about uploading images to our instagram application handling data the images manipulating the data and all that's in our application so we'll see how to do all that in the part two so enjoy this part with me and again this course is not structured that means that we'll figure things out together a lot so tell me if you like it that way you want something not structured like this one where we'll make mistakes together figure things out together all that but you want something more structured where i already have a predefined styling and following system and i just give you everything and say do this and do that and do this and do that so let me know and see you in the course let's get started so right here in my file manager the first thing i'm going to do is create a folder the new for the name it's instagram since we're building an instagram clone and then i'll open this with vs code you can use any text editor you want to have python here and code so you can choose whatever text editor you want we can go ahead and create the index.html file right in the index.html file i use the html boilerplate by typing doc you can get the ems extension in the extension pane type emmet and you're right and you'll find it somewhere it has to be one of these all right so um index.html file we have this right now and then inside the body tag we want to put the content right let's change the title festival to my personal instagram remember this is your personal instagram you'll be the only one who'll be able to make posts and view them all right let's see what instagram looks like and this is what instagram on the web looks like so we want to use someone's profile for um our application who's this and we need a simple profile also let me try let's try the first one and see this is kevin hart for real okay all right we want to do something like this release this this is what our application should look like now let's go back to our index.html file or we're going to start by creating the navigation and we'll leave the nav tag for that now right online then let's um okay let's see what the nav contained you know what i'm going to see how i can separate this and this here oh right i think that works inside the nav file the first thing we have is the logo rights that's a link so we use the anchor tag for that a href equal to let's use the bound sign and then close the anchor tag so inside here we want the instagram logo we'll get it in the bits then the next thing we have is the such bar right and that's we'll use an input tag for that so that's input type text right and we'll give it a placeholder search okay let's also add the class for this right now so let's just add a class and search right there on line eight the next thing we want to do is have uh the one two three four one two three four these four icons we want to group them together so we'll use a span tag for that and inside the span tag we have so the icons are links so we want to have um four anchor tags so let's have a the anchor tank so i'm using the emmett abbreviation remember so a a link and yeah we have an anchor tag we'll use ash right now for them that's the hash the pound symbol and let's duplicate this that's two three four all right now we'll we'll have uh we'll put our icons inside here in a bit but let's go back to let's see what this looks like i'm also using the live server extension live server and this is it so when you have live server installed you can just run your um html file by right clicking on it and then open with live server so whatever change you make is going to reflect um that you're going to reload the live server and then we can access it by coming to uh address bar and then typing in localhost slash index.html so localhost 500 like it says here in the code editor and then enter all right so we have that let's let's look in the chat right now so we have the logo right that's this place letter for logo line nine and then line 10 the search bar and then line 11 to line 16 the 123 for the four icons we'll be leaving now these um last parts that's the profile image for the person viewings because that's not necessary since this is all our application is going to contain now let's start by getting this logo so right click and then copy image address now we have our image address back to our code editor we have a href there and then on line 10 let's add an imd tag so img src this is the link we just copied and then alt should be logo logo so let's see what that looks like all right so that's uh instagram logo nice the next thing we're gonna do is add the okay so we have our instagram logo and then we have the search the next thing we're gonna do is get these different icons so one two three four icons we'll be using font awesome for that fonts also successful font awesome icons on google let's search for the first icon um okay instagram this is a home so let's search for the home icon h-o-m-e home all right so this is the home icon if you notice this is the only three oh my god so i prefer this one but let's go with the free one so click on this and then the next thing we're gonna do is scroll to start using this icon so start using this icon and then we need to copy this we copy this and then back to our code editor let's paste it inside the anchor tag on line 14. now when we come over to our web page we can't see it yet and that's because um we've not set up font awesome for our project so look at this don't have a project set up get started here so click on get started here and you scroll down enter email address to create your first kit um so you enter email address right here everything is a download official gmail.com that's my email address and then send kid code okay we should receive a confirmation in the mail click to confirm your email address then set password and continue now we have these um no thanks let's keep this step for now and look at this what we're gonna do is copy this link and then paste it in our code editor so in our index.html file right before the body tag is closed let's paste this all right we have this script let's go back to our web page all right so that's it the next thing we're going to do is search for this icon this is the this looks this is the inbox right this is for inbox it looks like a kite so back to phoneawesome.com icons let's search for a kite hopefully we'll get a look there ah no this is not close you know what let's just use let's use a chat icon for that since it represent messages inbox so one of them should work this one so this should do this all right now we're going to click on the start using this icon button then copy this we'll go back to our code editor and paste it on line 15. then the next icon we need is the so this is this is for the instagram explorer page and this looks like a compass let's um let's go back and search for compass okay this is it so click on start using icon copy this and paste it on line 16. finally this is the hearts icon okay that should be this one so click on start using this icon copy this and paste it on line 17 in our code editor this is what it looks like so far okay this is our aim remember so we're gonna close this all right let's start our navigation with css we'll come over to our code editor and then create a new file we'll name this index dot css then back to the index.html file in the head tag right here on line six let's um let's import the css so this is index dot css now we have a css file let's start with the styling in the index.css file we want to target the nav tag right now for that and then the caller base inside the nav tag if you notice this this navigation bar has a white background but then the um the background for the body is not all that white let's get the color picker for that let's know the exact colors so i'll download them a chrome extension color picker for that to know the exact colors that instagram used for this website so search for color picker chrome add chrome add extension all right now i can click on the color picker let's select this so you can see this is hash ffff that's for white then when we come back to the main body it's f a f a f a okay so let's uh let's tell our body before the nerve let's style our body so we can see the difference the body and then we'll give it a background um that's hash f a f a f a now we'll give a navigation a background color of fff so just fff should do for that all right now the next thing we're gonna do is add um okay so let's make this clearer just so we so we can start the width and the height for the navigation bar so this is red now we want to remove this white space at the top and the one at the left to do that inside the body tag we use the margin property and then zero also so we can take this back to fff or we also want to give it a height of let's let's use 3.3 em to center the um contents we'll use line heights for that line heights and where's the line hard because it's just one row of content that's inside the navigation bar so let's set line height to three points three am and then we're gonna give it a padding zero for top and four right so top and bottom zero we're gonna just target the left and the right so left and the right that's 13.5 em okay so this is what we want so index.css we have a navigation that looks like this right now let's add border bottom so look at this there's a line at the border so that's four border bottom border bottom should be let's try 0.1 bx solid and black okay so that's vc but this is this is a lot lighter let's confirm what color this is this is db db db so instead of black let's write dbtp db alright it's beginning to look like instagram in a way okay let's target the instagram logo look at where we have a logo on line 11 let's give it a class of logos so class and logo now we can style it back to the index.css file we're going to target the logo class and then inside this um if you look at this there's an underline right here that's because it's a link it's inside an anchor tag right where my pointer is on that's a blue on the line so let's remove that using the text decoration and then none all right we're going to target the image itself so this is the logo and then we have the img tag inside the logo that contains the image so we'll do that using the logo and then img and inside it's we want to take it to the middle so we'll do that with the vertical align property and middle awesome the next thing we're gonna start the search input so that's um remember we'll give it a class search so we have dot search next on line 22 dot search and inside the um search class we start by giving it okay so let's look at what instagram has but this is their search background right here and if you notice it's not white it's the same color with the body so that's um remember we'll f-a-f-a-f-a over to this place and background f a f a f e okay so that's for the search and change is the background color all right then the next thing we want to do is separate it from the instagram logo just like it is here let's use margin left for that margin left and we'll try 15 am let's let's add more let's make this 19 yeah give it a height we'll go with one em okay one point eight that should be okay end with a width of 15.5 16. i think that's okay 16 16. right i think that's okay unless you want us to try let's try 17 17 em is this oh that's the width we're targeting okay yeah i think the width is okay at 15.5 and then we should try two for height so 2 em for height that's too much 1.9 yeah that's okay all right let's remove the border this thick border we can see here we're just gonna change it uh we'll have us and then we'll change the color also so border 1px solid and then for the color the color looks like it's the same with no it's not the same with the background let's confirm what color that is so look at this db dbtb background color should be this nice it looks looks better than before let's take our search placeholder to the center so to do that we'll target the placeholder for the input tag so that's dot search and then placeholder text align center and color let's see what the color should be this is the color okay i'm not sure this scorpio in vs it's because would be as good i'm not sure it's an extension but just in case if you don't have it then search for color pica and vs code um css color picker then you should find something like that but i think that comes with vs code or whatever whatever editor you have try to get a color picker and that'll make things a lot easier i think that's it's right i think we're close or not let's see i think that's uh that's close to being so let's try this search search it's darker let's take it down search search okay one more thing we're gonna change this to the s capsule letter all right looks um looks similar in a way the next thing we're going to do is style the knob links look at the nav links right here so it's um spun let's give it a class of knob links on line 14 so nav dash links back to our index or css file we can target the class analytics we'll separate it from the search bar so we'll do that with margin left and eight am no nine no that's just eight that should work let's put the icons from each other we'll do that by targeting the anchor tag so look at this we have the anchor tag inside the novelty class so we do that by targeting the anchor tags in the noveling class so direct anchor tags and we want to give them a magic margin left of 1 em all right that's not looking bad finally we will target the icons the icons are inside the eye tag so let's target the itac we'll do that with dot nav links and then i for the i tag look at what we have here as a smaller let's increase the size we'll use the transform property for that and then skill one point five uh 1.6 we'll change the color also that's 4f4f4f so right here color so let's take it down a bit now we have that we want to also align it to the middle let's just be sure it's in the middle so we use the vertical align as we do yeah it means the first alignment we did was not necessary the one we did earlier right now we have the instagram search and the icons looking a lot better than before let's add um margin to these icons so that's a so let's try 1.5 oh right all right 1.5 here and this is this is looking okay say we're building something close to instagram as such box a search box i want to increase the heights for our search box so for search let's increase the height to let's let's give it to em i think the 3m is okay uh we'll work on the body of the page next for the body let's go back to our index.html file and right under the nav tag online 21 will create a new date so they even give it a class of container remember this is the extension at work right so we have to deal with the class of container and inside the container div let's have a new section let's see what we have here this is kevin hart this is a section and this is another section so this is the bio right uh about gavin hearts number followers and all that and this is the this is the gallery back to our index.html file let's have this section dot bio and we have a section with class bio and the credit under section section dot gallery okay so we have the bio and we have the gallery and let's add contents to our bio so look at this kevin hart for real what we need right now for our application is um we don't need the bio because it's my personal instagram i'm not showing it to any other person we don't have a number of followers or following it's a personal instagram okay so we just need this display pic and um name right i think we should go with name and then the follow button which is not necessary so the name of the display pick the username and the follow button right inside the bios section or we're going to create another div and then we'll give it a class of profile photo so deep dot profile photo and that's a d with classic profile photo and inside it we want the image let's pick kevin hart's image if i click on this nothing is happening but then there's a way we can get it and when you right click on the page and inspect oh we we should be able to select this element and look at the link to the to the file so let's copy this and we can close now and open the url all right so now we have it let's go back to our html file and inside profile photo we want to um create an image so image src is the link we just copied that's the long link so let's give it an alt text first of all we'll name this profile photo and let's paste all right now we have the profile photo what do we need what what do we need next we need the username this is uh we're gonna use css quiz for this now these are two columns so the first column is the profile photo and then the next column is the profile info right so what we have here is we have the first div now so this is the this is this bio section is going to be um it's going to be a css grid we'll give it a css grid display now the first div this is the first column for profile photo let's have another div for profile info and right inside the default profile info i will have a p tag for username so p dot username and what's the username kevin hart for you copy that and paste it inside this p tag the next thing we're gonna do is add the follow button so button and then follow all right this looks interesting let's dial it next index.css file let's add padding to it dot container and then padding we want to target just the left and the right zero for top and bottom and then left and right should be about fifteen percent that should do let's see what instagram has okay so this yeah this looks good first impression looks okay right now that's for the containers we'll ship the image later on to where this is the next thing we're gonna do is tell the bio dot bio right here online 53 and then uh let's give it a display of grid okay now it's display grid we can go ahead and have a grid templates column so this is the grid template column property and we want to use a grid type of column parameter to separate into two columns ever is a fractional unit so one file for the picture the profile pic and then 2fl for the profile info nice let's give this a background let's give about a background color brown just so we see what we're doing we're going to add height to the bio section but for that let's try height of 10 year let's look at instagram there's a lot bigger than us so fit in and see 13 and instagram is okay i think that's okay we're gonna add padding to move this a bit from the top we have the height and then let's let's add a padding so add a padding of for the top we'll try 3m that's for the top we'll try 3m okay we need for the top right that's three a.m and then we for the right we don't need anything for right so let's have zero and then the bottom so remember stop right bottom and left the top 3m for the right zero for the bottom zero and then for the left three em that's to move the image and then let's see what we have here um okay we still need to move it a bit further so 5 am all right 5 am 5 am should work we'll give this a border bottom look at this line right here so let's give it a butter bottom and when we do that we can go ahead and remove the background so we have bought a bottom online 59 right and then 0.5 bx solid and what color is that so let's see that color that's back to the nav and look at it db db db we use 0.1 there so that might be it this is it and let's go ahead and remove the background color this looks okay all right what does your point to px look like okay let's work on the image remember our image is another profile photo d so this is the div um for image online 23. let's target that d what we're going to do is tower this div and then make our image conform to the styling of the deep so we'll make the diva circle and give it the width and height and make our image fit to that d let's start with this um line six 61. profile photo photo all right now the first thing we're going to do is remove this image just so we can see what we're doing right and then let's give the diva background color of brown okay and then we'll give it a width of then em and height of then em next let's give it a border reduce of 50 percent that'll make it a circle also so this is what we want this is what this is the shape we want a image to fit in let's go back to the index.html file and uncomment the image now we have an image right there let's target it dot profile photo and inside this class let's start with giving that image width of hundred percent the next thing we'll do is give it a height of hundred percent it started fitting in so high it's of hundred percent nice then we're gonna do this object fit cover okay and then finally border radius 50 percent right now this cabin house images is the same size that we want our profile folder to be but then if an image of a larger size comes in and we'll see that in the bit then we need the object fit property to make it fit whenever that like crop it and then make it fit into this small circle so if a big image comes in it's going to crop it and make it fit into this small circle that's why we need object fit cover now let's see what it looks like on instagram so here's what instagram looks like cool we don't need this extra colored circle and that that represents stories we wouldn't be needing stories in our application we have this username and the follow button so let's target the username and the follow button okay remember we have dot profile info and then we have p um the paragraph with the class of username so and we also have button right inside the profile info so let's start by targeting the username profile info and then dot username all right so this should go with a font size of 1.5 em okay let's see travel.7 1.7 am okay and then let's um give it a color so for the color let's see what instagram has i think the same we use for the border but let's be sure so um as you can see i'm using this guide by the right there when we're trying to target something small now we're gonna give it that color and that's hash five four five four five four all right that's it then let's tell the button dot profile photo and then button and we'll okay so this is the follow button it's blue right that's the background for it let's confirm what our color is so take the color from here that's zero zero nine five f six so background color okay this is not working so what's the problem let's see index.html we're targeting profile info and what we're having is profile photos change that file info we could the next thing we're going to do is change the text color to white so color fff that's white all right now let's increase the font size look at what we have on instagram so let's increase the font size make it fit what's the font size uh 1.1 em you don't really know the exact one to choose right so there's always room for adjustments you see what 1.1 am looks like and if that's okay with you you go on with that if not you adjust it based on the result you got so try 1.2 1.5 and all that so this is the font size we'll be using so let's increase the width of the button to try 5 em for this i think that is a little bit bigger so let's try 6 em let's see okay what's next we'll um let's agree the height of the bot so and we'll do that by two here okay now we're going to remove the default boiler that comes with the button pack i will do that with the onset proper so that's it that's looking better what are we going to do next look at look at the difference now when this is oval on the changes to the pointer so i want to do that for this button also and for that we'll come back to line 87 and then crossover pointer awesome so this is beginning to look interesting we have the navigation bar and then we have the profile um in for the biosection or what's next next we're gonna work on the gallery let's see what that looks like and this is instagram so we scroll down we can see the gallery starts off with something that looks like a navigation um this is a navigation for the guy that we can click to repost igtv tag so let's add this extra part to our html so we'll call this gallery nav and then leave this as a gallery back to our index.html file um we can see right on like that one we have a gallery section right what we want to do is create the gallery now before the gallery section all right so that's for another gallery navigation now i will style that so let's go back to the index.css file let's give it a background color so that we can see what we're doing we want to add height to the gallery so get a background color of brown i'm using brown a lot now this is it i normally would you use red but red does not look good but then it's it brings it out so it's really visible this is instagram and this is our application so let's add the height we wanted to fit into this place where the mouse is hovering on let's add height of 3 am we make that 3.5 here so this is there this is ours i think i think that's okay so now we can remove the background color so this will be um we'll notice this when we add the info for the gallery and now look at the look at instagram right we have different pictures one two three three three so we'll be using the grid display again and we want to share these three pictures into three equal parts so one fr one f r one fl so even if we add six pictures they will broken down into three um you know three um columns yeah three columns and then they'll share them into rows let's start by working on the gallery section in the index.html file now this is the index.html file and this is the gallery section the pictures if you notice look at them on instagram they they are clickable so you click on a picture and that gives you shows you more detail and we'll add these parts later on so they're clickable and we can use divs for this so we can use um a div right we have a div and then we add something inside it but the problem with that is i will then need to start setting dab index so that we can select um a div with the tab key and look at that so we'll just use a link at once let's just use a link here so that oh we wouldn't need to do that anymore so here's a link now a link and right inside the anchor tag let's let's change this to hash so if we click on this link right now it's going to reload but we'll we use javascript to stop the prevent from reloading um after now so this is a href equal to hash and then what we're going to do next is give you the class of item now inside this link will have an image so it's a link but then all we can see is an image we click on the image and then the other section pops up by the information for the image maybe the text that comes with it and all that so we have this and then inside this link what we want to have is an ing tag img src is linked to the image and alts this will be the um alternate text for the image all right so we want these we want um let me see this is one let's test this with one two three four five six one six of these so there's an applicator so there's one and then you duplicate it and that's one two three four five six all right let's go get images in the internet let's get images from back sales excel dot com so is that the test application remember what we plan to do is upload these images ourselves later on in the course right you want to give the application the functionality form or prevent the images will be able to choose whatever image you want from the application so we'll remove what we're doing in the html later on right the the hard coded image urls and um but we need that's necessary for right now so that with what our application looks like now we need images of i don't know what do people post on instagram let's see let's start with this one so click on right click and then copy link address and then i'll add that to the first img tag so inside the src we have this and then the next one what are we using for the next one let's use this copy link address that's for the next one and let's get another picture this right copy link address and we'll paste it there online 41 we need three more so let's use this and we'll base this on line 44 um i think we should go with these also scopy image address what have i been doing i've been doing copy link address i think it's the same thing though is it no it's not it's not the same thing what i want to do is copy image address not link address that's because copy image addresses the difference i we have the where the cursor is on line 47 we have this the jpeg and then these are the settings for the image so while it's the copy image address it gives us the image so when we click on the image you know it takes us to that image but with this where is the copy link address takes us to the page for the image which is not what we want we don't want this we want the image instead so let's edit this so copy image address instead and paste it here right so if we paste this and go to this url we just get the image straight away and that's what we want in our browser right so let's let's do the same thing for this one i hope i remember what each of this was so oh we cut this out and then yeah it's this one copy image address and we'll paste it here and for this one let's copy that now let's cut that out and copy image address and we'll paste it there and finally this one got that out then see if we can find it i think it's this one copy image address and paste it there online five now we have one more to go one more image to go have we used this one i doubt so let's take this copy image address and we'll paste it here online 50 nice let's see what this looks like in our browser so this is our instagram application we scroll down and we see the different images so six of them now wanna group them right um into columns and rows and columns so three columns per row and let's go to the index.css file before that remember this is in the gallery this is in the gallery section and each link has a class of item so let's start by styling the gallery section here online 94 target gallery and then we'll give it a display of greed okay the next thing we're going to do is grades templates columns remember and then 1fl1fro1fo okay we're getting somewhere so this is it so far now let's um let's see let's start the item just so we know it let's start the item first then we'll come back to gallery so gallery no dot item just i get that straight away dot item and um let's let's see let's give it what would have done install this before adding the image just so we're sure what we're doing let's give it a height of um 15 am and we want to give it the same width width of 15 am okay this is what it looks like so far now we're gonna style the image so we'll do that with this item and img right this is supposed to be dot item so dot item and img you remember what we did before with the profile picture we'll give it a height of hundred percent and a width of hundred percent so a width of hundred percent okay so this is what we have so far oh i think we want to increase the width of the item 17 17.5 i will do the same thing for the height 17.5 here all right now we've done that we need to add um rogue app so rogue app look at this look how we have on instagram each image has a there's a gap between this row and the next row so that's what i want in our own application for that we'll come back to the gallery styling and then others that should be row gap yeah so what we want to do is um let's try 2 em for rogue up how's that how does this look what of the the column gap so let's give it the same with um let's have the same rule broke up as a column gap so if this is 2 en then this should be 2 em so column got to here let's compare this with instagram okay now as is bigger we'll change this to 1.5 em and 1.5 yen i think we need i think the the row gap is smaller and the and the um column gap is bigger let's see what are we going to do now let's have a look up of 1.7 em 1.7 em and a column gap of 1.3 em 1.2 1.1 let's compare this with instagram no i think we should still use it let's make these let's make this one yeah let's try tarokino let's try 0.7 here 0.7 am i feel like nothing is changing whatever 0.5 yet yeah it doesn't look like anything is changing big game okay so we have this right now and i think this is okay right yeah this is okay leave it at least 0.5 am i don't think this is making any difference let's remove let's move that yeah wait hold on okay yeah let's remove that now the next thing we're going to do see the images they like skills because they are bigger than the um size for the divs we put them in so let's do that using the object fit property so object fits and then we discover okay so this is better it just fits in and crops out the rest nice now let's add let's add um let's add a padding right we want to have space at the bottom so a pattern between the last image is the last rub images and then the bottom of the page so we'll go back to we'll go back to the gallery so that should be matching bottom we'll go back to the gallery and then margin bottom of um let's try to earn i think 2em is okay all right so this is it this is a 3ms okay okay now what are we going to do next this is looking really good so far let me increase this this is what we have so far and we've we've done we've done good stuff right our app was looking really bad before now look at this look at instagram when an image is over done we can see this um this black like this black shade uh yeah but then the problem with that is the problem is that this has likes of 168 000 likes and season 15 comments but then this is a personal instagram so we won't be having 160 likes we'll be having no like and no comments yeah well let's move if we decide to add comments ourselves later we can add that functionality but right now what i want to do is let's just give it um let's just make this like reduce the opacity on hover okay so we reduce the opacity number so we get this effect this hover effect go back to my index.css file and um let's target item right so let's do this dot item img over and then want to reduce the opacity to 0.7 um yeah 0.7 okay uh look at this now it's it's white we want it to be black so to make it black we'll go back to the item like right here online 103 and then um let's give it a black background so background zero zero zero that's for black okay let's try that again okay look at that this looks this looks good right yeah all right now we're done with kevin hart that is a different image as profile photo so i've taken one from excels and i'm gonna paste it here oh well yeah all right we'll be using that we'll also change the the username what we want for username right now let's see let's see let's see ah this is super let's use it let's use jane though that's too common right let's let's make up the name jane um oh this is johnny remember we this is this should be name instead let's have others name so instead of using let's change this to name and index.css you want a style name instead of username where's username okay so let's change this to name i think that's better alright so we have jane it's a funny name let's walk with this we've done a great job so far and let's see how to add awesome extra functionality with javascript hey all right now let's talk about modularization you're going to need this a lot when you start working with front-end frameworks you want to um break down your application into different files and so here's what i mean now you have we have a html file all i'm going to do is break this down right we as you can see we have the navbar first of all this for the navbar so line nine to line 20. so i want to break this down we want to separate it into a different file a module and won't do the same thing for bio so when i have the navbar module the bio module separate files and um what else the gallery module also will have these are separate modules separate files so we'll be using javascript for this now let's come over to the um file manager the file explorer and the first thing we're going to do is create a folder let's name it um let's name a folder modules okay so inside here we'll have m-o-d-u-l-e-s awesome now we have a folder as modules the next we're going to do is start by creating the navbar module so we'll do that by adding a new file and then we'll name it nav dots js now i'm using the capital letter to start the name of this module just so we differentiate it from other files we know that this is a module right so that's not the js for the module and let's copy what we have in the um this nappa right here so let nine to light 20 and then the control x so that's another and we want to paste it here but we don't want to do it like this remember this is a javascript file so what i want to do first of all is this consts we'll create a new variable and then this will be equal to the html text we just copied we can we will have to make this um a string and so that when we're passing it back to our index.html file um we'll use dot in html so this is what i mean we have a string here and then this is the file now there's a problem though when it's when it's with the double quotes or single quotes um javascript expects the text to be in one line so one line works one line works we can do we can create a div and then hey there and close the div and that works but then when we take it to the next line we have a problem right now the javascript expects the string the double quote of the single code to n um in one line what we're going to do is use the backtick to represent our string so inside is backtick then we can um use this to write multi-line strings now let's indent and we'll paste the html code we just copied all right so that's it we have the navbar and we'll also indent this navbar so inside the nav i have this href logo and all that we want to do the same thing for the um let's go back to the index.html file we want to do the same thing for the bio and then the gallery so right in the module let's create the bio that's bio.gs the same thing const bio and then this is equal to our html code or not copy that let's go back there and copy the bio all right line 10 to line 18 okay so this is for our bio we'll indent and we'll do that again so that's the downside um we use a string we try to write html we don't have the syntax highlighting all the um suggestions the intellisense to suggest um pad names we can use emit here and yeah so we also want the okay now there's a problem with these though remember that we want our application to be dynamic in the end and that means that jane bottas should not be static it can be anything that we want to put later on like the user should have the um option of choosing whatever name they want same thing with the profile photo and that's another advantage of using this model another reason to using this module and instead of making this static we can decide to [Music] make bio a function and then have this gene bottas and the image we can have whatever info would tell you to put helicopter can decide to put description about me um number four there was another later on so that's not going to be static right one that's a bit dynamic so we can make this a function and then have all that as a parameter this is a function right you know by the our functions this same thing as same function function bio and this and right inside here what up with the parameters or will basically our functions so we have cons bio equal to this and inside here now i will be able to put whatever i want to put like username info and all that and all that so we can do that later on right now let's make this possible by um choosing by other function this by the function let's do the same thing for nav so let's make another function also so this is now now when we're calling it we'll have to call it as a function and then it'll return this html text so we have for bio and we have for nav the next thing we want is for gallery so this is the gallery and the gallery has both gallery now and the gallery section so from that dave to like 30 so like 10 to like 30 and yeah our application is it's looking empty right now we don't need this for now okay now back to modules we'll create a new file and we'll name that gallery okay calorie.js all right now inside the gallery cons gallery equal to so this is a function and i want to just return directly so a function returns this right now we can decide to do that later on um so we can do this now a function returns we can decide to maybe create a variable here um stuff equal to something right create a variable do whatever i want to do and then finally we will do return right and then we'll return the tablet with literally the html code right but we're not doing that yet so let's just return it directly okay all indents and yeah we have that now what we're going to do next we have our modules bio.js gallery.js nav.js and application is empty right now so let's create a main javascript file to create a major file let's name this app.js so this is the javascript file we'll be calling the index.html so let's just do that scripts src so this this is javascript right um how javascript called in html yeah that's scripts src then javascript file so dot slash app.js so this is a javascript file now inside the javascript file we want to bring these modules so this is different file bio gallery now want to bring them over to the app.js other files so that's called importing right we want to import the content of bio click on end of gallery and the content of nav so something like this what i do imports value from dot slash we're now navigating to the module dot slash module slash bio dot js rights so we do this import bio but we to be able to import bio we need to export bio so we can't import by right now bio bio does not that like this has nothing because we've not exported we go back to our bio file we just created um a function and that's all so we need to come over to line 12 and export bio so we'll do this export defaults bio now we've exported bioso back to our ar.js file when we hover vampire look at this has changed now we can see the function the bio function i will do the same thing for gallery imports of so let's go over to the gallery.json export gallery export defaults so there's a default export in this file this gallery so when we import we're in this gallery function we created here all right so this is for gallery and then let's do the same thing for nav export defaults and nav awesome now back to the app.js file we can import gallery from dot slash modules slash gallery.js and then we'll import what are we importing next nav from dot slash module slash nav.js if you notice we're not ending this with semicolons and that's because javascript would know that this is the end of the statement so we don't need semicolons in javascript and um yeah i just choose not to use semicolons this time around but it's totally fine if you use semicolons to end your statements now we have import bio import gallery and we import that we have these three modules the next thing we're going to do is create um we'll create our app function that's the main function so name this app and then this is equal to this is a function remember and now inside this app function we're going to return value gallery enough the same way so if you notice the way i imported um these guys i i imported them according to um i imported them in alphabetical order that's b first then g and then n but now i want to return so i want to do something like this what are we done remember the way we arranged it in our html5 so one we don't know first of all so this is enough function and then what do we have after that the bio function and then gallery so this is what we want the same way it was arranged so this is going to appear like this um so so when we when when we do this next what i want to do next is document.getelement by id and then something inside the html file writes dot inner html so we get a memphis id of a div inside the html5 but in html is equal to this app function so this app is going to return these strings nav bio and gallery and then documentary element by id a div inside it so initially i wanted this app so when a javascript is called it then sends over what is inside nav bio and gallery right as one so inside this application inside this app function right then sends that over to whatever div we decided to put here online 13 so let's go to line 13 um let's go back to index.html file and inside the body we'll create a div and give it a class of roots so this is where we want to put a javascript um yeah a javascript module so the html code right want to put in a side root so back to the app.js file we'll do the documentation element by id root dot inner html equals app now there's a problem do it but the problem is this we have the nav we have bio we have gallery remember that this is th this is a stringly child so this is going to return a string this is not called in the function so we look all functions um javascript functions or variables in string glitch house we need to um wrap it inside this dollar sign and the calibre so now it knows that is a function you can see the difference in syntax highlighting so the dollar sign and the calibris for gallery will do the same thing the dollar sign and the curly brace now we have these okay so let's see if this is going to work back to our index.html file remember we're running with live saga write the extension from emmett's okay this is returning a blank page let's check what the problem is console.log cannot use import statement outside a module all right so our html5 is complaining that um it can't use an import statement outside the module so this apple just it doesn't know that app.js is a module and we can see um the import statement you can see import statement the app.js file which has a gallery bio nav but it doesn't know that the other changes module so what i want to do is import app.js as a module so right here on like that i want to do this script type equal to module okay now let's go back and then we load so this is the next one cannot set property in our html of null now we go back to uh after js file and look at this document i get element by id root but in our html records app so this is a problem let's go back to the index.html file and if you notice this is a class and not id so let's change this to id and we save this and we look at look at that so we have this right now but then look it's it's looking a lot different for what it was before and that's because what we had before was wrapped inside um the body section right the bio and the um and the guy that was wrapped inside the container class remember where we started the container class all right uh let's see right on line 49 we start the contract let's give it a pattern of zero and 15 so to fix that let's come over to our app.js file and then um what are we what we're going to do right now in the app just online eight will have remember this is this is html nav it's going to return an html codes string bio same thing gallery same thing so inside here we can also do this div class equals container we'll close that and then let's close our div class so this is a div and we'll indent bio and gallery okay let's save and see awesome this looks really amazing so that's it for modularizing your codes now we'll be using these parameters and the arguments later on look at a possible problem you might encounter when doing this so if you make a mistake and instead of bio.js right module module.js or gallery.js or navigation module bio there's a file name without adding the js extension we'll go back to our file this is a blank page if we inspect there's this l showing up fail to load resource the server responder with the status of 404 not found that's because it can't find nav right it expects it to be nav.js bio.js calorie.js so not the gs bio.js and gallery.js also now we have a files in module so with this the the good thing about this is that nav is now reusable we can decide to call it somewhere else let's say we create a different page all together all right um we're creating a new page for something else maybe another part of instagram we don't have to start writing you know what would have done before right we'll have a new page.html let's say uh we created um an explore page right we have the explorer page right now so let's say we create the explore page we name this we will name it explore.html and then we start all over we start writing the nav we just copy whatever it was in english it's index.html file and paste it back here but with the javascript modules we don't need to do that anymore all we need to do is to import the nav right and then just call it the same way we called it here on line seven and that's that all right now what we're going to do next is include a button to our application we're using this button to add images so let's go over to font awesome and search for and add icon oh all right so we have this plus square then start using this icon so copy that and let's look at here we have um our gallery.js open so i want to put it i want to put it right before the gallery and let's see what this looks like okay so we have a plus button here now i want to take it down here so watch the mouse we'll take it down here right um like the bottom right of the page we'll be using css for that now let's go to our index.css file and we'll scroll down let's see so just before the gallery nav on line 8 9 90 rather we want to target this i class now a way we could use the ms extension here um so that it recognizes that this is html code is by changing this we come over to the bottom right of this um code editor we see javascript select language mode and then we type in html so when we do this we can then edit as html but then it will recognize javascript anymore now right here let's let's add a class to this icon and let's call that class add photo so we have add photo fes f a plus square so we'll be targeting this add photo class so back to our index.css file online 90 we can now do dots add photo and now let's start by increasing the size we'll use a transform for that and then skill two let's try three all right now let's move it to the bottom right we'll change this position to absolute and then bottom let's start with zero and write zero okay so it's way over here we're going to move this so let's try 5 em for bottom and 5 em for right yeah that's beginning to look better let's move the bottom to the left a little bit we'll make this 7 a.m also now what we're gonna do next we don't want this to be absolute positioning because it's close to the screen we want it to remain at this point even while scrolling so we'll just change this position into fixed and let's let's try again okay so we have our add button right now now what we're going to do next we want to click on this button and then see an option for selecting images from our computer like a file upload you know so based on the inputs type file uploads for that so input type file go back to the gallery.js and what i want to do is have our input type right here let's do this input file and then let's give it id add photo input since it's id i like um using the camera case for ids so add photo input now when we go back to our browser we can see this choose file but we want to be able to select this button and have this open for us now to do that let's first of all give it um a name photo this is not necessary for what we're about to do and then what we're going to do now we will wrap this icon inside a label div so that label will be for this particular input so label 4 and then the id of this input which is add photo input so copy this and then we'll paste it here on line 3. now we have a libra let's try again when we click on this button you notice it opens up this file picker now the next thing we're going to do is hide this file picker so let's target the add photo input id in index.css file and then display none okay finally let's change the cursor for add photo button to pointer just so i just know it's clickable we can click on it and select whatever file whatever image we want so that's it for adding our image upload button now what we're going to do next is see how we can actually upload images into our application these are personal instagram so we'll be using index db for that we'll upload the images to index db locally and then access them from intex cp so that whenever we load our application we will see whatever image we've added previously and then we can decide to add more information to those images edit the information on those images and all that we'll see how to do all these in the next lesson

Channel: Ebenezer Don

Views: 3,943

Keywords: instagram clone, javascript, indexeddb, css, instagram clone app, instagram clone html css

Id: jTrNYxDuSWc

Length: 79min 7sec (4747 seconds)

Published: Mon Aug 17 2020