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.