1.3 Project Walkthrough

Here we are, back at the beer list that you saw on the left hand side of the screen during our last video. I am going to explain it now. Explain how I have he project set up, how you can download it and use it yourself. And then you can follow along with us as we edit it throughout most of the rest of this course. Easiest way is going to be going to GitHub. You should follow the link in the video notes, because, there is a chance it may change. Right now it's on my Github, but again, follow the link in the video notes. And once you get here, you don't have to know anything about Git or GitHub at all. This is just a place to hold code. If you want to clone it, because you know what Git is, you're welcome to. And if you don't, you can just click this Download ZIP button here, on the right side. And it will download all the files, and you'll just have to un-zip them, and then you'll be able to use them. So once you have that zip file downloaded and un-zipped, you can open up the folder. And inside there, you're going to see just a few files. So the index is what we really care about. So you can right-click on that and just say open with Google Chrome, or whatever browser you want to use. And so, that brings up our beer list as it is right now. The other file you're gonna want to open is this app js file, and that's gonna need to be opened in a text editor. So I use Sublime Text, if you don't have one you can go ahead and grab it. So at sublimetext.com, here you can go ahead and download it for OS X. It also is available for Windows. So if you don't have a text editor, go ahead and grab this one. If you already have one that you like, then just go ahead and use it. So I'll be working in Sublime Text myself. And so, I can open up the index file here, too, just so that I can edit it if I need to, and, I can open by app js. There is a style sheet here, too. We're not gonna touch it in this course, I'm pretty sure. So you're welcome to play with it if you want but it's just there so we can have styles on our project. So if you look at this app js file, you'll see that we're doing a lot of things in here. We're basically just saving off a bunch of references to things that are in the HTML that we can use later on in the file. Then we use, something called low dash, which is similar to a library called underscore. I'm gonna go into this more later. But right now, all we're using it for is its templating. So, you pass .template,uh, just a template file, so it's a string of template code. And then you pass it some data and it will actually push that data into the template. We look at our index file here. We just got a little bit of HTML, some references to some style sheets, etc. And then we have some beer data that we're using in, in the application. And then we have this template here and all it does is loops over whatever it's given. It expects to be given some beer data. And then for each beer, it spits out an li tag with the beer's name, and then the ABV in parenthesis next to it. So that's why you're seeing all these beers here, in this data, in this list right here. The other main thing that we're doing, after we've loaded this up, is that we're adding an event listener to the click of this filters list. So here's some filters. Anytime someone clicks on this filter list we listen on that event. We're preventing the default, we're grabbing some data, and then we're going to go ahead and set some active classes on the filters. So that you know which one they clicked. And then, if the filter is all, we show all the beers. If it's domestic, we loop through and do a filter on domestic, import IPAs and ales, lagers and stouts. So we can see that in action. We've got our list here of all the beers, if I click on domestic, it changes to have an active state on the domestic filter. And then just shows the domestic beers. Ales will show, IPAs and regular ales, foggers, stouts, imports with the ABV next to it. And then, we can always go back to all. So, this is our project. This is somewhat simple and so we'll spend most of the rest of the course going through this code in AppJS. And just making tweaks to it, making it more functional and, I think, making it more maintainable and easy to read. So, in the next video, we'll get started on that by going through this file and changing it from being imperative as it is right now to being more declarative. And I'll explain what that means in that video