Python Jumpstart by Building 10 Apps Transcripts
Chapter: App 5: Real-time weather client
Lecture: Finding the right CSS selectors via your browser
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now, the big question is in that huge HTML document
0:04
how do I get hold of this piece, this piece,
0:08
that little bit right there and that bit, and that bit, independently.
0:14
So, like I said the key to this is a css
0:17
and let's try to use our web browser developer tools to figure this out.
0:20
So we can come over here and right click on Portland and say inspect element,
0:23
so here you can see and there is dev app here we've got an id of location,
0:29
so we would start with location,
0:31
and then we have this contained within in H1
0:34
and then there is actual element that we want.
0:37
So we could write some code that comes in here and grabs this element as div
0:40
and looks inside of there for H1
0:42
and within the H1 it's going to grab just the text.
0:45
Now, if the website we are working with happens to use jQuery
0:50
it will let us test this in a really nice way
0:53
so remember id location let's go over here to the console
0:56
and the way you can tell if this is jQuery or not is
0:59
you hit $ and then you hit enter,
1:01
if that doesn't come up as not found or none or something
1:04
then you have jQuery so this lets us test our expressions.
1:09
So I can come down here and say I am looking for a div with the ID and css
1:13
you say # id and that was the location
1:16
and then a sub item so put a space H1
1:20
and I can just write out the text and see what that is
1:23
let's see if this will work, boom,
1:25
ok so if I was given that in Python I could definitely do a little string work
1:30
to get that out of it, so this div#location is what we will work
1:35
and in fact we could keep it simpler like this,
1:37
just # location for the id of location and then space, subitem H1.
1:42
Similarly let's look at the other ones here.
1:44
So overcast, inspect element, this is going to be within current condition,
1:49
and if you look at current condition, you can see it has this wx value inside of it,
1:56
it has the id of current condition and within there we had a class,
2:01
notice the class of wx value. Now class is in css,
2:06
I start with the dot, remember, id class and we put a space
2:11
to say the thing with id current condition contains the thing with class wx value
2:16
and then we can do text and see what comes out there.
2:19
Overcast, ok, that is looking good,
2:21
and if we go back here and look at this one,
2:24
we have current temp wx data and then value
2:28
and unit for those two pieces,
2:30
so we are going to be able to use all that information to grab exactly the little bits
2:33
that we want right there, out of the html.
2:36
So just for a reference here, let me paste these,
2:40
which I have grabbed and formatted for you,
2:43
so we have them right here to work with while we are building this method out.
2:46
So the next thing to do will be to use Beautiful Soup
2:49
it'll actually do something kind of like we did with jQuery
2:52
and the browser but we are going to do it in memory in Python.
