Horizontal feed with VueJs and Sass | Sebastian Sulinski | Skillshare

Horizontal feed with VueJs and Sass

Sebastian Sulinski

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 39m)
    • 1. Set up

      9:08
    • 2. Feed html structure

      2:55
    • 3. Global styling

      8:31
    • 4. Feed styling (Part 1)

      9:46
    • 5. Feed styling (Part 2)

      10:58
    • 6. Vue template

      3:51
    • 7. Component properties

      8:48
    • 8. Getting feed items

      10:53
    • 9. Displaying items

      6:20
    • 10. Swapping items

      10:36
    • 11. Pause and Resume

      4:31
    • 12. Previous, next and play buttons

      12:39

About This Class

In this course we will build a horizontal news feed using VueJs and Sass. We'll compile our files with Webpack and Babel using laravel-mix package.

Transcripts

1. Set up: hi guys today we're going to work on a horizontal feet component with view Js. It will have a responsive layout. This is what it's going to look like on mobile and tablet. That's what is going to look like on the desktop. Our feet will have three elements heading their body, which will contain all of the items we going to scroll through and three buttons on the right hand side. When you move your mouse over the feet, the feed will pull scrolling once you move your mouse away, the automated scrolling resumes we have previous button, which, when clicked, will take us to the previous item and next button, which, when we click, will take us to the next item when we click either previous on next button. As you can see, the button in the middle has become enabled. This is because both of these battens disable automated scrolling, which can be resumed by clicking this baton in the middle. During this course, will make use off the Web buck module Bandler, which will allow us to Banda lower JavaScript files, including the view component as well as suss files which will contain our styling into the static assets that can be imported into the HTML file. We'll write our components using EC MMA script six, also known as ec Muskrat 2015. In other words, the latest version off JavaScript. In order for all the browsers to understand it will compile it. Using bobble compiler to install our JavaScript dependencies will make use off the NPM. If you have in gold node.js installed on your computer yet, please navigates to know J s dot orc and download and install the latest version of it. Configuring wept back might be quite challenging. So to make it easier will make use off the package called Lauraville Mix, which configures Web back with pre processors such as babble and Suss out of the box for us , providing an easy to use a p I. Let's navigates to N PMG is dot com, and within the find packages search field. Let's type lauraville hyphen mix. He returned. And as the first package written by Geoffrey Way, if you click on this one and to install it, what we need to do is to run this NPM install a lot of l hyphen mix, and we going to save its to our development dependencies. So if we open the terminal window and I'm within the directory the root off my project if I do l s you'll see There's Onley index dot html file, which contains the basic structure of the HTML document. So what I'm going to start with because I want to save my dependence is into the package that Jason file. Obviously, this file does not exist yet. So what I'm going to do is type echo, and in between a single double quotes. I'm going to put the set off Kelly brackets, then to angle brackets, right, Uncle brackets pointing to the fi cult package. Dr. Jason, if I heat return, you'll see if I do. L s now this package that Jason now exists within this project. So I can pays the command of copied from an PM and then art space to hyphens safe hyphen Death to save it to our development dependencies, heat return. And this will take a little Martin style eso I'm going to polls this video and I get back to you once oldest is done. Ok, so a lot of all makes has being installed successfully. We clear the screen commands K on a keyboard. Now, if we go back to our editor, you'll see that node modules has been added with all the dependencies. Then we have this packet, Jason, which we've created from within the terminal. But if he opened his final, you'll see that the death dependencies have been added together with our lot of all makes at the time of this recording versions, year 75 is the latest one. Okay, so we can close our package that Jason, go back to the browser. And if we scroll down and click on this on get help for the documentation, this will take us A to get help page for this package. Then click on the installation link. And if we scroll down, we don't want to use it with a lot of El. We are using this with a stand alone project. We scroll down, we need to copy finds from the set up directory to the root of our project. So if we copy this line, go back to the terminal pasted in heat return. This will copy to files. If we go back to the editor, you'll see two farms have been at it, which is where packed that conflict. O. J s and weapons dot mixed RGs where packed that conflict contains the weapon configuration . If we scroll down, you'll see quite a few things being leased It here one off them is the bubble load as well . Obviously we have style loader CSS load the HTML loader for images. We have another loader and so on. If we don't close this file and open Web PacTel mix and let's room off all these comments here Ah, now mix, we first require a lot of l makes associated with them mix variable here and then we call J s method as well. A SAS gs takes their file, Don't we want to compile, and then it saves it into this dissed directory. Then the same for SAS file and the destination. So, basically, this is the fire we want to process and the destination we want to save it. Now, we don't have our fans created yet, so I'm just going to quickly create two directors here. One will be S R C for source files and the other will be de east for distribution. Okay, so within the source, Director, I'm going to create one for JavaScript files, which is Js in one fall sass files or S C. S s. And here within the CSS director, I'm going to create the new suss file with the S CSS extension. If using sauce syntax in Agassi used the correct extension here, I'm going to be using s CSS syntax. So the name of the file is going to be up adult s CSS for hit on. Okay, here that are the file. For the time being, I'm just going to leave it like this. I just want the entry point basically for both JavaScript and CSS Far south file. If the javascript we also going to have up don't j Yes. This time I'm going to remove this comment. So if he are we going to amend it to source J s up Js And for a CSS is going to be s CSS up dot s CSS and destination within the destination. Director, I'm going to create again one for JavaScript files J s and the other one for C. S S files. So that's this. Let's quickly update this as well. So this one is going to go toe day east for its last issue J s for its lush Indian For this one, C s s for its lush. Okay, so our Web park mix is now also all updated. We can close this file if you go back to the browser And if we scroll down the right to the bottom here, NPM scripts. We need to copy all these scripts because we go into using different production in order to compile the files back to our editor package to Jason. And after our death, dependencies, comma and paste it all here. Okay, save it and close it. Our lot of little mix is now all set up. So the next package we need to install if we go back to the browser npm gs dot com And we are looking for a view package, just view. And if you click on the first item here, NPM install view and if we go back to the terminal pasted in make sure that we save it to our development Dependencies. So safe, hyphen deaf. He return and give it a few moments. View has now installed successfully. So command K to clear the screen. The next package we need to go back to the browser is going to be access. So free type Oxi s access will allow us to make Ajax colds from within our component. So if we run this NPM install axe? Yes. And again we want to save it to development dependencies. So hyphen hyphen, safe hyphen, deaf heat return and let it to install as well. And the last package of a clear the screen the last package don't we needs in order to ensure that Internet Explorer can understand our called is the bobble Poli feel if we navigate to and pm again and go for Bobbo Paul Lee feel there we go. So again Npm install bubble Poli feel if we go back to terminal, paste it in and again save hyphen deaf. He returned and wait for it to install. This has now finished as well. If we go back to our and it's a open are packaged Jason, you can see all these dependencies are listed under Dev dependencies so we can close this file and we are now ready to move to next video 2. Feed html structure: Okay, so now it's done to create our where we jets html structure. I'm going to open this index dot html and close the fire. Browse on the left. As you can see, this page contains only the basic structure of the HTML document we have doc type html had body talks. We have some met attacks, one for character said to the other one for the view port to ensure that on mobile devices our view is that 100% Then we have linked to Google phones. I'm going to be using robotic condensed and then we have front awesome for seven version. So if you obviously want to use thes as well, make sure that these are included. Okay, the first thing I'm going to do is to create a diff with the i d up. And this def will be the one that will associate our view Instance with Okay, now inside Off this up dif we're going to create the structure of our horizontal fit. We start with the dif with a class hori zone tall fit inside off this horizontal feed. If we're going to create one def with the class header and inside of this head at If we're going to put a spun with their head whatever head are we going to decide later on to put in here? Next? We're going to have diff with the class of body And this is where all our items will be placed within this body Dif we are going to create the dif within which we are going to have a list of items these items will be each one will be rubbed with their paragraph starting with uncle talk It's not here in its H ref and then title, then space and within the spun we are going to put the content off the of the given item. Then we are going to have dif with the class Kovar which is going to be the item that actually co overs defeat. Then there The item is being changed to the new one and a cover goes back to the right. Okay? After the body, we have buttons so dif with a class buttons And here we are going to have spun with the class previous and inside of this one. We're going to have I talked with the class F A f A angle left, which is a fond, awesome icon representing the left uncle Bracket Dan. Another button, which will be play. And this one will have f a play icon. And the last one will be next, which will have f a jungle right? And that's the entire structure of our feet. But if we obviously preview it now in the browser, refresh the Patriots seed. Obviously, all we get is unstylish structure off the document. So in the next video, we are going to start working on our stash it using sass. 3. Global styling: In a previous video, we've created the HTML structure for our horizontal feet widget. And in this video we're going to start creating the stash it for it. The first thing I'm going to do is to close this index dot html goto our source s CSS directory. And here I'm going to create another s CSS file. I'm going to call it underscore settings you don't have to use underscores. That's just my personal preference for anything that's going to be included within the app dot CSS. But it's entirely actually, if you don't want to use this on this car here, Okay, the first thing I'm going to do is to declare a few valuables which will store Kohler's waits, highs and some other data that we may reuse within our SAS files. The first variable will be white, and it will store Hexi decimal value for the white color So harsh F f f shorthand. Then we are going to create primary Koehler and this primary color I'm going to keep as a 26331 you can see on the left inside is this nice green color. Then I'm going to have secondary Coehlo which are set as F A five Deasy or seven, which is this nice orange. Then we are going to the Claverie able storing the color of the body background. So body ah, hyphen BG. And this will be for a for A for a dark gray body font. Color will be called body hyphen color and this one I'm going to set at wide, so I could either type it again. I can just reuse the variable, which we already declared, so it's going to be white. The next one will be feet height, which will start the height off the widget on the desktop device. And I wanted to be three r e m. Then we're going to have feet Bagram color. So BG and it's going to be dark and we go into dark and the body color so background body BG by 10%. So it's going to be 10% darker than the original body color. Then feet Koehler for the fund is going to be white. Then we're going to have feet, Uncle Koehler. So if we go back to our index dot html, you can see here. We've got this uncle. So what color. We are going to associate with it. And I'm going to use primary color for this, which is going to be this nice green. Okay, then we go to have feet header background, which will be secondary color this orange one den feet head. Their color font color will be feet Kohler, which is basically referring to this white color as well. And then we're going to have lift. We just separated with new line feet. Ah, Hyphen Barton hyphen by ground, which will be primary color again, this green one. This is for the buttons on the right hand side and then feet Barton color. And I wanted to be feet color again. This is pointing to the wide variable which is represented by the white collar. Okay, so these are all of the variables that I need for my sass files. Next thing I'm going to do is open our up dot sc assess and I'm going to import the settings farm. Now that I've got this settings far imported, the next day I'm going to do is to create a new director here called components. And this is what I'm going to keep all of my component files. So for the feed, I'm going to have horizontal feet components as well as the far for some global styling for things like body HTML uncle and so on. So let's just start with this one. The first file will be called underscored, General ah, dot s CSS. And within this far what? I'm going to start with his HTM l body and up. Dave, with the i d up here, I'm going to say that I want margin for all of these elements. Sets 20 I want parting for all of these elements. Also set to zero and then I want with to be 100% and height to be 100%. Okay, Next thing I want all of the elements as well as the pseudo before and after elements. I want all of them to have box sizing set to boarder box What that means. Box sizing set at border box means that if you have an element which has parting and has full weight, 100% it's parting will be deducted from the container with rather than expanded by its value. Okay, then we are going to set body on Lee and for body I want formed family to be set to Roboto Con densest after this. If that front isn't found, then I wanted this to be Helvetica nowhere. And then we have aereo and lastly sons Serif. If none of these phones is available, robotic condensed again Because if you open index dot html, you'll see that I'm important. Is Google phoned here, some specifying Google a family as robotic condensed. Next, we have body Bagram color which will use his body BG Very before then we have color which will set to body color variable. Then we have partying which will set at one r e m a top and bottom zero on left and right. And I know obviously here of used body with this declaration as well when we have parting sets 20 But the air was simply overwrite it righted and have to later on separate all the stocks to just have margin with and height. We just do it this way and then we overwrite it within the next declaration. Okay, After this, we are going to specify some starting for the uncle tax by default. I want to make sure that none of them has any underlined. So text decoration we going two sets to none and default color for the uncle are will set to primary color, which is this nice green. Then after the body, we are going to create some study. I'm just going to shift the apple. Anybody else I can see a little bit clear for the class raw, which will rub our horizontal feet, and we are going to specify with 800% and then we're going to say maximum with. However, we want no more than 70 r E m. So if we have mobile device, the role will feeling the entire screen. But if we on a desktop, make sure that it's no wider than 70 are aeons and one R E M is roughly about 16 pixels. If you're not from here with Ari ems yet, Okay, then margin. We're going to set zero from top and bottom auto from left and right, making sure done. This element that's going to reside within this raw elements will be sent it on a page. Then we have parting top zero bottom zero and then 08 r E m on left and right, so 0.8 rpm's left and right top and bottom Just zero. We don't want any party. Okay? And that's everything. Within this general dot s CSS file, I'm going to remove this redundant space, save the file, close it. And we can now import this far within our up dot s CSS file going to components directory. And there we have, General, as you can see, these files actually with the underscore, but sounds automatically knows that even if there is underscore, we just provide the name without it, and it knows which finally is going to be okay, So our Abdullah s CSS can be now be close as well as, well, a settings The S E s s Let's open index dot html and rub our horizontal feet with the dif with the class raw. So we know that these defense going to be centered on the page and it's not going to be wider than this. 70 Ari ems on their stop. Okay, now that we wrapped it, it's already for the next video 4. Feed styling (Part 1): Okay, so let's create a new sauce file within the components territory. We are going to call it underscore horizontal feet, and this is the founder will contain all of the styling for our widget. We're going to start with horizontal feet, class and background color. We're going to set to whatever associated with the feet BG variable, then a line height. We're going to set two feet height and then we're going to have overflow, which we want to make sure that it's hidden. So if anything goes outside of this container for any reason, we wanted to be hidden. We don't want anything that's inside of the horizontal feet container to be shown outside of it. Okay, then we are going to put Heather Body as well as Barton's. So we go into groups. I'm starting for them here. Formed size. We want to set toe one R e m. Then we're going to set white space to know Rupp. We don't want any text to rub on the new line. We want all tax to be just in one line. If it's longer than then, it can fit within the container. It has to go outside of it so we don't want wrapping off any kind. Then for all of these elements, plus any potential spun talks inside of them, we want to make sure that color is being set too, wherever we associated with the feet color. And we may remember that obviously we've associated wide color with it. Okay? No, Outside of this, we are going for a header and body now only without batons. So head and body, I want to make sure that they're parting its top end bottom sets 20 But on the left and right hand side, we have zero point and eight r e m and then just heather. I want to make sure dot Koller, we have no columns color. We have sets two feet heather color and that Bagram color is sets two feet hat B g, which contains they call it that we want to associate with this Heather. Okay, next thing will be the body container. So body. And here I'm going to start. And I'm just going to create a few new line sick and see things that are alert to beat batter. There we go. We start with the with the with off the body. I wants to be set 200% than overflow. I want hidden as well because these items within the body may go wide it in the body container. So if they go outside of it, I don't want to show it. I want to hide it. Then we go for the position. I want to make sure that it's relative. Then we go for paragraph inside of this body which will display known by default to make sure that none of these items displayed margin will set to zero. We also said parting fall off them to zero and then the active one. The paragraph with the class active will be displayed so display block. But all of the other ones display non Onley d active will be displayed because what's going to happen when we first load this widget? The first item on Lee will be displayed. So this one with the class active. Then we swipe, discover with the background color. On top of it, we swap the paragraph so we remove the class active from the active paragraph and move it to the next one. Then we reveal this new paragraph so basically sliding discover to the buck to the right, so only the one with the active class will be visible. Then we go for the uncle talk within this paragraph, and I want to make sure that the color off this uncle Talk s wherever was associated with feet. Encore! Kohler! Okay. And now we're going to play with this. Colvin. So whatever Kovar element we have inside of this body free, open our index dot html If you look at the body, so have body within that. If we have all of the items, this paragraphs and then we have this cover, okay? And this is why a we actually specified position here for the body as relative. I'm going to collapse this paragraph so I have a little more space, and now I'm going to say Kovar and fork over. What I would like to have is to have a with off on Lee 1.2 r e m. By default. So it sits on the right hand side is not quiet, invisible. It takes a little bit of a space. This 1.2 r e m. But it's doesn't feel in the whole body because otherwise it would cover. Obviously, the content of it, then height. I would like to have it 100%. I would like to have text aligned to the left and then set index. I'd like to set to 10. So it's actually overlapping the content off the body. Whatever. Whatever is inside of this dif so discover will be on top off this dif with all the items. Okay. And now that we have that index, we're going to set its position toe absolute. We have relative on the body, so it will sit arts it Absolutely. Within these bodies. Not gonna go outside of the body. Discover was sitting inside of the body. Absolutely. And we wanted to be positioned to top zero and right zero as well. Okay. And then we going to art transition so strung position and to make position and to make sure that all other browses are culvert, make sure they use Web kit moss m s off a prize Well, and otherwise you can use justice transition property, which works in all modern browses. I'm going to set it to also all properties and the time I want to set to 0.3 seconds So whatever transition we're going to apply wherever we are going to be doing with this element, it should happen within three milliseconds, Okay? And then after pseudo element after discover. So we've got this cover, and then the pseudo after inside of it will have content off this underscore. You may remember this blinking underscore still dishes where this underscore actually is coming from. So the content underscore and then display I would like to display as block and an animation. I would like to make sure that this courser is actually blinking. So what we're going to do, I'm going to keep this animation here. But before we type in anything, let's create this animation using C. S s key frames. So at baff r wear horizontal feet, I'm going to create key frames, and I'm going to call it blinking Corso and he I'm going to start at 0%. So it 0%. I want to make sure that capacity off this blinking cursor is zero. Then, at 50% I would like capacity to be 100% which is basically one it's not 100% is just one, and then at 100% I wanted to go back to a positive e zero and what it does. At zero, we have zero capacity. At 50 we have one opacity. At 100. We go back to zero opacity because 100 after 100 with straight away go to zero. So obviously we need to make sure that these both are marching. So we gonna have blinking courser at the same interval. Okay, so we have this blinking cursor key frames. We can now scroll down to our covers after pseudo element and we want applied his blinking coarser to its animation. So animation will be blamed. King cool, sir. And we wanted to run it 0.5 seconds, which is five milliseconds. And then we want to run it infinitely. So in FY knit, without this infinite, it would only run once and obviously would be hidden because it starts with a paucity zero and ends at capacity zero. So with infinite is going to start blinking all the time. Okay. If we know collapse, discover here after discover I want to apply swapping class to our bodies. So if we are going to have swapping class associate with two piece obviously associate with our body elements. We have body plus swapping, then what we want to do. We want our Kovar to be displayed at 100% with so with 100% and then on the left hand side to make sure that this after pseudo element doesn't just started their head on the left. We want to make sure that we have some parting is that they're so we're going to art some parting left, and we're going to set it to 0.8 r e m, which is the default parting. If we scroll up, you'll see that the body and Heather has this sort off partner. There we go here, we've got 0.8 r e m. So we want to make sure that this blinking courses doesn't go closer to the header than the 0.8 r E. M. On the left hand side. 5. Feed styling (Part 2): OK, now it's time to have a look at the buttons, so I'm going to go to the body, collapse it. And after these body definitions, we're going to create one for buttons or buttons and for the buttons. I want to make sure the background color is set to feet Baton BG, which was this nice green color and then for the pseudo before and after so before. And let's just coma here and after we won't display, look and then content nothing and clear both. What this will do is to make sure that the container which were contained this spans these battens, which will have this batons class associated with it. It's always at the same height as the buttons. Otherwise it could collapse up, and this bargain color wouldn't be visible. So we have to apply this display block content and clear both to the pseudo before and after off this wrapping container. Okay, so within these buttons, we have Barton with the previous class. We have Barton with that play class, and we have button with next class and let's scroll up a little bit. And here I want to make sure that these buttons are displayed as block. I want to make sure that they're Kooser is said to pointer. So it's this clickable icon on the coarser, and then we have with sets to 33.333%. And I'm doing this this way because we are building our CSS using mobile first approach. So on mobile, these three buttons have to be equal with filling up the entire with off the container. The hide off the buttons should be the same as the overall height off the feet, so feet hide, then four their text align. We want the icons within these buttons to be lines to the center, so text a lot center. Then we are going to make sure that the color much is the color that we specified on associated with defeat Barton Kohler valuable and then flowed these buttons to the left to make sure that each one is displayed after the other in one line. Okay, so if we save it, then are the only two buttons that we want to apply the border to will be the previous and then play button, and these two buttons should have this border on the right hand sides of board there, right, and it's going to be sold it one pixel and we will simply lighten the feet button Bagram color 7% If you think that it's not going to be visible enough than in creates this lightning argument here to make it higher than, obviously is going to be lighter. Okay, so that's for the previous and play, because previous goes first play goes second. Obviously, the last button, which is this next, doesn't need the board on the right hand side because, right, Eddie and so we don't need the border for that one. Then if we go and specify some stunning for play button on the so play, and here we are going to make sure that it's only applying to the Barton play when it does not have class active associated with it. So if we have play active, these declarations here will not apply. Okay, so capacity we want to set to 0.5 and then coarser. I want to set to default so unclean Kable like Okay, so now I think it's a good time to actually trying to styling, so what we need to do first is open our up Don't s CSS file and import this horizontal feet again. We go into components and then horizontal fit saving Close this file. We need to add the newly generated CSS file which were will generate in just a moment to our index of the shame Alfonso Link. Then we linking with the A treff pointing to current director than distribution. C S s up. Don't see assess. Obviously, this fall does not exist yet. That's why it's highlighting it straight away. Then the rail. We're going to specify s style shit case safe and close this index dot html file. Now if we go to the terminal and now we need to run n p m run deaf, he return. This will generate our files. If we open distribution directory, see us. As you can see, we have up don't see assess And it's also added apart from the fact that it combined two off, this satisfies general horizontal feet. It also added the variation with the web kit off the key frames which was specified in our horizontal feed right to the top. You can see here we only have one version, but he also created the Web kit one for this blinking coarser. And if we closed this filed in up dot gs here, as you can see, where packages are it its own scout folding just a few functions of our tables and so on. So close this file. Now what we can do is open the Web browser, and if we refresh the page and there we go, that's our styling so far. So we've got the head and we have our Barton's with this thing. Lines only for the previous and play button icons are inside as well as they were upset, background color and so on. Okay, so that's the basics. This will work just fine with the mobile. But if we go back and I will try and address size this browser window, you'll see that when we actually get to the desktop, we still have exactly, say, instruction. That's not quiet. What we want to have, we want to have this head on the left. We want to have body in the center, and then these three buttons right on the right hand side. So let's work with our styling to make this happen. If I just move it across here. Okay, let's go right to the bottom. Off this farm on what I'm going to do here. I'm going to start with the media, require some media and I'm going to see old devices and make sure that minimum with is 10 to 4 pixels. So that's the minimum screen with dots at this styling will apply toe anything below this. It's considered as Tablet Mobile and so obviously may not really be Tablet Mobile yet at this point, but that's what I'm going to set. It s okay, so horizontal feed again. And this time we're going to have display we going to use flags box. So it's going to be flex, and I want all elements to stretch from top to bottoms off one container. One column, let's say, has more content than the other. Then I want its background to be exactly same height as all the atacms. So a line items for this purpose and we going to say stretch, then we have position said to relative, and then we gonna go for head there and Heather will have display we go into displayed as in line block because I don't want to feel the entire with off the container. Now I need a block, but I need to make sure that the with off this block is only as much as there is a content in it. So we have done for this Heather, then for the body. What we going to say? We're going to say that I want parting right this time to be a little bit more. We want this to be nine r e m. And why do I want this to be nine r e m? Because my buttons now in Destin view they will have each with off. Three are aeons altogether will give us nine r e m. We need to portion because these buttons will use absolute positioning. That's why we have this position relative on the main container so these buttons can actually go are absolutely to the right hand side. Then we need to make sure that we have enough room there on the bodies of that. The content doesn't go over the buttons. No, we're going to art standing for the Kovar and Kovar. We want to make sure that the with this time accommodates this nine Ari ems. So if we just check what it was originally was? Crawl up. We have our work over here. Waas 1.2. So let's at 1.2 to 9 Ari EMS, we scroll down. Oh, so 1.2 a plus nine. It's going to give us 10.2 ari EMS and doubts it for the body and a cover. Now we have buttons, so we need to restyle buttons a little bit. So buttons we are going to display them s flex as well. We are going to give them absolute positioning. So a position absolute. We are going to make sure that they are right at the top off the continent, right on the right and site. So top and right zero and then set index. It's going to be tend to make sure that they are over the content if the content wants to go behind them. Okay, then previous play as well as next. Buttons Next, and these 23 buttons will have with off. Three are yams. And that's old. I was styling. So if we know run NPM run deaf again and once it's all done, if we open our browser, refresh the page nothing changes on mobile. But if we resize the browser window, you can see our blinking coursers here. Our head is on the left. We obviously don't have any content yet because they only content which we put in. It doesn't have this active class. The buttons on the right are also display nicely. So let's go back to our index dot html and let's change despite a graph by adding the class active to it and let's see what's going to change. You feel afraid the page now. And as you can see, our content is now visible within the body off dis feet, for the only thing we need to do in order to make sure that their feed item is visible is to apply the active class to it. Okay, so that's everything in terms of its styling for our we jet. In the next video, we are going to start building our view component 6. Vue template: So now it's time to start working in our view component. If we open source J yes, and our up togs We're going to start by importing barbell poli feel to ensure that Internet Explorer can understand our coat than import view from view. And then let's create new instance off views on new view, and we are going to bind it to the element with the I d up. And if we open index dot html, you may remember everything that we pulled the entire template is Rupp with this dif with the idea of up. Okay, so now we've got a new instance off view. Next thing we're going to do is to art window and then ax es we going to have access to the global window objects so require and we're going to require axis this way will have access available in a global scope, meaning that we can automatically use it from within the component later on when we need to make any Ajax calls. Okay, so way up dot Js is nearly finished because next thing we need to do is to register our new component. So we're going to start with view then component. The idea of this company will be Horie's zone tall feet, and this is what we going to use as attack for this component. Then we require it from within The director. We don't have yet components, and it's going to be called Hori Zone Tall feet, adult view and semicolon it yet. And that's all we need to do inside of the up dog GS. Now let's create this components directory and inside of this directory, going to create this new view file called Hori Zone Tall feet dot view. Okay. Hey, are we going to start with the template section, which is where our HTML template is going to be? Then we're going to have scripts section as well. So script stuck and we're going to start but exporting default module so export default and set off curly brackets semicolon at the end. Now, if we go back to index dot html and cut the entire horizontal feet structure, so starting with the for the class horizontal feet, together with its closing dif, if we just cut it and paste it within a template, and if we now go back to our index dot html, let's now put Hori Zon tal fit tax instead off this entire structure So if we know art our main obvious file in the food Teso script source and we go to desist then j s up Don't gs and if we compile everything by running NPM run death again you'll see that if we now go to our dissed director J s and open our up Js file, you'll see we have lots more cold now. Obviously, the view has been added. The access has been added as well as this a bubble poli feel. And on top of this, obviously our up jay s content including certainly this one this one including obviously our horizontal fit. Okay, now if we preview our index dot html in a browser and there we go. As you can see, nothing has changed. But if we preview source of our page, you'll see that all we have here is just this horizontal feet component. These tax, nothing else is displaced. Everything else has been extracted to this view component. Okay, so in the next video, we're going to start adding some functionality to our component 7. Component properties: in a previous video of created a scuff folding for our horizontal feet components with copied the entire structure, the HTML structure of our feet and pasted it within the component wrapped with the template tax. Now our script talks on Lee Export Default module, but there's nothing inside of it yet. If we go to inject the HTML, you'll see that we replace the entire template with just horizontal feedstocks. In this video, we're going to learn how we can feed data into our component. And to do this, we're going to use props on our object. So when we exporting this object this component, the first thing we're going to ask for is going to be some properties. And in order to do it, we used this props keyword colon and then set off Kelly brackets. Let's quickly have a look at our templates what sort of data we might need for our feet. First of all, we definitely are going to need some string for this header. We will need all of the records that we want to scroll through, as well as the duration off each item. In other words, how long is the item going to be visible until it switches to another one. Okay, so let's go back to our component here, the script section and for the properties, we're going to start with duration, so duration and duration will be off the type number. We want this in merely seconds. This property will not be required. So I'm going to set required sets to false because we are going to specify all default value as 7000 milliseconds, which will give us seven seconds of by default. Each item will stay for seven seconds before it's being changed to the next one. Okay, so that the duration next one will be head and I'm going to scroll up a little bit. So had there and had a will be off the type string and then it will be required. So required said too true. Then the last item will be collection. I'm going to call it and what sort off data time this collection may represent. Well, we can eat their past data as an array directly to the component. All we may pass a string representing the your eye that the end point to which we want the components to make a call in order to obtain the records. So we're going to type type, and then we're going to specify an array off types which will be either array, all string, and then we're going to set it as required, so required. Sure. Okay, now, if we compile our component and all the other assets once it's all done. If we preview everything in a browser and open the developer tools so more tools, developer tools. There we go. And if I open console after refreshing, you'll see that we obviously have some warnings here. First of all, it tells us that required properties missing, which is the head there. That's the 1st 1 and the other one tells us that we missing their property collection. It doesn't squeak about the duration because duration is not required and its hazards default value associated with it. Okay, so let's go back to our index dot html and for this horizontal feet talk, we are going to start with the head there. I'm going to say street needs to be a string, so we need to put single quotes in between these double quotes and in between the single quotes we're going to say breaking news, for instance. Now, if we save it, go back to the browser, refresh the page and you can see that this first warning is now gone. We only have this one for the collection and for the collection. I'm going to binds again, Kahlan and Collection and for the collection. I'm just going to pass an empty ray and let's quickly see in a browser. If this warning is gonna got obviously sorry. Before we actually do this, we need to compile everything again. So let's just quickly run NPM run death. And once it's all done, if we preview everything at browser, refresh the page. And as you can see, all warnings are now gone. We obviously didn't pass any records. We only pass an empty array, but it's what this component is requiring. It just say, is that we want and the ray or a string. So if we were to replace this array with Justin empty string and if we now compile everything again, so NPM run deaf and if we know, preview it in a browser, refresh the page, you can see the air does not show up. It doesn't matter if it's empty string or array as long as it's the right data type. Now, you might have noticed that I've used dynamic properties if you're not from there with view dynamic properties of the ones which allow you to pass data that when changes outside of the component, it automatically update inside of the components. So if I waas to have another component which wraps this horizontal feet and something with this within this main component has changed data that is being passed as a property to this child component is horizontal feet. This data will automatically This change would automatically be reflected within this horizontal feet. We could also use static properties by removing this column and the begin and by the wake, dynamic properties can also be written as v Bind column and then name off the property. But personally, I prefer to keep it short. So I'm going to remove this V bind Now, Head There, in fact, could remain without this colony. The beginning could be just a static property, in which case we can remove the single quote wrapping this string here now for the collection. If it was only to be a u. R. I the end point which we want to call in order to obtain the data. Then we could also make it a static one. But because we going to accept two different data times, one of which will be an array. We going to use this column here because Ray would be automatically converted into a string Static properties are Onley representing strings. The same would apply for the duration. If you want to pass the duration as a number, it would be converted into a string. So we would have to also use dynamic property binding here. So for the head, I'm going to keep it as a static property, which is going to represent a string. But for the collection en duration, which I'm going to actually art, I'm going to keep both of these as dynamic ones. So do duration. We going to set it is, let's say, 5000 merely seconds, making its five seconds OK, if we preview everything in the browser after we've compile it, some just running NPM Ron Dev again and then if we just go to the browser quickly refresh the page. Everything should still work just fine as against FC head is still on. Lee fetched from within the template. We haven't actually replaced anything. Even though we are passing data to other component now, our head a still remains the same. But if we want to change it now, before we actually have the next video, let's just quickly do it from within a template. Now I'm going to remove a days this heather here, which is within the span tax, and I'm going to use a V text directive here, and I'm going to say, Heather, which is going to point directly to this property. So we are using this property directly within the template. Now we're now, If you save it again, we need so compile everything. So if Iran, it's and then if we preview everything in that browser just a few seconds, there we go. If we refresh the page now, you'll see our header is now replaced with what we passed through as a property. Now, before we move to next video, let's quickly install a view extension for Google Crump. So we go into mortals extensions and let's scroll down, get more extensions, and I'm going to search for view, heat return and what we need is this view. Jay s death tolls added to Crumb art extension, and now we have it available for later on. Okay, We're going to be using this extension because it will allow us, if we know open, actually deaf tools. If I just go to mortals Death developer tools at refresh the page. And as you can see now, it's automatically activated. If I go here, you can see we have root of our document. And then we have this horizontal feet and it tells us what properties we have and what values are associated with these properties so it can see collections. Empty duration is set to 5000 and Heather is breaking news, which is exactly what we passed through from our index dot html. And these things will change dynamically when we actually going to be building our component. You will see later on. Okay, let's move the next video 8. Getting feed items: back in our way. Horizontal fit, component. If we scroll down and after our props property, if we aren't a method called data and this data method will return an object and within this object, we will have our properties for this given component. And the 1st 1 we are going to have is going to be called items and it's going to be over the rate type. It will contain all of the items that we are going to be looking through. Then we're going to have marks property set to zero and marks property will start the number off I tense and that we want to scroll through minus one. And this is because a race are zero index, meaning that they're starting from zero rather than from one. So having the length off the array save, we have 10 items that would return 10 and then obviously we need to duct want to make sure that we're starting from zero. And when we are going to be swapping the items here within this body container then will be using actually the index at which they are actually within the collection. So that's why we're going to start at zero and maximum will be zero to start with. In case we don't have any items to look through. Then the next property will be show and it's going to be set to false by default. And now if we scroll up to our template, what I'm going to do here is I'm going to use V if and then show property. So if this show property is set to true, then we are going to show this horizontal fit. Otherwise, we are not going to show it at all. And by default, we set in this to false because first, we're going to check. Are there any items in our collection? Is there anything to look through? If no, that stand in stage falls and obviously hide defeat, otherwise we're going to change it to true, at which point defeat will be visible. So now let's are mounted methods and this method is called once our instance has been mounted to the element within the dome. In other words, when our component is actually ready to be rendered, okay, I'm going to start with if this duration which is one off the properties off this component is less or equal 2000. Then where we going to do is throw new error. And in this area, we're going to say duration must the higher than 2000. And we doing this check because we're going to use set interval later on. And if this duration would be short, equal to the duration that is used for the interval, then we would run into a problems where our feet just goes mark completely. So that's why we doing this check for So whenever we going to be are being this horizontal feeds to our page, we need to make sure that the duration is at least 2000 and one merely seconds otherwise is just going to throw this air. Okay, so we are going to now check if type off and we're going for this collection property triple equal string. So if it's a string, we know that's going to be a your eye, some end point that we need to call otherwise, what we are going to do simply associate this collection with this items because we know that in that case is going to be in the race. So items ready to be processed so this call election. And after this we are going to call the method which will art in just a moment. We'll call it any sheer lies. And if we scroll down now, after mounted, we are going to art methods property and here we're going to add this initialize method. So you need she'll lies, okay. And we go to start by checking If this items dot length triple equal symbol, comparing with zero, which means there are no items, then what we are going to do is simply return Nothing, meaning terminating this method. So it doesn't go any further than this. Otherwise, what we going to do is said this marks, we're going to set to this items length minus one. As you may remember, just to make sure that we are working with the correct indexes, our air a start from zero. So we need to get the total number of items and deduct one from it. So the last item in our least will have index off total number of my items minus one. So if we have 10 attempts, it will be nine because we start from zero rather than from one. Okay, and then after this marks, We're going to set this show to true because we want to show the feet. If there are items in a collection and right after this, we're going to make culture another method, this swap, and we're going to leave the implementation of this methods for a little bit later on. But for the time being, let's just have the methods stop. Okay, Now, let's have a look at this option. When we actually passing through a string representing the end point down, we need to call. So if the collection is a string rather than every, what we are going to do is to use access and I'm going to call it on the global window objects a window den, Oxy s And on this axis, we're going to call method get and we pass this collection which will contain a string representing this endpoint. And then if it was successful, then we're going to run then methods. If it felt for any reason, we're going to call catch method. And now, for then we are going to delegate it to another method called fetch success. So this fetch success and for catch, we are going to delegate it to this fetch era and let's create both of these methods. I'm going to out them right after this initialize 1st 1 will be fetched. Success. I'm just going to copy this name and paste he undergoes was the 1st 1 and the 2nd 1 is fetch a row. So it's quickly out. The methods stop as well, and let's work on the implementation off this man. It's so success will take response as argument which will be returned from this age at school and here we are going to do this. Items equals response. Full stop data because response will contain this data index, which will contain whatever our endpoint is going to return back in adjacent format. Then we are also going to call this initialize method to make sure that everything that we've done in this l statement is also being processed. So downs this successful response handled now for the era. We are going to get error as an argument and what we going to do here simply throw new era and we paused this error through as an argument and that's all for fetching data using this access get method. So if we know, compile everything again by running NPM run deaf. And if we open our while, this is compiling. If we open our index of HTML and if we have a look at our collection property, you'll see that we Onley pass an empty string. So what should happen now if we go back to the browser now that everything has been compiled and again I'm going to open developer tools and we are going to look at the network when I'm refreshing the page and I only want to see Ajax requests X, h r. And if we hit refresh, you'll see this skull has been executed, and it's obviously calling the same location as the page from which we are making this goal . So what we are getting in response is just the HTML version off our page. If we open view council, you will see that items now contain this HTML structure, which isn't quite what we after and have a look at. This marks its 722 items. Apparently, that's just because obviously, the four months off the items is invited. Okay, So if we go back to our at its on what we are going to do within this horizontal feet. Before we make this call, we are going to check if this string is empty. But rather than doing all this from within this block, I'm going to count this exercise block here and I'm going to after the initialized. I'm going to art another method called get attempts. And I'm going to paste it here in a coma after this. Get items methods about before I'm going to make this. Cole, I'm going to check if this collection triple equal symbol, empty string, then I'm going to throw an errors. Throw new error, and I'm going to say in volleyed and points There we go. And now from within this if statement, I can just make call to this methods of this Get I temps. And if we know, compile everything again. So Ron mpm Ron deaf. And if we preview everything in a browser once oldest has finished that we go. If we refresh the page now, before we do this, let's go to the console. You'll see we have involved endpoint. Now, because of the hour, endpoint is now empty. The stream with pasta dough is empty. Doesn't contain any end point if we were to call, for instance, within the current Dodges a full stop four slash data that Jason and I'm going to quickly create this file here. So let's just create data that Jason and let's just return an empty array for the time being. And if we run the same thing, refresh and you can see the areas going because now the file exists. We passed something through this collection property, and it is a valid string, which represents the endpoint, which could be called if we know go back to the browser. Let's see the network Top data Jason and response is an empty array. Now you have probably noticed doubt We don't see our feed on a page anymore. And this is because if we go back to the view console, you'll see that show property is set to false. This is because our items property doesn't contain any items. The same would happen if I wants to pass an empty ray here directly, associate it with our collection property. If we go back to the browser, refresh the page exactly same result we don't see defeat. The show property sets to false our items, collections empty. And if we go to the network this time of is if we have in the ray, we don't make any Ajax cold. And if we check elements, you'll see that what we get is justice. Placeholder doesn't even display the structure off the feet this time. 9. Displaying items: in the previous video, we've created a mechanism which allows us to load the items into our component. But obviously we didn't pass any date are. So far, we only passed an empty array. Let's go back to the editor. And I've already created structure for the data that wants to inject into my component. It will be an array, so obviously we need to wrap it within their square brackets. And then each item is rubbed with a set of curly brackets. Items should have a treff title and body. Please Remember them. These items have to be ramped with a double, not a single double quotes, because Jason does not recognize single quotes. So if you want to make sure that everything works fine when you are using Jason file police make sure they use double quotes. Okay, So, as you can see, we have three items, if you would like to add them now, police posed this video update your data that Jason file and resumed this video when you already Okay, so now I take your data. Jason, file contains some data that you want to inject into your component. Now, if we go back, we can close this fine for now if we go back to our index dot html and let's replace this empty array with their string. So we need to put two single quotes in between those two double quotes and specify the path to the father. We want a lot which is obviously full stop for a slash then detente thought. Jason, if we now save it and preview our files in the browser, refresh the page and you can see now we can see defeat. We cannot see any items, but we can see the feet. If we click on the horizontal feet under the view Council, you can see that our items property now contains three items each one with body a trip entitle. So now we've load the data successfully to our component. If you go back to the editor, what do we need to do in order to show the first item? At the moment, none of these items is actually within this body container. And this is because we haven't adit. It's yet. We only have this paragraph placeholder. So what we need to do is to look through these items. Property. If you scroll down you can see we have this items property year. We need to look through all these items and then all these items will be added to the body . So how are we going to do? Is we're going to use a V hyphen. Four directive and here I'm going to use a bracket. I'm going to say that I want Itim and its index so item comma index in items property. So the next thing we need to do is for this a talk. We are going to convert this a trip, our tribute to the dynamic attribute by using the colon in front of it and we're going to replace its value with item dot age ref, which is corresponding to if we open our data, Jason to the A trip index, then for the title, the same thing we are going to rather than having this title directly in between the opening and closing a tax, what we are going to do issues Another directive called V hyphen text. And this is where we're going to specify what should be placed within the opening closing Uncle talk. And here we're going to use item, adult title and again that's corresponding to their I've been dated adjacent to the title index for the given item, and then we also have body. So if we now go back to our horizontal feet, the last thing that we need is for the Spahn talk to contain the body off this item. And again, we're going to use V text directive and use item full stop body. Now, if you want to preview everything in browser, we should have all three items within this body contained, obviously with rapt with his dif. So if we open our terminal and Ron NPM run deaf if wait for everything to compile and there we go if we go back to their browser, If we navigates to the elements, you can see the nobody has this dif with three tax inside of it. If I just expanded, you'll see that they they contain exactly what we've put in our data that Jason fights. All these items are now displayed within the structure of our page. Now, as you can still see, we can't see any item being displayed within this container for our items. This body containing this is because none of these items has active class associated with it. Let's go back to our editor and fix this. So the first thing I'm going to do I'm just going to close this index dot html file. The one thing that I want to art to our paragraph is day class binding. You can again use this either with Colin at the beginning. All usvi bind and then class obviously doing this this way. But that's the shortcut, and I intends to use it this way. Okay, so what I'm going to do is art active class and we are going to pass index off the given item through as an argument to this method index. And now, if we scroll down to our methods section right after the swap, I'm going to create a new method called Active Class which will take this index through as an argument. And now I'm going to return an object. And if we scroll down quickly, object which will contain name of the class that I want to associate with the given element that Cole's this active classmethod and the name of the class will be active and this class active will only be returned from within this method when our index marches so triple equal symbol, internal property. This current we don't have this property yet, so it's quickly our it's our data off the show we're going to set current and current by default will be associating with zero, which means first item in our collection. So if we now save it and if we go to the terminal, compile everything. And if we preview everything in a browse again, let's refresh the page and you can see the first item is now showing within the body off our feet. And if you have a look at the structure of our feed now, he can see this first paragraph has distractive class associated with it. So that's it in this video. In the next video, we going to tackle the swap method which is responsible for Kovar in the content, replacing the item and sliding the cover it back to the right, revealing the next item in the collection 10. Swapping items: in his video. We are going to work with our swap methods which will allow us to swap items off our feet. So the first thing I'm going to do is to up three new properties. We scroll up to our data. We are going to art three new items first, well will be called Interval which will be set to know by default. Then we are going to have posed set to falls, indicating whether the feet has been posed by clicking either previous or next button. Then we're going to have swapping property which will also be set to false by default. Now, if we scroll down back to our swap methods and let's actually move this active class B for this swap method because all the other methods will follow after this one again, I'm going to close the file browser on the left hand side and from within the swap method, I'm going to start with this interval equals window set interval and it takes that Colback is the first argument. And a second argument will represent the duration which has bean injected to this component using the properties. So this Jule rations as you may remember if we open the file browser fine. Just open index up. Html the duration. We've said to five seconds of 5000 milliseconds. You can obviously change it whenever you want, but by default, if we scroll up, if we look at the props, duration by default is seven seconds. Okay? And I'm going to close that far. Browse and left again. The set interval function creates an indefinite look, meaning that it will look all the time until you call clear interval function on it on its instance. Obviously, that's why we associating it with this this interval. So later on, we can just clear it and stop this alterations. Okay, Now it takes first argument, which is what we want to happen with each iteration. And then how long should it take before the next iteration should take place? In other words, the delay between the iterations. So what I want to happen with each iteration. First of all, I'm going to check if our component hasn't been pulsed. So I'm going to check if and I'm going to use the opposites. I'm going to check. If it's not pulse off this balls, then I'm going to call this next slight method. And let's quickly aren't this method stop after the swaps on next slide? And let's just leave it like this one out. No. One problem that we going to be facing here is that we are referring to these methods using this cured and because we are calling it from within disclosure, this anonymous function which is rubbed with a set interval, it does not refer to the same scope, which means in order for us to be able to use this key words and refer to the items off our components, we need to bind this instance to disclosure. So what we going to do after the closing curly bracket for this anonymous function, we are going to use a full stop bind, and then we pass this to it, so it passes instance of itself so we can refer to all these methods using this cured within disclosure. So that's our swap method completed. So once again, what it will do with each reiteration, it will check if our component hasn't been posed and if it hasn't, then it will go to the next slight. And now, from within the next slight, we are going to start with setting this swapping to true, indicating that we want to swap item for the new one and then we are going to use window set time, Out said Time Out works in a similar way that said Interval Dance. The only difference is that all nude runs once set interval creates an indefinite loop where set time out will execute the function disclosure after specified number off seconds . So we are going to start with the function again this closure and we wanted to be executed after one second. So when this next slide Methodist called, we're going to change the swapping to chew, wait one second and then execute what, inside of disclosure and inside of disclosure. What I'm going to do is do this current and I'm going to associate it with a new method cold next. So this next and let's quickly are the methods stop so next and we'll deal with this method in just a moment again. We are using disk cured here, referring to the internal properties and method off our component. But we are within the closure which is inside of this set time also, obviously we don't have access to this sculpt again. We need to use, bind and pass instance off this component to this bind method so we can actually refer to this properties and methods on our component instance. Okay, so we've got current sets to the next item than this swapping will set to false. So we can move this Kovar back to the right when we set swapping to true Kovar. Well, Kovar, the current item, when we change it to false it will go back to the right, revealing the new item. So from within the next method, we need to resend the index off the item that we want to show next. Because we are. So she aging it with this current property. So the first thing I'm going to do is check if this current triple equal symbol this marks , then we're going to return zero. And what this does it checks if current index equals the maximum index? Because marks will represent the length off our items array. Meaning how many items there are minus one because we obviously using array starting from zero. So if we have 10 items, it needs to start from zero. It will indicate that the last item is ninth items. So if the current item is this nine item, for instance, if we talking about sent items in a collection, then we want to display the first item after this last one. That's why we returning Index zero starting from the beginning. Otherwise we'll be going to return is going to be this current plus one. So if we are on item three, we want to goto item four. So we just art one to the current index. So that will associate this value returned from this next method with the current property changing the ICT and behind the scenes. Okay, So if we know Ron, our NPM run, they have to compile the files. And once everything's being done, if we go back to the browse, their refresh the page and if you go to the view console, click on a horizontal feet, you'll see we have current sets 20 But have a look at the feet. There we go. It's changed their current set to one, and again we're waiting five seconds. That will change to two and so enough to to because we only have three items that should go back to zero, and it does. You can see these items are changing, but our covert doesn't cover them to swap the items behind the Kovar and then reveal them. So if we go back to our editor, what I'm going to do is to go up to our data. And after the data, I'm going to add another method called computed. It's actually a property which will contain computed properties for our component. What computers properties are there like standard properties like this ones here within the data object which is being returned from this data method. The only difference is computer properties allow you to do some thinking before the values being returned. So as here, for instance, we have static values associated with them from within the computed properties. We can actually do some expressions, check for things before we actually return to value so computed. And we're going to start with this warping class and from within this working class. And even though it's called property, they are actually methods off this computer object, so swapping we're going to return again, object with the class swapping, and we want to return this class on Lee, when this swapping is set to true and swapping property obviously represents a 1,000,000,000 false or true. Okay, so now we need to use this swapping class on our body on the body off our component. So on the body talk, we are going to bind class to it again. And this son, we're going to use the swapping class property and because it's a property. Although technically it's a method of a computer object, we are going to call it without the brackets. Okay, so now what's going to happen if I go back to the terminal and make sure that we have everything compiled? Now this swapping class has if we just go back to our editor and open our source s CSS components and if we open horizontal fits and if we scroll up to the section where we have this swapping class, the plight so swapping classify, just collapse All this just to show you obviously have co over here and then swapping class is being applied to the body talk. So you know the body back there the dif with a class body. So once it's applied, the Kovar will change its with 2 100% and departing on the left is going to change to 0.8 are yet. And it will change Unimatrix because we have this CSS three transition applied to the cove . As you can see to all, it's our tributes, and we want this to happen a dispute off 0.3 milliseconds. So that's why it's going to be nicely animated. But I've just noticed that is one problem with Discover Discover will work. And if we just save it all, go to our terminal, compile everything and refresh the page. You'll see that it will move to the left, but it won't co over the item. And why won't take over the item? Because we didn't apply any bargain color to discover. That's why it goes there. Items, swaps. But you can still see the item swaps and nothing covers anything. OK, so let's go back to the editor full take over. I'm going to apply Bagram Kohler, same as background off the feet. So it's going to be feet BG. Okay, if we know, save its and compile everything again. And if we prevue everything a browser for a fresh the page, you can see now our covert covert. The item swaps a behind the scenes and reveals the new one. Okay, so that's it in this video, let's move the next one. 11. Pause and Resume: in his video. We are going to add functionality with the mouse over this body element here. When we mouse over this element, we want defeat to pulse where we move mouse away. We want the feet to resume in view. We banned events to the element using V hyphen on directive, then colon in the name off. The event, in our case, is going to be mouse over the 1st 1 and then what we want to happen when we move our mouths over this element, we would like to pose our scrolling So polls method which will art in just a moment. And then on mouse out, which will be vey hyphen on Kahlan Mouse out. We wants to resume a scrolling so resume method and now the same way as we use the shorthand for these bindings here, which usually would be V hyphen, bind for events we can use art symbol. So rather than this V hyphen on and colon, we can also use just out simple as a short version. And that's what I'm going to be using it. Now let's scroll down to our methods section and right at the bottom. I'm going to art to new methods polls and the other one was resumed. So where is you when we call polls methods? What I want to happen is to change the value associated with the post property This posed too true and then on resume, I want to reverse it. So this bulls equals false. Now what's going to happen if we scroll up? If you have a look at our properties, obviously we have dispose property here and then if we scroll down to our where swap method , you'll see that within this interval we check if this post property is not said to true, then and only then we will slide to the next item. If this pulse property set to truth and obviously this will evaluates to false and we won't be sliding to the next item meaning we will pulse our scrolling. If we then called resume when we move mouse away, then our property becomes false. At which point if we go back to our swap methods, this will evaluates to true and we will start going again from one item to the other. Now, before we finish this video, I would like to do some quick re factoring with this coat. We are using a mass script six to build this component exigency swap. All these methods are using just the name off the methods and a set of brackets rather than the old way colon and Denki. What function? Doing it this way. So what we can also do is to replace our functions for the set interval and set time out with the arrow functions. What that means. We are removing the cured function. We leave the brackets, then equal greater than symbol and a set of curly brackets the same ways we had with a standard fraction. But now there's no need for binding the instance off our object because it's automatically available within the gats off this arrow function so we can remove this binding here completely. And as you can see, we've saved quite a bit of space here, saying, For this set time out, we removed dysfunction, keyword, Let's do the arrow function and remove this binding and everything should steal work just fine. Let's see if we have any other functions. So I'm just going to look for the function keywords. There is none, so if we save it if we open the terminal and if we compile everything the same way as before, let's wait for this to complete and wants. All this has finished. And if we previewed in a browser, as you can see, it's scrolling If I move my mouse over. 123456789 10 We have it set to five seconds. I've already exited 10 seconds. It's all posed. Doesn't go to the next item. But if I move my mouse away, this crawling resumes. So we've managed to do the polls and resume on our component in the next video. We're going to have a look at these battens on the right hand side. 12. Previous, next and play buttons: in this video, we're going to start adding functionality to our controls On the right hand side. Previews play and next batons. If we go back to our editor, the first thing I'm going to do is to go to our template, and I'm going to apply some binding cm going to bind some events to our buttons. The previous baton I'm going to start with the At Symbol rather than be owned by you can use either approach. So odds and owned Click I would like to go to the previous items. I'm going to call the method called Goal previous. We don't have this method. It's we will have it in just a moment. Then on our play button, I wants to bind the click events to it as well. So on click, what I would like to do is to call play method again. This method does not exist yet needed as the next one. For next, I'm going to go for Click and we go into cold go next method. Now another thing I want to do is to apply death class to this play button, and it's going to calm from the computer property called play class and this class will be applied to this play button based on a certain condition. That's why it needs to go to the computers, property stuff. We scroll down to the computed section after was swapping class. We're going to create the new one play class and again we could either use old approach calling and function, then brackets and everything that we want to call. When we actually called this method within dysfunction, all used the EC musket six approach which is just the name brackets instead of curly brackets. And this is the one obviously I'm going to be using here. So return from within this method and it's going to return an object. It will tell us that I want to apply active class when exclamation mark this inter vault when we going to start interval this interval will have a number associate interred associated with it. So obviously this will evaluate to false, at which point this active class will not apply to this play button. But when we going to stop it when we going to reset this interval to know this is when this active class will be applied because this exclamation mark checks, whether it's not true. So whether it's false and obviously no evaluates to false, the display class will be applied to this baton. When this interval will equal Tono off false By default, it will be no And when we start the interval, then it will have an energy associated with it. Okay, Now, if we scroll down the next thing we need to do we have this few new methods which we've just bound to these elements. So after the resume, actually before the polls, let's keep them all together because we have next sleight. Next nets start with the method which was going to the previous slide. So let's call it go previews and is the method we associate it with a click event on the previous baton. So from within this goal previous what I'm going to do First of all, I'm going to stop that Clear the interval. Bisley, stop this scrolling. So I'm going to start with window den clear interval and this clear interval methods takes an integer representing the given interval the interval that we want to clear. So in our case is associated with the property. This inter vault there we go. And now, after this, what I want to do is to set this interval to know. So what will now happen when we click on previous baton We clearing Interval So we no longer going to be scrolling through all these items. And we also said this interval to know, Let's quickly scroll up. And, as you may remember, if we look at our computer properties when Interval isn't true, in other words, if it's going to be set to know or false, then this active class should apply to this play button, making this play button at full capacity. Okay, If we go back to the terminal, let's quickly compile everything and let's have a look at how it's behaving in a browser. And if we now open a browser, refresh the page. You'll see that when we go into the View Council, click on the horizontal feet. Our interval has interviewed to associated with it. If we now click on previous about, look at what's going to happen with this interval. There we go. It's been sentinel and have a look at ours. Crawley dozens canal anymore. Now our interval has been stopped. Their normal alterations to be going through and what we need to do now is to make sure that when we've click this button we cleared the interval. But we also moved to the previous item. So if we go back to the editor, what I'm going to do if we scroll down to the bottom dysfunctionality here stops defeat. So perhaps we could extract all this to another method. I'm going to cut all this and after this go previous, I'm going to create the Method Cult stop and I'm going to paste everything that I've just copied into this method. This method will be responsible for stopping there scrolling, which means clearing the interval and setting it to know now from go previous. I'm going to start with this stop. So it's stopping the scrolling first. And then what we're going to do is call the method called this previous slight. We have next slight method we scroll up, but we don't have previous one. So before this go previews, I'm going to create this new previous slide method and what's going to happen? This previous method will share the same coat as this next slide. The only difference will be that we are going to create the previous method in a moment which will look similar to this next method when we're trying to figure out what's the previous index and then we will have to make sure that this specific method is called here , associating this new value. This new interview with this current property, everything else will remain the same. So what I'm going to do is cut everything from within this next slide method and I'm going to extract it to another method. Cold progress. And this method will take one argument, which will be the direction which we want to take. So direction coma and I'm going to paste everything that I just cut. What I'm going to do here is, rather than keeping this forced off this full stop next, I'm going to use square brackets and pays this direction here, and that will call the relevant method method which will be represented by this direction. So from within the next slight I'm going to use next, which will call this next method from the previous slide. I'm going to call it with the previous as a direction. So let's do this from within the next light, This progress and the direction will be next. So passing this next as an argument, Dennis next method will be called when we associate in the value from within this method with this current property and for the previous slight the same thing this progress and the method will be called previous. So now we've extracted this to a separate method. As you can see, we can use the same methods just passing different argument which will call different method in return. So after this previous slide, let's create this previous matter now, so previous and this method will return the index off the previous item. So we're going to check if this current triple equal symbol zero which would indicate we are on the first item. Then we're going to return this marks which represents their last item in our collection. So if we on the first night and we want to go to the last one and if we click previous again, it's going to the next one before that last one and so on. Otherwise, if we are not on the first item, then we are going to return this current and we deduct one from it. So that's our previous index. Okay, so now if we save everything and let's quickly compile it using NPM run death and if you preview everything in a browser, refresh the page and let's again go to view council Click on this horizontal feet. Have a look at what we've got here interval to If we click on previous internal changes to know And we have now changed our item to the previous one. So we on current zero, which is the first item. If I click previous again, this will take me to the third item 012 So index to And if I click previous again this takes me to the previous item Item one and then item zero against. As you can see, our previous button works fine. And as you can see now this button here is at full capacity. Which means that if I waas too now, preview it in the elements section here You can see we've got this active class because our if we go back to view our interval is set to know. That's why this class has been applied. Okay, Now doing their next goal next method is going to be really easy now. If we go back to the editor after go previews, let's create this go next method and go next method will start exactly same way as our go previous. So this stop. We want to make sure that interval has been cleared and then this next slight. We have this method already available because this is the method which is being called from within a swap methods when we setting up the interval so we don't have to do anymore work. So if we now save it, let's quickly compile everything again. And if we know previewed in a browser, refresh the page and if we click on the horizontal feet again so going back one we own current to and then if we go next not should take us to the 1st 1 in dig zero Next again first, second and so on. Okay, so previous and next buttons are now working. But how can we resume our scrolling? So if we click on this button, obviously nothing happens now you can see that we have two errors now in a console we have property or method play is not defined. And so on. So let's quickly go back to the yet It's up and one last method. Before we finish this course, it's going to be called play and from within this method, the first thing I want to do is to check if Interval hasn't been set yet. So I'm going to check if this interval and it would return true Onley if it wasn't set to know. In other words, if Interval has already been set and if that's the case, we are going to simply call return to terminate the execution of this method. Otherwise, we are going to called this swap, which will start new interval. So if we save it and again, let's compile everything every privy, everything in a browser again, let's refresh the page. Let's open view console, click on the horizontal feeds. Current item is zero. Now we going for the 2nd 1 at index one. If we click on next button, look what's gonna happen with this middle button. There we go. This becomes active. Now an interval has been set to know if I click previews. Interval States has no obviously current changes. But if I click on play Barton interval now changes to interject eight and not should now automatically scrawled in next item. You can now also see that the play button has been great out. If I click now, nothing happens because obviously we are first checking from within display method. Whether the interval isn't running already and if it does, then obviously display button will not to do anything. OK, so that sits in this course. I hope you enjoyed it. And if you have any questions or suggestions, please use our common section.