This course contains good reference material, but does not reflect our current quality standards.
Transcript from the "Task #2 - Carousel" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kyle Simpson: Let's go back to our read me. We've handled steps one and two and three of task one. Step four says there's nothing else. So we're now complete with task one. Is there a way to exit the modal without using it? Now we don't have a way to exit it yet, we're gonna come back to that later in our exercise today.
[00:00:28] Right now, the modal once a pops up, it stays there until we refresh the page. So, we'll fix that later. So, task one, little overwhelming perhaps but It really did start to show some practical application of the concepts that we were just foo barring earlier. So, I hope that answered some questions that people had earlier.
[00:00:51] We'll be looking at more of those practical applications, that's the goal here, this part of the workshop is all about doing practical application of the concepts from earlier. So let's turn our attention now to task two. It says we need to open up carousel.js and details.js, and so I want you to go ahead and do those.
[00:01:12] I'm gonna close out a few of these files that I don't need for right now, like I don't need the style CSS, let's close header for now we don't even need that one, well come back to it. Let's open up.
>> Kyle Simpson: Carousel and details.
>> Kyle Simpson: And hopefully it will be clear fairly quickly that I've done a lot of the work already.
[00:01:38] [LAUGH] I didn't want you to have to figure out all the math for how to do a left and right, scroll or whatever. If you wanna try your hand at it and challenge yourself you can delete my code and try it but I've already provided you the math for how to do a scroll left and scroll right for a carousel.
[00:01:54] I've already set up all the stuff, at the very bottom here it says, you wanna attach click handlers for the left, a dollar sign left is the left button and the dollars sign right is the right button. So you just want attach click handlers to them, and have those click handlers call the scroll left and the scroll right functions that I've already written.
[00:02:16] So that's just two lines of code, that's going to be much much more straight forward. The details one has slightly more work but not a lot. And we'll come back to that. So let's look at the read me, what does it tell us to do first? The first item number two here it says, in carousel.js add those event handlers for the left and right carousels.
[00:02:39] I'm gonna do the first one for you. And then it'll be really easy for you to figure out the second one, okay? So I have a dollar sign left element and I have a scroll left function. And I wanna put those two together as a click handler. So all that's left down here at the bottom, I'll take out those comments, to set up the left one, I just say dollar sign left on click and give it a call back.
[00:03:11] What's my call back?
>> Speaker 2: Scroll Left.
>> Kyle Simpson: Scroll left. Right, that's it. So super difficult task for you, [LAUGH] do the one for scroll right. And that should look like dollar sign right dot on click scroll right. Okay, save that file. Let's refresh our page. Let's see what kind of magic we now have access to.
[00:03:45]
>> Speaker 3: I'm no where near that fast at typing.
>> Kyle Simpson: Okay, sorry about that.
>> Speaker 5: [LAUGH]
>> Speaker 6: I'm sorry, did you pull all that out of the solution and then paste it?
>> Kyle Simpson: No, no, no, this is the starting version of this file, the only two lines that I had to write here were these two lines.
[00:04:09]
>> Speaker 6: I have only two lines in mine [CROSSTALK] never mind. [LAUGH]
>> Kyle Simpson: Yeah, there's a question in the chat room. The callback goes without parentheses. Exactly, if we put parentheses here what would happen? It would call scroll left immediately and the return value from that is what would get bound which isn't a function so that wouldn't help.
[00:04:40] So yeah, we definitely just pass it by name. Okay, so now if we refresh the page, but now I have a silly, but working carousel.
>> Kyle Simpson: By the way just as a little side note, I did have a slight amount of math as you can see here like figuring out to add plus and minus 250 in position but you notice I'm not doing any work for animations, though when we run it, it is smoothly animated.
[00:05:17] The way I achieved that, CSS animations. So if you look at the CSS stylesheet, sorry CSS transition. If you look at the CSS stylesheet, it's so cool how easy this is. On the CSS stylesheet the items element is the one that's moving around and I just put a transition on it which says when I change the left property instead of it happening immediately I want it to take half a second.
[00:05:47] And this last parameter here is for easing so that it looks a little smoother as it eases out and moves in. So one line of CSS instead of invoking some crazy JavaScript animation library. And it provided a nice little smooth movement for us.
>> Kyle Simpson: Like I said, that's the most proud I can be of CSS, cuz that's about all I know.
[00:06:10] That's about the sum total of my CSS knowledge. [COUGH] Okay, so carousel. It's only 41 lines of code. We don't need complex plugins to do simple little tasks like what we're showing here. There are tens of thousands of great plugins out there in the J Query world from everything that you can imagine.
[00:06:31] Calendar widgets, there's about 100,000 different carousel plugins that you can get and they're all much much more complex with lots of extra features. I just prefer to approach everything that I do from the most basic and simple and then work my way up. Instead of going and grabbing the most complex crazy thing that I can and dropping it in, and having to learn a whole crazy new API.
[00:06:51] It really just boils down to, do I know how to do adding and subtracting of the number 250? That was about it.
>> Speaker 7: They're asking where that 250 came from.
>> Kyle Simpson: Trial and error. [LAUGH]
>> Speaker 8: 250 pixels.
>> Kyle Simpson: My little icons are 200 pixels wide and I have a 50 pixel padding in between them.
[00:07:09] So that's it. [LAUGH]