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


Johnny Dollar. Pete Breneman. Johnny, out here in Las Vegas. Breneman. Western Maritime and Life? That's right. How are you, Pete? Busy, Johnny. Checking over a set of plane schedules. How about to have yourself a spring vacation? Where you headed for, Pete? I'm not. Oh, no? You are. I am. Yep. Well, thanks for telling me. Now, the way I figure it, if you pull out a Hartford about 9 p.m., your time, that's a couple of hours from now. Well, now, Pete, uh... I think a jet out of New York at 1115. Well, in spite of another change you left in Macon, Los Angeles. You ought to be here in Vegas and play a time for breakfast. I should, hmm? That's where I figure it. You mind telling me what it's all about? Not a bit, Johnny, not a bit. What? You're a young fellow by the name of Harvey Stakillman. Straight life policy for $62,000. Yeah, what's happened to him, Pete? I'll be there. Exciting adventures of the man with the action-pact expense account. America's fabulous freelance insurance investigator. Yours truly, Johnny Dollar. I heard during my investigation of Los Vegas, Nevada, I got there in time for breakfast. A very early one. He met me at McCarron Field and drove me into the Silver Dollar Cafe just around the corner from his office on Fremont Street. Okay, now, Johnny, let me, uh... I just don't get it, Pete. Don't get what? That sweet little old lady. She looks like somebody from the school teacher. Right there by the front door, and at this time of the morning. Judging by that pile of quarters next to her, I say she hit the jackpot a couple of hours ago and is just busy putting them all back on. Pete, isn't there a single building in this town that hasn't got slot machines in? Oh, I heard the churches don't have any. It would come to think of it, I guess, there, but, oh... Well, all the casinos up and down the street and at the fancy hotels out on the strip going 24 hours a day. Does anybody do anything around here besides gamble? Are you kidding? We're right in the middle of some pretty important ranching and mining country. Oh? What about this Harvey Skillman that you mentioned on the phone? I thought you were in a hurry for me to get on it. Well, I was. I am, but... Johnny, I... Well, I just talked again to Sergeant Carly who was headquartered.  Oh? Why? Well, the minute Doc Porter, he's the police medical found out Harvard didn't poison. What sort of poison, Pete? It's called, uh, penorphin. Penorphinaculate. Oh, really? Yeah, a real deadly stuff. Yes, I know.  But, Pete, and Doc found some of it, some residue in the bottom of the coffee cup. Harvard just used. He was a great coffee drinker, Pete. And then, what, a Sergeant Carly fine in the sugar bowl? Loaded with the stuff. Almost as much as those white crystals of it as there was sugar. Oh, naturally, everybody shouted murder. Now, wait a minute, Pete. Yeah? I don't know of penorphinaculate. Yeah, yeah, that's exactly what finally hit Doc Porter. Because the way he explained that stuff to me, the taste of it. Now, could this Harvey Skillman have been plastered with the gills when he drank the coffee containing it? No, sir. Harvard never touched the stuff. Are you sure? I'm sure. Johnny, there isn't anybody in this town knew Harvey Skillman as well as I did. He used to work for me, selling insurance. I'll tell you, Johnny... Wait a minute, wait a minute. We're getting away from the point. The penorphinaculate. I'm afraid that if you're thinking what Doc Porter thinks now, you're all wrong. Pete, listen to me. No, sir, Johnny.  He'd spit it out, throw the rips away. I know, I know. That's what Doc Porter says. In other words, he must have taken that poison deliberately. Committed suicide. That's what the doc says, too. But he's wrong. You're both wrong, Johnny. Look, Pete... I'll tell you, I knew Harvey Skillman. And I'm sure, Johnny, I'm sure that he wouldn't have committed suicide. He must have. No. What's more, Johnny, you've got to prove he didn't. Pete, from what you've told me...  I don't... Well, yes, get over it. Why not? Look, why do you suppose I sent for you? Are you getting the order? Because you're the one person I thought would believe me. Well, try to do something about it. I'd be glad to if I thought there was one single friend. Okay, okay, okay, Johnny. Just let me tell you why I'm so sure of Harvey. Why I'm so absolutely sure the police and Doc Porter must be wrong. I wish you would. When I'm finished, all I ask is that you do something about it. But at least you'll try to prove he didn't kill himself. So at least will you listen to me, Johnny?  But it better be good. A picture that includes many persons and personalities. This is Dimension in England. Alexander Kendrick reporting. This is Rose Natsumi. I sing with Ben. I sing with Ben every weekday. This is Peter Callasher in Tokyo for CBS News. This is Art Linklater and our guests and our kids on the House Party each weekday morning, right here. This is Dimension on the lighter side of the news. Larry Lister reporting with another edition of Quotes of the Week. This is CBS Radio's Larry Coleman inviting you to be with me on this station throughout your weekend for Coleman on Sports. Oh, Gary. Gary Moore. Yes, David. David Kirby. This is Dimension in Central Europe. Daniel Shaw reporting. This is Isaac Godfrey. We're really good this year. Hello, everybody. This is Laurel Thomas. There's a sound difference when you're dialed with CBS Radio Network station in news and entertainment and Dimension. Not too healthy a guy, but okay. Like I said, he worked for me in the office selling insurance until he hit it lucky one night. Lucky how do you mean, Pete? Hey, one of the crap tables at one of the casinos here in town harv through those dice for 21 straight passes and he ran a sawbuck up to $44,000. Oh, wow. I hope he had something up to quit, then. Sure he did. He also quit his job. You know why? Why? Because of his kid sister, Mary.  Pathetic people? Yeah, and the most unselfish girl I ever knew. A nurse. A good one. Spend all her time, every bit of it, helping other folks who couldn't help themselves. But then, Johnny, about a year and a half ago, she came down with some kind of a crippling bone disease that nobody thought she'd ever recover from. But the minute Harv got ahold of that money, with that and all his savings, he took her straight to the Mayo Clinic back in Rochester, Minnesota. Can't think of a better place. And when they'd done all they could, she took her east to some high-priced man in New York. Good for him. And now she's going to recover, Johnny. She's going to be as good as new. Wonderful. It's going to take another year, maybe, in that expensive hospital and all, but she's going to be all right. Thanks to Harv. I can see why you liked him, Pete. Sure. The old trouble was that, well, Harv began to run low on money, so he came on back here. Oh, no. He thought he could run up another big killing. But all for her, mind you. Well, wouldn't the people that she'd been so good to help her financially? No, Johnny. Harv felt he had to do it all himself. But he probably lost everything he had left, except his insurance. So if anything happened to him, he could be sure that she'd be taken care of. Couldn't he have borrowed against insurance? Yeah, we would have refused the principal too much in case something did happen to him. Oh, that's true. Okay, so he came on back to work for me, and I helped him all I could. I kept giving him all my best prospects. And by living cheaply and all that, Harv managed to save a lot of money again. But that's when Lifty Lorenzo lowered the boom. Lifty Lorenzo? Yeah. Used to be one of Capone's hoods out in Chicago. That's the one. He came out here and retired on a little ranch out north of town. Plenty of time growing flowers in the cactus garden. Isn't he one of the people reputed to have muscled in on some of the big casinos around here? Let's say rumored. These casinos are pretty clean, Johnny. They have to be. Yeah, I guess so. Anyhow, Harv confided to me that Lifty had something on him. Enough to blackmail him for everything he had. Did he tell you what it was? Nope. Well, Pete, if he was ever mixed up with Lifty Lorenzo, I'm afraid my sympathy for him has chilled slightly. Johnny Harv swore to me that he'd paid his debt to society and then some. And I believed him. I still do. What's more, it was his sister Mary that he was living and working for. And I mean working. But he knew he had to settle things once and for all with Lorenzo. Settle with him how? With a deck of cards? How do you mean, Pete? Lifty knew. Don't ask me how. Lifty knew that Harv had something over 10,000, so that's what he was demanding. But Harv knew what a gambler Lifty is, and if he could get Lifty into a double or nothing, trust the deck for high cards. He must have been crazy, Pete. I know, I know. I tried to talk him out of it. I told him that if he won, Lifty would probably pay him off all right. But his life wouldn't be worth a neck, of course. But he went out to Lifty's place, went through with it. Johnny, Harv did win the cut, and Lifty paid off. And then? Well, Harv stopped by the office to tell me about it, to say that he was going to pack up and take that money to New York for marriage. But you think Lifty got to him before he could? Police thought so, too, Johnny. And I called him over there, and they found he'd been poisoned. But then, when Doug Porter came along and found it was from that, uh, from Norfolk accolade in his coffee, nothing he couldn't have helped but noticed. Anyhow, Doug said he must have taken it deliberately. And the police agreed with him. But why would he do that? You know what they said? To make it look as though Lifty had done it to him. So his insurance would have to be paid, and there'd be all that money for his sister. Much more than he'd want from Lifty. He was living his whole life from Mary, so they claimed he was willing to die for her. But harm and insurance, man? What? Pete, if he was half as smart as you seem to think, he knew darned well that even a suspicion of suicide might keep his sister from getting a penny. Right. Right, Johnny. And thank goodness you're coming around in my way of thinking now. Just the same, Pete. I want her to have that money. She needs it. She deserves it. And she'll get it, too, Johnny, but I'd rather put that one word. Suicide on Harv's death certificate. But unless he was drunk or dope before he started drinking that poison cup of coffee. Did anybody see it just before it happened? I did, Johnny. There it is apart. You did. I drove him over from the office. They helped him pack up for the trip east. And then I was going to drive him out to the airport. Was there any sign that anybody else had been there at his place? No. Front door was unlocked, though. It was. The office forgot to lock it. Hmm. But somebody could have got in without any trouble. Anybody. Including Lippi Lorenzo, the one man who wanted him out of the way. And the one man, Johnny, who'd be smart enough not to go after the money Harv took from him. Just Harv. So what happened? So while he packed, he poured us both some coffee. Like I said, he was a bean fort, kept a pot of it going all the time. And you drank yours without any ill effect? Because thanks to good Lord, I never used sugar in mine. The point is, though, Johnny, Harv wasn't drunk. He wasn't doped. He was perfectly okay until he put in the sugar with that poison in it and drank that cup of coffee. But the fact still remains, Pete. And there's all the more reason for it if he liked this coffee sweet. I know, Johnny. I know. The bitter taste would have given that poison away. Right. He'd have had to notice it. Like the doc says, it would have had to be suicide. But, Johnny, believe me, Johnny. Wait one minute. Yeah. Come on. Let's go over to your office where I can put in a long-distance call. Yeah, Johnny. I could be wrong. It's a chance. A long one. But maybe, Pete. Maybe we can find the answer to this. Our flavor is a respected friend of mine, Dr. Les Crutcher in Sarasota, Florida. Not only because of Doc's deep interest in forensic medicine, but the fact that he'd spent many years in the study of strings and exotic plants found a witch doctor that's often used on their half-savage patients in the jungle, the kind that educated people sneered at, until medical men came along and found that some of them had curative vases, things like digitalis, the heart stimulants in the fox-glove flower, and quinine from St. Johnabark, stritnia from the st. Ignatius being, velodana from the root of the deadly nightshade. And Crutcher knows as much about them as any man alive. Come here, Ken. You here in Sarasota? No, sir. Good, Doc, but I'm out here in Las Vegas, Nevada. It's a great open gambling town. Well, it isn't quite as bad as that, Doc. I've seen you since the day here in my office when you acted like a sport was slightly bitter. But I did take it, Doc. And I didn't taste it. Don't you remember? The first swallow of it made me feel worse than I had before, so instead of forcing the rest of it on me... I forced it on you. A cup of... Well, a kind of a cup of tea, Doc. It didn't taste very good, but then it wasn't too bad either. Oh, yes, I remember.  Because you couldn't taste it, then. I couldn't taste very well for hours. That's a great secret of mine. What was it, Doc? Well, I'll tell you, Johnny. And is it something that could be mixed into something else like strong coffee without being noticed? Oh, yes, indeed. So what? The specific plant is called Jimnema Sylvestra. Jimnema? Sylvestra? I found the South African... How can I get a complete description of it? Maybe even see a picture of it. Well, no colleague of mine, Dr. Raymond Atherton-Coverly, out there on the coast at UCLA, might even be able to show you a living plant. Okay, Doc. For the Chicago police some years ago. He's an Al Capone's gang. Definite steps. It temporarily took both very better... Doc, was his name Lippi Lorenzo? He would have known about it. I think you've just helped me solve a murder. There, crutches friend Dr. Coverly proudly presented me with a specimen of the Jimnema Sylvestra plant. Yes, it's one of the most successful in my exotic collection, Mr. Dollar. I'm glad you had it, sir. But whether it can be grown out in the dry air of the desert, Mr. Dollar, well, wouldn't the dried up leaves of it be just as potent as fresh ones, Dr. Coverly? In which form do you, a plant like crutches would know about it? A killer. A $50 deposit on a rental car. Then after a brief stop at police headquarters, I drove north to the little ranch I'd heard about. But I wasn't exactly alone. Dollar, what did you say? I'm Johnny Dollar.  Well, I sure don't get it what you're doing around here. Oh, you don't, hm? Everybody else ain't got a thing on me, Dollar. So you don't bother me one bit.  Why not? Just don't try to make no trouble at all. Cactus garden, I get out of friendship. Oh, I saw that all right. What I didn't see, though, is an idea for covering a murder. Came out here to settle up with you. Now, what's that to you? You gave him a drink. A good, strong cup of coffee, maybe. So what? He practically lives on coffee. So what's the matter if I did? When you made it, you put in the leaves of this Jim Neymar Sylvester plant in order to numb his sense of taste. Now, listen, Dollar, that was the one way you could be sure he'd never taste the poison, the penorphin alkylate that you later put into the sugar bowl at his apartment. You're pretty smart, eh? And the result? The police would think he committed suicide. That's right, they would. And they do. And they're never going to think otherwise, Dollar, because you ain't going to be around to tell them otherwise. You see this? Complete with an old-fashioned silence, eh? Man, take a look at this, sir. Ah, look, and you'll have a chance to jump me. You're doing you right now. You take care of Lippie. I'll call your Dr. Porter about how to fill out the debt certificate on Harvey Skillman. That's truly Johnny Dollar. As the police are.


Hello, I'm a private first-class Lucas Martin. I'm from Compton, California. I'm stationed with U.S. Arson at Shaw Air Force Base. I like to shout out to L.A. Rams. You know we're bringing the championship back. We're going to back-to-back like Lita Wepping. Yee! Hi, I'm Major Jason Coles from originally from North Tanawanda, New York, stationed with U.S. Arson at Shaw Air Force Base. I'd like to give a shout-out to the Buffalo Bills. This is our year and I'm on the CG's bandwagon to support the Bills. Hello, I'm Lieutenant Colonel Faye Anthony from Columbia, South Carolina, stationed with U.S. Arson at Shaw Air Force Base. And I'd like to shout-out to my favorite NFL team, Kansas City Chiefs. Go, Patrick! Hello, you guys. My name is Jennifer Edwards and I am stationed with U.S. Arson at Shaw Air Force Base. I am from Providence, Rhode Island, and my favorite team is the Panthers. Go, Patrick! Hello, I am Staff Sergeant DeMario Thomas. I am from Lancaster, South Carolina. I am stationed at U.S. Army Central at Shaw Air Force Base. I would like to give a shout-out to the Carolina Panthers. Hey, keep pounding. How's it going? My name is Chief Gray from U.S. Arson. I just want to give a huge shout-out to the Las Vegas Raiders. Just win, baby. I'm Sergeant First Class Michael Bielin. I'm with the U.S. Army Arson. I'm from Estles, South Carolina. Just want to give a shout-out to the Dallas Cowboys. Let's get that Super Bowl this year. My name is Sergeant Connor Overstreet from Atlanta, Georgia. Just want to give a shout-out to the Atlanta Falcons. Hello, I am Captain Brandon McFadden from Kings Creek, South Carolina, part of U.S. Arson at Shaw Air Force Base. I just want to say, go Carolina Panthers, keep pounding.


لدينا أحب و أحب و لا تنسى لي بعدها أحب و أحب و لا تنسى لي بعدها أحب و أحب و لا تنسى لي بعدها لا يوجد شيء أخر صلى الله عليه وسلم محمد يعني صلى الله عليه وسلم عندما كان يذهب في الإسرار يردون أنهم يفعلون رقوة كل وقت رقوة كل وقت رقوة كل حياتهم يفعلون سجدة وحدة رقوة يردون رقوة و كل وقت رقوة صلى الله عليه وسلم يقول well this angel they are getting it I need this for my own he asked Allah for it and Allah knew it in his heart then Allah gave him the prayer that we are doing a movement maybe in 5 minutes we are doing all the forms that all the angels are doing that barakah of رسول الله صلى الله عليه وسلم definitely nobody was given the details of the the jal you know the false messiah like رسول الله صلى الله عليه وسلم was given to his ummah to protect his ummah praying in his masjid is a thousand times better than bringing in another place the jal will not intermatka or madina it's going with him to رسول الله صلى الله عليه وسلم plague will not intermadina you know Allah took it on himself to make this deen over all other realism يظهروا على الديني كله now and then toward the end of time all the monotheism and all the bad people of madina will be out of madina and all the believe will go to madina now between his his velvet and his house is Rawal Allah صلى الله عليه وسلم صلى الله عليه وسلم إذا مستقبلك behind that because of salmacy this is Rawal Allah but they didn't say how far to the back so I just take it good opinion that is all the way whatever you're thinking Allah I'll give you his velvet is he said he says رسول الله صلى الله عليه وسلم my sheikh told us once once he said once you open your eye on the day of resurrection don't look for your parents for your brother your sister your friends go directly to your appointment with the رسول الله صلى الله عليه وسلم on the house and how is the water pool he says assalam he told everybody he told us you have appointment with me with the رسول الله صلى الله عليه وسلم on the house and then صحابة يعني in order for them to really understand this meaning he told them look my member is on the house my member is on the house that is given to the رسول الله عليه وسلم he was given that all of us we talk to him directly in our prayer if you talk to anybody any human being your prayer is not valid he called your mom your brother your sister your sheikh any prophet your present your present valid except رسول الله صلى الله عليه وسلم say it's like he's in in front of me i'm giving salam i know people and i heard stories of previous i know people that story previous people that when when they said like sheikh بردين حسن he is known big sheikh in in the basket but he died like under the yellow but my you know my father my sheikh they said talk about he will say with the people yaba when when when you say سلام عليك and do you hear back the salam for صلى الله عليه وسلم he said no he said all right every time i say this i hear back وعليك السلام يا ولدي سلام عليك my son because he's from the family province so some people they see this they hear it شاء الله all of us when they will hear it صلى الله عليه وسلم then الله سبحانه وتعالى in the Quran he he talked about the parts of his face his heart صدر his hand if you go in the Quran you have all of this you know one by one one by one يَدُ الله فَوْ قَيْدِهُ مَعْرَ مَيْتَ اِدْرَ مَيْتَ وَلَاقِ الْلَاقِهُ you didn't throw in your hand he said Allah is the one so it's mentioned everything you know left and right go in the Quran see how everything you know some is mentioned you know يزله على قلبك الله بروض the the Quran on your heart the mountain couldn't handle the Quran only the heart of the master the whole creation can have the Quran and then filter it down to his tongue so we can otherwise we will be all destroyed if not coming directly to us will will call a bench but Allah put it on his heart now also he was given that in in a dream in a row yeah she found cannot take a form of رسول الله صلى الله عليه وسلم so anybody sees the swa assalam and he knew that that's the swa assalam or somebody from the swa assalam or some said it's real it's حق nobody never thought most people when they see it first time when they wake up she found will come and tell him no that's not the swa assalam try to you know lie on him now and then رسول الله صلى الله عليه وسلم was given from الله الله told him that الله protects you from you and me so he used to have a he used to have guards and when الله revealed الله ياصم مكامل الناس الله protect you from you and me he went out to the all the guards said i don't need you go to your home الله خلاص اهما protection from Allah الله made his sweat and anything come from الله صلى الله عليه وسلم is is is the best thing from the smell from everything you think about it the صحابية i think umma iman or one of the صحابية she when رسول الله صلى الله عليه وسلم was asleep there is a sweat coming she will put uh take some of the sweat رسول الله صلى الله عليه وسلم wake up you what are you doing he said yeah رسول الله we meet our perfume a good perfume with your sweat صلى الله عليه وسلم and then his hand his touch there isn't anything soft like his hand his smell there is nothing smell like his smell صلى الله عليه وسلم he was given that if he pray or sitting it's like he's praying on standing doesn't matter as الله given this um زكاك الصدقه he and his family cannot get because this is the the زكاك this is the um the dirty of him and being in a wealth it's not given to him he was given شهاد he died as a Shahid from the poison that he got so it was on the day of his death that poison worked and his Shahid he's the only one who prayed after عصر we're not allowed to pray after عصر because he missed sunnah before عصر and then he he he he did this sunnah after عصر or whatever he did something he will keep in doing it so he will keep on doing you know this after عصر but we're not allowed to do this um there is a lot of other things الله will not um i'll not go through it but uh there's another 20 or 30 or he he hears things that we don't cannot hear he said i see what he don't see and i hear what i don't hear you know there is um i don't know who knows the stars that um people they see two or three stars in there you know three i think they say there is seven or more those of them will see all the stars that nobody can see and he see from distance like seeing from you know from in front of him now الله made all his صحابة just عدول الله made it الله choose the best heart after prophets to be the heart of his companions صلى الله عليه وسلم now he's the only one who have two قبلة بيت المقدس and you know مكة and and actually there's people who prayed تورك عاتو جرسلم and تورك عاتو مكة in the same farad سبحان الله also صلى الله عليه وسلم he will not lose his voodoo if he sleep deep sleeping that's all كراكترس فرس الله صلى الله عليه وسلم الله سبحانه وسلم the highest of all of this is there any questions any comments anything you like to say بسم الله forgive me صدي علي صدي علي should be here and he's killing the lecture here but this is end of time anybody have anything what's gonna do on صلى الله عليه وسلم so should we take like five minutes i see there's no questions go ahead خلالك yes so in in the farad you are not allowed only to say and you can say it out either three five you can do any number but three five seven and four outside you know the best to do this to sleep but if you want to do دعاء because the closest to Allah is in sujood so you can do in sujood دعاء in ruku you don't do you just do سبحانه وتعالي that's it نافي لا you do anything in sujood in ruku you just do this you cannot make according to our feeling that's what i know you cannot do دعاء after after you say before you mean سلاف you are recommended to do دعاء actually yeah not the gene the question is with رصام the heart taken away the the the the port of all the portion of the devil الشيطان the iblis الله order انظر to take it away from the heart before that he was his birth was mercy for every part you know but that one was taken away يعني he is رحمة للعالم just having رحمة to everybody around you i'll give you an example he said now we are here in رمضان and people doing yatikaf and so on there is a hadith amazing hadith he said if you walk to help one of your brother or sister is better than doing yatikaf 10 years can you imagine this in another hadith he said if you go to help your brother is better than doing one month's yatikaf in my message in the so the best thing is actually a read about his characteristic and see the way he things and try to imitate it imitate that شاء الله we'll have break five five minutes إن شاء الله سلام عليكم all sisters should be moving the the back and من will be coming in the front for after إن شاء الله okay people wants a break of five to ten minutes so we'll start at one of five إن شاء الله إن شاء الله إن شاء الله إن شاء الله إن شاء الله سلام عليكم السلام عليكم بسم الله الرحمن الرحيم لذا لقد نتحدث عن لماذا صلاة التسبيح رسول الله سبحانه وتعالى يجب أن تفعلها every day or once every week or once every month or once every year or once at least in your lifespan in your life سنفعل it tonight also صلاة التسبيح يفعل 300 times in four raka I mean every raka is 75 and the way we're going to do it is after saying الله أكبر we do دواعاتنا and then I say I start saying سبحانه وتعالى الحمد لله الله أكبر I'm going to say loud and be silent I'll do it 15 times and number 14 then number 15 I'm going to say it loud also سبحان الله الحمد لله الله أكبر and I'm going to read فاتحة and sura before ruku I'm going to say سبحانه وتعالى الله أكبر 10 times and then I go for ruku سبحانه وتعالى 3 times or 5, whatever and then I do 10 times سبحانه وتعالى الحمد لله but I'm going to say loud the first one and the last one we say سميع الله ربنا لك الحم also 10 times and then go such dark سبحانه وتعالى then 10 times between the two such that 10 times another such that 10 times this is 75 when I go الله أكبر again for second raka'a before saying فاتحة I'm going to say it 15 times then 10, 10, 10, 10 and I'll say it for تشهد and they do another 2 raka'a all 4 raka'a together okay so for you when you hear me saying سبحان الله الحمد لله the first one 15 times all the other is 10 times okay سبحانه وتعالى سبحانه وتعالى because people like كي حولوا will wait for 2, 2 minutes for people because they will we felt so I'll tell them about the today مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً, مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً مرحباً