 what's up team welcome back it is your biggest fan the real castadero and in this session we're going to be building a full page image slider using HTML CSS and JavaScript so let's get to it team now dig if you want to follow along what you got to do is you got to go out to the internet and grab yourself a copy of visual studio code grab yourself a copy of git and grab yourself a copy of PowerShell core that is everything everything that you need in order to build modern websites and web applications team so let's get to it now you can also click the links in the notes below and that'll get you everything you need as well so the first thing we're going to do is we're going to open up PowerShell and I'm going to zoom in so you guys could see and we're going to make this window a little bit smaller and what we're going to do is we're going to go into the construct CD slash construct and that's where we're going to build our project so the construct dir and we're going to go into the code folder so CD code dir and this is where we're going to create everything that we need in order to do the work that we need to do team so we're going to make some directories so we're going to do MK dir and we're going to make a CSS directory and we're going to make a java script directory and then we're going to make some files we're going to do a new item index dot ht i in dex dot html we're going to make a main dot CSS a main dot JS and a that's it that's all we need alright team so what we'll do is we'll go back and get rid of this comma we'll hit enter and now we've made all our files so we'll do a dir we have everything we need if we do a start space dot this will open up a regular explorer and we can put our main dot JS in the JS folder and our main dot CS in our CSS folder and we're good to go we'll close that and we'll just type code dot and this will open up the visual studio code so we will double click that and in order to follow along you're going to need live server so you click these boxes over here you just type in a live server and that is going to bring up live server right there and you can just install that and also I have something else that you might see that you might want and that is called indent rainbow I think it's an indent rainbow and this will give you colors when you indent your code team so what we're going to do now is we're going to control W to close this out we're going to go back up to our files here at the top going to get rid of my face because down here is where the go live button pops up for live server and so we'll click that go live button and it's going to open up a web browser and it's going to be completely blank because we don't have anything on our web page we'll take this move that over to one side grab our code window here and we'll just resize that a little bit then we'll do a control W man we closed visual studio code so we'll bring that back and we'll just put that over there again we'll minimize this and we'll stretch this guy out right there and we'll do we'll grab this index.html we'll do a control B to get rid of that sidebar and we're going to type an exclamation point and hit tab and down here where it says document we're going to put image we're going to put JavaScript image slider image slider now when we save this just watch the top of our page right up here in the tab where it says 127 when we save this control save that is going to change or it should have changed but it didn't refresh out we're not live so we'll control W we'll hit go live again that will open up that browser and now it says JavaScript image slider up there at the top so now we're going to go down here and we're going to start writing our code so the first thing we're going to do is we're going to make a wrapper for our entire page and we're going to give that an ID of wrap and then we're going to make a we're going to make a couple arrows we'll make a left arrow so we go arrow left and then we'll hit tab and we'll make we'll make our other arrow later on so we'll go arrow left there we go and actually we don't need to be inside of there so we'll go down here and we're going to make a slider and this is going to contain all of our slides so inside of our slider is where we're going to put our slides and here we're going to make a class of slide and then we'll make a class of slide one then we hit tab and now we've got slide and slide one and inside of there we're going to make a class of slide content because this is where the content of our slide is going to be so we're going to go slide dash content and now we've got our slide content and inside of there we're put a span and inside of that span we're just going to put image one and we'll save and now we have image one up here what we're going to do is we're going to duplicate all of these right here so we've got our slider our slide content our slider get our slider a slide and then our slide content and then our span so we're going to copy this slide and so if we just select all that and hold down alt and shift and hit down like three times and hit save now we get a bunch of those so we'll change these here to two we'll actually we'll number them in order one two three four and five and this is just so we can grab those independently later on and then here we're going to have one and we'll just go down here and we'll have two and then we'll go down and we'll have three and four and five we'll save and now all of those have changed team and last but not least we need our button so if we go back up here we have our slide we've got our arrow button up there at the top and now we need one here down at the bottom so we're going to grab this we're going to copy that control c and then right underneath this purple line we're going to put our other button so we'll save we can't see anything there but if we put like a left button and then down here we'll put a right button save and so now you see left button and you see right button team now before we get out of here we'll go down right above the body and we're going to put script and in here we're going to put source and that source is going to be a dash css i mean not css but js and then our main.js and we'll save that and then down here we'll put a comment by hitting control and the forward slash key and we'll just say script so we don't have to do this this is just to easily know where the script files are all right so we'll save this and then we will go into our main.css so we'll go over here our css and we got main.css but also we have to link to it from our html menu anyway so if we go up here right underneath title and we type in link and we go down to css it gives us a template and then we can just go select css and then main and then if we hold control we can click it and it'll open that file so now we're over in our main css file and what we're going to do is we're going to select some of the elements that we created we didn't create the body element but we're going to select it and we're going to grab a slider we're going to grab wrap we're going to grab and we're going to grab uh slide content content and we'll put some curly brackets on this and now we can put our styling in here so we're going to set our margin to zero we're going to set our padding to zero we're going to set our font dash family to a special font is called arvo so what we'll do is we're going to save all of this we're going to go out to the internet so we'll go control in to open a new window we'll hit the windows in the up key and we're going to go to fonts.google.com and let's see if we can find arvo all right so we got the arvo font here we're going to go down here and select bold and we'll add that and we'll select bold italic and we'll add that too and now we've got both those fonts we're going to click here and we're going to grab this right here and actually we'll hit windows v to bring up our clipboard and we are going to clear this out so we'll clear this clipboard and then we'll unpin and clear and unpin and clear and unpin and unpin and clear all and so now what we can do is we can control c and control c and we can alt f4 and now we when we go back over here we can go to our index.html right up to the top and we can say we'll put a comment for external style sheets and underneath that we'll just hit the enter we'll hit we'll hold control and hit enter to make a blank line underneath that we'll hit control shift and enter at the same time to make another blank line below that one and then we will just paste in well control z will windows v and we'll paste in that link that we got from google and as you can see our page changed just a little bit when we uh when we save that now we'll go back over here to our main dot css and if we go in here well actually we do a control shift k to get rid of this line then another control shift and then a control shift enter to put our cursor back in that place and then we'll do a windows v and we'll paste in our font family and if we hit save now we get this brand new font and also what we're going to do is we're going to do a text dash transform uppercase and so we'll transform those all to uppercase team and then we are going to set our width w id th we're going to set our width to 100 percent and this is going to make all our stuff take up the full width of the page so we'll put a percentage in there and then a semicolon and then we're going to go height we're going to set our height for 100 view height and what this means is that this window would be divided into 100 pieces and we're saying we want to fill up all 100 of those pieces so we want to take up all the space from top to bottom and all the space from left to right and we're applying this to all of these different elements so if we really think about this we've got our body and so let's let's go in here and let's say for instance we've got body and we can set this to a border of one pixel solid red save so the body we can't see hold on control shift k save body z z border one pixel solid red oh there we go that's solid save and so now we have this border around we have this border around the body and then let's put one around the slider so we'll just duplicate this and then here we'll go slider and we'll put a fellow sign in front of that and we'll make this blue save and so now we can see where our slider is all right so we've got our whole this is our whole body we've got our slider now if we go down here and we do our wrap we can say dollar sign again we can just copy this whole thing and right here we can set this to wrap and we'll make this a class and we can go down here and we can make this border purple save now we got this purple border in there you can't really see it so let's do this we'll make it black save and then we'll make it bigger so we'll make it like five pixels dotted d o t e d save all right border five pixels dotted black where is our wrap oh it's because our wrap is uh our our wrap is set to 100 percent of everything so it's actually showing up behind this body I believe I was wrong team it is because wrap is ID so we'll save and now we've got this wrap so we got to go back here and we got to go ID save and so now this all kind of making sense so we got our red border all around the outside then we got our wrap we'll turn this down to one pixel save and then we got our wrap that bumps right up against that and what happens is when we set borders the borders become a part of the box so we can always see the borders now as you can see right we're running off the screen in in some of these places and so we're going to set the overflow to hit me get rid of this this scroll bar as well so actually if we go down here and we go overflow hidden right and both those boxes go but we only need it for the x so we can go overflow dash x save and now we still get up and down scroll bars but we don't get left and right scroll bars and see what else we got up here we got slide content so if you grab slide content control c and we'll go down here and we'll make this a we'll make this a border of three picks dotted and so let's see slide content let's go back over here find slide content we gave it an ID supposed to have a class so what we'll do is we'll go slide content we'll just grab all of this we'll go control ddd ddd and we will take all of our cursors go back over here and we'll just type in class save and now we've got our slide content so we've got our buttons on the outside and then everything else is pressed up against the side of the screen like it should be and so what we're going to do is we're going to change the flex direction of all of this and then everything is going to line up horizontally so we'll go back to our main dot css and we'll just comment out all of these we just grab these and we'll comment them out and save and now all of that other stuff that we added goes away so we'll move this down a little bit and so we've got under there we're going to set our wrap wp and we're going to give it a position of relative so it's going to be position relative and what this is going to do is going to act as kind of like a foundation for everything else that we build so this is going to be positioned relative well actually what we're doing because we're not going to move this element anywhere we're making this a relative to any elements near it so basically anything that goes inside of this wrap we can position it right on top of the wrap and then the wrap will contain all that stuff so if we ever need to change the wrap then we will be able to um to change those elements that are inside of the wrap as well all right team so let's go back over here and outside of wrap we are going to call our slide elements what we're calling the slide class so we can style all of the slides that we have and we're going to set the background size to cover and we're going to set the background position to center and then we'll set background repeat to no repeat save and now what we're going to do is we're going to go down here so we got all this space nothing see nothing there we're going to go down here and we're going to add some images the problem is is we don't have any images yet but we'll get those in a minute so we're just going to go slide one and we are going to add some double curly braces we're going to go background image and we'll go url and we'll put some quotes in here and then we're just going to grab this and we're going to make five of those so we've got one two three four and five so we're going to get rid of this and then we are going to change these numbers so we got one two three four and five save now we're going to go back out to the internet so we'll click on our browser window control in windows up and we'll go out to pexels actually we'll go to unsplash.com and oh this is an awesome picture right here in the background how do we get to that how do we get to that picture all right so let's photo of the day all right so we're going to download the photo of the day and it's going to ask us where we want to save it we're going to save it to our d drive in the real castadero to the construct to the code folder and we're going to make another folder by right clicking and hitting new folder and typing img this will make an images folder and we'll just save our image right in there and then we can scroll down and he's got some more nature which is awesome so we'll grab this one here and we'll download that one for free we're going to ask us so we're going to put it we'll just save it there we're going to go back and let's see what else he's got i like this motorcycle person here i like that motorcycle person there too and let's see what else we got in here team uh this is a cool picture we'll grab this one here so we'll download for free and we'll save and we'll go grab another one here let's go grab another one team let's see what we got we got anything compelling motivating inspiring i like the way this looks i just like the way it feels and we'll go download that for free and we'll save this and then we'll go back and we'll grab ourselves another one we'll grab her download for free and one two three four and five and we'll save that and we are done team so we can click our browser and hit alt f4 and now we can go away we've got all the images we need so we can go here and we can just type in slash go to img and grab an image go down here and do the same thing slash img grab an image slash img grab another image so this is the third one and the fourth one and here we can grab the fifth one come on man bam and we'll grab img oops img image number five and let's see we need to put some uh some semicolons here one two three four and five and save and now we've got some images laid out here all right team so the next thing we need to do is we need to go down here a little bit more and we need to style our slide content so this is where we're going to start to lay everything out towards horizontal so we're going to do a class of slide uh content and we are going to add some curly brackets and we'll do a display flex and we'll do a flex direction and we'll set that to column and what that's going to do right so when we say display flex we're saying hey we're going to lay this page out using using the flex and typically everything is set up to be horizontal but by changing the flex direction we change the axes we're going to be using from left to right to up to down so when we do something like align content and then go over here to center and save uh oh what has happened team align content so we got slide content let's double check and make sure we got this spelled right so let's go slide content is a class control c go back over here control so we got slide content we'll paste this again control v and save display flex flex direction column align content center text align and center save and so it's in the center but we need to get this down so we got flex flex direction huh all right i see the problem it is because of let's go back over here our rap rap has an id rap has an id of here rap has an id there nope that's not it justify that's it so if we go here and we do a justify content and do a center save now everything's in the middle all right so now that we got our text to the center what we're going to do is we'll go down and we're going to style out the actual text itself so we will go into the slide well actually what we can do is we will just uh control shift k to delete this line and then we can grab all of this and go down one time and then we'll change well actually over here we'll just put a span and then in here we'll change all of this stuff so we've got we don't need display flex we don't need flex direction we don't need uh we don't need align content we don't need we don't need any of this stuff so we can delete all of those and then we get control shift enter bring that back and we can go font size is going to be five rims save and now our text is huge it's kind of big so we'll go three save and this should be good and now we'll go um hit control and hit enter at the same time and then we'll add a color and our color is going to be c o l o r colon and our color is going to be white and we'll save that and then we hit control enter and are we're going to give this a text shadow of three pixels three pixels five pixels and black save and now we've got a nice text shadow on there and now inside of here we'll do a text transform and we'll transform this to uppercase and save and now all our text is in uppercase so we should be good to go their team now what we're going to do is we still have our arrows and let's we can spread this out a bit so you can see like the text isn't isn't too crazy and so we'll move this back over here we'll grab we'll grab our we'll go back into our our style sheet over here and let's style let's start styling our arrow so let me make this smaller so we can see the arrow pop up when we get to it and then so our arrow is going to be dot arrow and that's because of the control f the arrow class where do we put it uh oh uh oh we didn't make an arrow class but that's cool it's no big deal all we got to do is put a cursor here and then scroll up and put a cursor here and then scroll back down actually let's put all right so we got a cursor there we'll scroll up and if we hold alt we can put one there so now we got a cursor in two places and we can type in both places at the same time so we'll get rid of that fine and we can type class and we can do a class of arrow save and now we can style both our arrows at the same time so what we do is go back to main we'll control s and this seems to be probably like a pretty good time to commit all of this stuff so we'll just go over to get and we'll do a get status and uh oh so let's go into it let's do dir we didn't even commit it so if we do a well actually we'll just do it after we style our buttons so we'll just minimize that and then we'll come over here and we'll just style our arrows out so over here in our arrows a section we're going to do is going to type cursor and the c u r c u r s o r cursor and we're going to make our cursor a pointer put a semicolon at the end and basically when somebody hovers or hovers over or the button is going to turn into a little hand with a pointy finger and then we're going to set our position to absolute and we'll go control shift enter to put to move our cursor up on this line and we'll set our top to 50 percent and we'll save and now you can see all right those buttons that we had at the top and at the bottom they just boom they just went like right right into the center so now what we'll do is we'll set our width w i d t h we'll set that to zero and we'll set our height to zero we'll save and now we can go down and we can style our individual arrows so we'll go uh i d of arrow left and we'll put that inside of some curly brackets save it and we will put a width w i d t h of zero pixels we'll put a height of zero pixels we'll hit control enter to make another line beneath that we'll set our margin left for this one to 30 pixels and so what that means right is our arrow that's on the left when we set it to uh it's going to be right up against the edge of the screen but then we give it a margin to move it back a little bit and we're going to do the same thing on the other side just in the opposite direction so we've got our our margin left now we're going to style this thing out so it starts to look like something so we're going to go border top and 25 pixels solid and transparent so we'll save and then we'll go down and then we'll go border dash right and we'll set that to 50 pixels and we're going to go solid and we're going to set this color to whatever you want so we'll set this one to red save and then we'll go down and actually let's see border r i g h t is what it should be save all right so now we're starting to see a little something going on here and then we'll do a border bottom and we're going to set that at 25 pixels px solid and transparent save and now we have this arrow and what we can do is we can take these numbers down we can go to 20 save and now our arrow gets a little smaller and if we can go here and we can make this 25 and our arrow gets a little thinner now we have to do is take this and duplicate it and change this to arrow right and save it and then we have to change some numbers around over here so we got zero zero zero our margin left it's not well we so this should be margin right save and then these 20 pixels let's see all right yeah so we have to move this to the right so we go right and we'll set the right at zero save and let's see arrow right maybe something's wrong down here arrow left this should be this should be right r i g h t save and now we've got our right button over here problem is it is facing the wrong direction team so we have to do is we have to turn this thing around so let's see i think if we do a i'm not sure i'm just sort of guessing right here right now 25 save all right okay so i'm looking at this i think the border left save all right we did it okay so we've got we've got our border bottom border left border right so everything seems to match up pretty good now we can just get rid of this text so we can just go back into our html and we can do the control shift k on that one and we can go up here control shift k and save now all we have is our buttons and our image team so the next thing we need to do is go in and set up our javascript so what we're going to do is we'll go here and we will do a get check out dash b and we're going to give it a message of styling it will say added styling so get check out b added styling all right fatal off so we need to initialize to get repository so we do get init we'll do a get i forget it so we do a get init i mean i get a net we do a get add all and then we will do a get commit dash m and this is just saying we're this is going to be our initial commit initial i and i t she'll commit c o m m i t with the baseline styling flash no logic all right so we've got that file here now we can do a get dash we can do not a get dash g it check out branch and when we check out that branch we need to give it a name so we're going to name this zero one javascript javascript all right so now we're going to switch over to that branch and we can go in and we can edit our javascript so we can get to our javascript file by either scrolling down and hold in holding control or we can hold hit control p if we can just type dot j s and it'll bring up our main dot j s so now we have our main dot j s file and what we're going to do is we're going to set up some variables right away so we're going to make a variable called slider image images and what slider images is going to do is it's going to when the page loads it's going to grab all of these images that we have inside of these divs and it's going to hold them in memory so we can do stuff with them later on so we've got uh let slider images equals document dot get uh no not get document dot query q u query selector all and we're going to put this in parentheses we're going to add some quotation marks and what what this is doing right now is we're saying hey go grab everything that has a style not a style but a class of slide and put it inside of this array so we can access it later and do something with it so we put a comma here a comma so we can make another variable so we'll go arrow left is equal to document dot get document that query selector and this is going to be a straight up selector because all we're looking for is one of our arrows and in this case we're looking for the arrow left a r o w so we grab that arrow left and i want to go back here and i want to check out we got to put this inside of um inside of quotes and i'm going to put it in double quotes because i'll put the other one in double quotes too so we'll put this one double and we'll put this one in double and then we should be able to get arrow left so let's go back and double check control f a r o w yep so arrow left is the id save we already knew that the right team so we're going to put a comma right here and go down and now we're going to put a arrow right so we're just duplicate this one and we'll just change this left to right make this r capital and this and it doesn't have to be named like this this is just camel case so when we read it we can obviously like right away what it is this is the arrow left this is the slider image it just sort of stands out in our mind and then we'll go over here and this is going to be arrow right so we'll save as that team and then we've got one more variable we need to make and that is the one we're going to use to track our current image all right so we'll save and then we can go down here and we're going to make a function that is going to clear all of our images off the page right here we're going to say reset well actually we just put clear all images images all right so clear all images and then underneath that we're going to go for let i equals zero and i less than and uh it should be slider images dot length then what we want to do is we want to execute our code and then add one to i so what's going to happen is we're going to read this stuff and if i is less than this dot length is going to do this code it's going to and then it's going to add one to i and the program is going to stop or move on and so right here we are going to say hey right we want to grab some information from that slider so we got that slider images and we're going to say whatever values at index i we want you to style that value we want you to grab the style information from that value style and we want you to set it to display the isplay equals none so n o n e so what's going to happen is when we call this function it is going to is going to go in here is going to set i to zero and then it's going to measure the length of what's in this array right here in image slider and if that number is greater than zero which is where i start set then is going to go grab that whatever information is here is going to set it's going to set that to none and so essentially is just going to loop through this until all the images disappear so if we go down here and that will actually if we go save it the program runs and all the images disappear so what we're going to do now is we will make another function well actually what we want to do is we're going to put this inside of a function of its own so we're going to go function uh and we'll call this reset bam and then now what'll happen is we can grab these this bracket right here just drag it down there get rid of this blank line here and save it now our images comes back but if we call that function like if uh control shift i to get in our browser tools oh geez control w control shift i and if we go down here into our console and we type uh not rest let's rename this to reset reset we can go down here and we can type reset reset and call that function uh oh uncart reference error reset is not defined at anonymous one one whoa what's going on dude reset function reset all right save okay let's try calling that from in here so we'll go reset dash dash i mean not dash dash but uh parentheses and it works in here we'll see all right so let's control shift k and we'll save again i want to try that out here v enter all right so there it goes that's how that works team so what we can do is now that we have that reset we can start our slider so what we're going to do is we're going to go function start slider we'll get rid of these things over here so they're not comments and we will put a couple of parentheses here and some curly brackets and now we can write the logic for our function so the first thing we're going to do is we're going to call reset reset boom boom and we can actually write a console.log up here to make sure the reset was called but we should be pretty good team so we got reset right there and after that reset gets called we're going to run the next line of code which is going to be slider images and we're going to go in there and we're going to say grab the zero index and set the style s t y l e we're going to set the style to display block v l o c k so what happens is is when this function runs our image comes back team and so right now our image is here not because this function brought it back is here because this function was never called to take it away so if we go down here we do a reset save now the image is gone if we call this function start slider if we go right here start slider save now our image comes back but it doesn't do it our buttons don't do anything because we haven't programmed them yet so what we're going to do is we'll get rid of this start slider control shift k we don't need that anymore and we will make another function this function we're going to call start slider or we can call it the slider starter all right and everything has to have a start a middle and an end everything that's the way it goes all engines on every car must be a starter to start the engine when you're born like there's something that has to give you the spark of life team it's just the way it goes i don't know why it's like that well actually i do but we're not going to talk about that here all right so we'll go show previous this is going to be our first button and what this is going to do is we're going to show the prevay us prvi us image and then down here we're going to make a function for slow the show the previous image and we're going to just say function and we're going to set this to slider left left put some parentheses right there and we'll put our logic inside of here and what's going to happen is we're going to say slider images so this is for all the images of slider images on this when this is called if current is less than one then we are going to style s t not well it's not if the if if it's less than one is it is going to be less than one style dot display and we're going to display this block again so put some parentheses and so what happens is is slider dot images is going to look at current and is going to subtract one and then it's going to set whatever that image is in there to display so right now every image has so so this variable has properties right so what we're going to do is we're going to start this and we are going to we're just going to console dot log images slider images slider images save and now we get this it's called a node list and it's got all of this information in it with all of these different images so we can see all of this stuff in here that's associated with each image so if we look through here we can find h i j k element o p q r s we can find style right there and then inside a style we've got display which is down here somewhere a b c d d a b c d where are you display and right now it's not said to anything but if we go in here i don't know i don't know if it'll let us do it from here but we can go in here and we can say and hit enter and i've it should have it should have changed the image but let's see display blocks css text but anyway team this is these are all the different things that we can change using java script like we can go in and do all kinds of stuff and this is where all the animations come from in everything team so these are all literally just a bunch of either methods or attributes of a particular variable or function right or particular object right so this we have this again if we go right back to the genesis of this whole thing we've got this node list and inside of our node list we have these nodes right and on the slide one node we have all of this stuff so actually i think if we go like to the slide four node and we look to uh let's see and we look for style element o p q r s try it again style and then we go to display a b c d the display has been set to none we know that already well actually it hasn't been it hasn't been set to none because the um the um it hasn't been called yet so let's see a b c d play all right there it is and so let's take a gander at this and see if we can change it we may not be able to and it could be because i'm looking at the wrong place but i do know that this node list is where we get our information from so we'll say um block and maybe you can't do it because div class slide it can't do it because all the other images are showing so what we can do let's let's try this is we'll go back into the compound put this off to the side grab this up here bring it down a little bit and we'll scroll all the way down and back in the console let's see if we can do a reset reset save now the images are gone and let's see if we can find a display and i'm kind of off on a tangent but this is how i mean sometimes if you just go in here and mess around with stuff this is how you find stuff out so if we so we know we're calling we're looking at this node list in here and let's see actually all right so let's go see let's go find style again and actually instead of maybe we can just search for it style let's see why apparently not okay all right so we're going to here we're going to go abcd fg hi jk lmno pq rs what their style and then we go inside of there and we can set this to actually display what happened here ah i broke something but anyway team this was going on there so we're changing that attribute to to display and so now let's see console.log slider images oh yeah we already saw that all right so we can go back and we can close this out and now we've got our show previous image and after we set the display to block we want to decrement current by one so it doesn't try to show the same image over and over again so now when we save when we hit this this back button nothing happens nothing happens oh because we um because this this function changes the image but this button doesn't call it yet because it doesn't have an event listener so what we're going to do is we're going to go down here and we might as well just set our show next since we're here so we'll select all that we'll duplicate it we'll go back up here let's do a control enter to make a line underneath it and we'll go show the next image and we'll set this to slider right and then instead of minus one we're going to set this to plus one and we're going to increment current up by one and so this is going to say show us the next image and then from there we can go down here and we can set up our click events so we can go in here and we'll say um we'll just do a left left arrow click and then we'll do a arrow left add event listener and we'll put some parentheses around that and we'll put a couple of quotation marks and we will put clicked so this says when this button is clicked we want you to do something and in that case we are going to run this function right here and it's going to be what's called an anonymous function which means it doesn't have a name so we're just passing a block of code that needs to be executed if this button is clicked and we could we could this function could be anywhere we could call across the internet and wait on some information to come back I mean it could be it could be anything right but just in this case all the code through one execute we already know what it is and we're just going to put it right here inside of this uh inside of this function right here so we're going to put if current meaning the current image is equal to slider images that length minus one then we are going to subtract one from current and then we are going to call the slide right function so we'll just go down here real slide right and save but if right if the if if current is not equal to slider image minus slider image is linked minus one then it's not going to do anything and it's just going to go to slide right and so when you think through this logic it tells you how the program is going to work and it there's a bunch of different ways this could be written and the only way to get better at figuring out those different ways is to be thinking about how to solve these different kinds of problems and watching other people solve them and then trying to solve them yourself and then watching other people so when people talk about algorithms and stuff like that they're talking about things like like this like this what we're making is an algorithm and it listens for something to happen and when that thing happens it executes a series of steps and then that's it and the step just happens one of the steps just happens to be displaying an image but but that's the main purpose of this whole thing in the first place so anyway we'll go down here and under uh left click left arrow click we're just going to duplicate this and we're going to go right arrow click and we're going to do arrow right and we're going to add an event listener with a click and same thing we're going to put a function in here we're going to say if current is equal to um spider image dot well actually hold on we got our left arrow actually i got these i got these backwards this one's right this one because it's the left one has to be set a different way so actually this is going to be if current plus one all right so if current link so this should be left click left arrow click if current link plus one then what we're going to do is we're going to do current is equal to slider image dot link so current is equal to slider images dot l link and then from there we call slider left so we just go down here and we go slider left save and let's see what's going on here slider right and now we have to um we've got our event listeners but nothing happens when we click here because we haven't called our starter function so down here we can just go starter start slider save now our page refreshes and our button still don't work what's going on here team so let's see what the deal is uh i see this is supposed to be click not clicked all right save let's see and still i thought that would fix it all right so what we can do is uh i don't know what's why it's not working when we click this arrow left all right so let's see for grabbing these arrows all right so this is so what we'll do is down here we can console dot log when we when we click something so we'll just go uh we'll just make a console console dot log button button clicked so we'll go but in click save and we'll just copy this control c and we'll go up here into right button click and we just put this right inside of our function before our if statement executes control z the shift home control x and now we can do it so paste it right here control v and we'll paste one right here control v and we'll save now if we do a control shift i we get our developer tools and there's our console and we click one of these buttons nothing happens so this is telling me that something is up with our left and right buttons so maybe i'm not linked to the j s or something so j s dot main dot j s let's see let's go back over here and actually we know it's linked because we were removing the images earlier so let's see it's got to be something else all right so looking around i already see one thing i think uh i have i have one of the lefts capitalized inside of the j s so this one right here should be lowercase and then we've got arrow right let's copy this one we'll go back here to index control f and v to paste that in get this one at the bottom that seems to be okay it's still a id all right so we'll save and then we'll go back here and neither one of these still are working all right so i got a little bit the way i refresh the browser and uh now when we click these buttons we get a refresh our page refresh and then we'll click this left button uncaught type error cannot read property style of undefined and on line 21 so if you go up to line 21 it's probably i just typed something wrong so slider images current minus one style display block current minus minus so slider images current minus one we're having a problem because we don't reset so we're trying to replace the image that doesn't go away i think that's it and then we should be doing the same thing down let's be sure previous and we should be doing the same thing down here too so reset and then on our click events we should be good to go team so we'll go save and we'll click here all right so we're getting closer let's refresh the page again and we'll click right so right seems to be working is the left that's having the problem so let's click left and see what happens one two three four and then when we get here uncaught type error cannot read property style of undefined at slider left main.js 22 so 22 slider images current at one style that display block current slider left all right i got this i got this all mixed up man so this shouldn't even be here because i was i was bent on reversing and that's not what's supposed to go down here so see current is equal to slider right dot link and then if current is a slider right dot link then current you go to slider right image is equal to slider right dot link so this should be this should be zero right here left click and save and now that should that should do it let's see left all right right still works but left all right team so i have found the culprit so if we go here and we look at our show previous image slide we've got we call the function we run the reset and we got slider images is equal to current minus one so this was this was set to current plus one before so if we save this we get this we get this white deal when we try to go backwards because it can't go backwards because it adds a number so things get all jacked up so we go there and it resets and now we can move in reverse and also in the left arrow click function we're waiting for the event listener this should be slider images and not slider right that was that's our problem so if we go slider right we're calling the length of the wrong thing so it may work a couple times but it won't work for long so as you can see when we go this way right we're okay but if we get past a certain point then it won't work the other way and these are what are called bugs team so we can do is we'll just change this back to slider images and save and now we can go infinitely in both directions and unfortunately before i caught that i had already gone and committed my code so if we do a get status uh i had already committed but we can do a get commit dash dash m well we're going to put an m and before you do it what you're going to do is you're going to add all your files and then you're going to commit and i'm just going to say changed code and so now right so we're up to date we're good to go now the next thing we got to do is in order for people to see this on the internet is we got to get it to the internet and that is not an overly tough feat because what we've done is we've already done all of the hard work so all we have to do is go out to github so github.com and we just create a new repository so we're going to make a new repo and we're going to name this repo full page slider and we'll call this full page javascript so we go javascript full page javascript slider and i don't know if we could put space in here but let's try full page javascript slider all right and then we could say uh full page image slider written wr it written in javascript and now we can just go here we could go create repository and it'll tell us if that name is available and we just go here and we do a get remote add origin control c and we paste this right in here and we hit enter and that's going to add the remote origin and now we push it to master so we right click copy and control v and this is going to push all of our code with all the images and everything right up to the cloud team but when this finishes what we'll be able to do is we'll be able to go into github and we'll be able to look at all this all this code now the next thing we want to do is want to deploy this to the internet so people can actually see it so if we go over to a service called netlify what it allows us to do is if we log into here we can build we can we can serve up websites from our github repo so we just go in here and we're just going to type type uh slider and hit enter and this should give us some options so i've already uploaded two but this is the one we're looking for right here we're going to hit that one right there there's no special commands or anything we're going to upload the master branch so we'll go deploy site and then the site is going to start to deploy we can see the progress here actually and it'll show us the build process and now the site is live we can go preview deploy and this is what our webpage looks like on the the internet team and i think this this isn't actually the right one we got to go back over here and let's see we do this one and let's go back over to netlify and let's go back to these first ones so what is going on here team i think i selected the wrong one so what we're going to do is we're going to click here and we are going to delete this all right so i've deleted all of those and let's see the one at the top right now is missing mcnulty and this is a part of project ruckle that i previously did and this is a pretty cool search engine we can go in here we can type a java script and what it'll do is it'll give us the search results from go all right so we can close that control w and we go back over here and we are going to go to our home we're going to say new site github and then we are going to find a slider so we've got full page java script slider so this is the one so we'll hit that right there deploy site and we've got the progress menu here and if we go into building it'll show us what's going on it usually builds pretty quick we'll go preview deploy and now our site is out on the internet and we can go there and actually use it team and something is wrong let's go control shift i to take a look at this thing and what is happening is well we don't have a favicon but that is not the problem the problem is is that this is not working so let's stop our local host let's go back here and see if our actual application is working all right so everything's working here ah you know what the problem is is we merged master and master isn't we we uploaded master but master doesn't have the latest update so on our local server everything works fine but when we go out to the internet it's all broken so what we got to do is we got to do a git status and we do a git branch branch we are a mch and we are currently on the javascript branch so we're going to check out master so we're going to do a we'll zoom in so you can see we're going to double click right here and right click and copy master and we'll do a git check out and paste this and enter and now we're on master and as you can see there is no javascript code here this is what we uploaded to the internet well actually yeah that is what we have a little uploaded to the internet but if you go back here and we stop the server and start the server we get this page and it does the same thing that's going on on the internet which is which is nothing so we can go over here actually we'll go back to power shell and we can do a git merge and merge in this branch and now everything is going to be updated so we can do a git status all right our working tree is clean so we can do a git so i want to show you guys this right because if we go back to netlify when we do a git push origin well actually we can just do a git push because we already pushed one so we just do git push this is going to push all our code up to the cloud and our page is going to be rebuilt as soon as that code is sent up so we got building and then published and we go here and now our application works team and that is how you build a full page image slider in javascript team i hope that was helpful to you i hope you learned a lot if you want to learn more on your journey to learning to code and you want to be a part of and help ignite and start a community of like-minded coders what you're going to want to do is check out the code 365 startup lab and there are introductory courses here that will introduce you to html css javascript power shell the core fundamentals that you need from there you can go out and you can take books i mean you can read books you can read you can take tutorials or whatever but at the very least i recommend that you start reading the documentation that is how you're going to learn the most read the documentation build as many things as possible and then show as many people as possible team but again if you want to help grow a like-minded community of people who want to learn to code for fun and profit think about signing up for the code 365 startup lab team and my goal is to take this thing so i can produce these kinds of tutorials full-time and also build out the code 365 startup lab and begin to grow a community of like-minded people that help one another build things that are going to generate some sort of income with the ultimate goal of everybody who's a part of the code 365 startup lab community generating more than enough money to live the lives they want to live do the things they want to do and be the people they want to be team so right now over in the code 365 startup lab this is what we have so far right now i'm on html building blocks and when i finish html building when i finish the html portion i'm going to move into cascading style sheets but in the html section we're going through the block level elements the inline level elements and we're going to go through a lot of the elements that are often overlooked like the head element is often overlooked in tutorials because tutorials aren't geared towards search engine optimization the problem is that if you go out and build your own websites and you don't pay attention to the heading tags and you don't pay attention to how you structure your page then your page is never going to get ranked you have a fantastic looking website but the search engines won't show it to people so you're running the things like that team so if you want to support the channel right now for 99 bucks you get lifetime access to the code 365 startup lab all the curriculum that is here how to go out and find clients all of the stuff on html and then you get access 100 access to all future things that i upload and we've got eight we've got html genius coming css alchemy and javascript i don't know what is going to be javascript genius or javascript mastery and then i'm going to be uploading templates uh resume templates website templates all kinds of stuff team it's all going to be available here in the code 365 startup lab and by the end of the year we will have launched the official discord channel where everybody can go and hang out and in the meantime the goal is to build a bunch of cool projects in between that will sort of supplement the code 365 startup lab and make it a better experience for everyone but of course the core of it all team is giving you the knowledge of the skills and the imagination to be able to build the things you want to build so you can go out and live the life you want to live team so again if you want to support the channel check out the code 365 startup lab and if you want some merch check out write code drinkcoffee.com where you can find hats stickers and other merch built made specifically for you by me team now i have the shirt i haven't uploaded the shirt yet but the shirt will be back online soon and that is the never forget with the floppy drive the disk drive and the vhs cassette tape so anyway team it is your biggest fan the real cast there are here thanks for hanging out with me here i look forward to seeing you in the future team until next time