#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.