#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Detailed movie details

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's see where we are. We've got our movies, and they're being displayed here but we don't have all the details, right we just have the title
0:07 and let's show things like their rating their IMDB score, rating as in PG or R or whatever. So let's put a little bit more design into this section.
0:16 So this block of HTML is repeated for each movie. We're going to add a couple of things. So we have the title and that's pretty good
0:23 but let's come down here and we already have the CSS in place so I'm going to choose certain CSS classes that'll make it look good.
0:30 You can go look at the CSS at this point you've been doing many, many days of web and CSS is not really worth taking into.
0:37 So we're going to have a div that has attributes in here and this is going to be things like the year and so on.
0:43 So we're going to have a span, that has a class year and let's just put m.year, and we'll have something like this that has a rating for the rating.
0:51 If you go back and look at the data you'll see each movie has a year, it has a rating sometimes. This one doesn't, most of them, let's go down
1:00 this one has a year and rating and so on. They have an IMDB score so we're going to try to display that stuff here.
1:05 They have a class score and this is going to be score and then actually let's put the word score right there so we know what that's for, okay.
1:12 That's a good start. This needs to be IMDB score. Thank you, wow, I caught that error, that's crazy, how cool. Okay so, what we're going to do
1:20 is let's just see how that looks. Remember, I applied some CSS styles to those classes so we should get a little bit of design here
1:27 so we've got this, we've got our R got our score, pretty good. And notice this is from highest to lowest IMDB score.
1:34 Alright, great, we have one more thing that we can do down here. We're going to have a genres section. So if we go back and look at our data
1:43 you'll see, like this one has to do with drama and crime and this one has to do, the same with that one this one just drama.
1:51 A lot of drama in the top here. So here's a thriller, action, crime, and so on. So what we're going to do is show those in little badges
1:57 using some Bootstrap stuff, so that's really easy to do. We're going to have our genres we want to have a bunch of spans
2:04 that have the class, it's going to be a badge. And let's have this badge of info. If we want to have this repeated remember there's not just one genre
2:14 but there's a lot so we'll say v-for g in genres and here we're just going to put g. Let's see how that looks. Oh, this needs to be m.genres.
2:26 Of course, 'cause it's in a loop, there we go. Check that out, we have Towering Inferno. We have Shawshank Redemption. Oh, here's drama and crime.
2:36 Got some action, what else. It's all about the drama, isn't it? Drama and thriller, I guess comedy's at the top
2:42 but everything else seems to have similarities in the genre for the high rated ones. This was pretty easy to do, I think.
2:49 I did already do the CSS for this but other than that, it's really, really simple. If you're familiar working with any of the Python templates
2:56 like Chameleon or Jinja they should look pretty familiar with you. It's a really comfortable framework for server side developers.


Talk Python's Mastodon Michael Kennedy's Mastodon