#100DaysOfWeb in Python Transcripts
Lecture: DOM part II: add/remove childs, override CSS, event listeners
0:00 All right, continue with the demo.
0:03 As we've seen the quotes are listed in descending order
0:06 and I did that on purpose.
0:08 So the next task is to extract them
0:11 and write them back to the DOM
0:13 but now in numerical order.
0:16 So we have quotes already stored in a variable
0:19 the only problem is that I can just reverse them
0:22 let's see what happens.
0:30 Oops, reverse not a function.
0:34 That doesn't say that much
0:35 let's just bounce it within that art.
0:39 Ah, it's an object of HTML collection
0:43 which doesn't have a reverse method.
0:45 So I need to cast it to an array
0:48 we can do that like this.
0:51 If I bounce this to alert
0:54 I should get what I want
0:57 a proper array.
1:00 And erase after reverse method
1:05 so if I do this
1:11 I should get what I want
1:13 and of course I see only the parent note name
1:16 I've already resolved at church, it was this one
1:18 which now shows as the third item.
1:20 So this seems okay.
1:22 So lets write 'em back to the DOM
1:27 we start them in quotes
1:31 learn how you could get the quotes id
1:34 remember that the unhonored list
1:37 had an id of quotes.
1:40 So let's target that, I'm going to
1:44 define a quote eval variable
1:51 and use a get element by id of quotes.
1:58 To verify that I get the right element
2:01 let's just override, what's in that tag.
2:11 And that didn't work because I made a typo
2:14 well that was a silent error
2:16 because I had to use enter HTML
2:18 and that's something you have to get use to
2:22 that some errors are not shown
2:25 and unexpected behavior might happen.
2:27 So be prepared for that, now it worked.
2:30 So I got the list items overridden
2:33 by some text, so let's populate
2:36 the unhonored list with the quotes of now
2:38 in numerical order.
2:43 And I can use appendChild, with the quote.
2:51 Let's get rid of some text
2:55 and look at that, awesome.
2:56 Now they're in the right order
2:58 and it's writing them actually
2:59 overriding them back to the DOM.
3:02 Let's add a new quote.
3:05 I had this already in my bathroom
3:07 because it's a lot of typing.
3:09 So I define with everyone new quote
3:11 which is from Douglas Crockford
3:12 who wrote "JS The Good Parts"
3:14 so let's add that one as well.
3:16 Notice that I cannot just add the
3:18 new quote with appendChild, like we did before
3:22 because this merely created the TextNode.
3:25 Actually I can but it's not a list item
3:28 so the proper way to do it is to first
3:30 create a new list item
3:35 with createElement
3:43 use the appendChild on that new element
3:49 and implant that new list item instead.
3:52 So here it gets me to write HTML a list item
3:56 and inside it this text
4:00 and then it shows up as a list item.
4:05 To remove that last quote, it's very simple
4:08 you can target the same quote ul
4:13 and use the removeChild method.
4:19 And it's gone again.
4:23 Let's do a little of CSS.
4:25 What if you'd color the quotes
4:26 given the even and uneven quotes
4:29 a different color?
4:38 The module index is 0.
4:48 And set the quotes style, the color
4:53 to say red else we set up to blue.
5:13 And there you go, now the uneven quotes are red
5:15 and the even quotes are blue.
5:19 And that was pretty easy to do
5:22 Finally let's add a behavior to the quotes
5:25 I'm going to add an EventListener
5:26 that's going to watch if the user clicks on the quote.
5:29 So I'm going to use the same file.
5:38 Add each quote, is going to get
5:41 an add EventListener
5:46 and it's going to listen to click events.
5:49 And we have to give it a callable
5:52 which gets the event
5:54 and know we can do something when a user clicks.
5:59 I'm going to get the target element
6:06 which is target work not set.
6:14 I get this source element.
6:16 I'm going to define a tweet URL
6:21 which is the standard intel link.
6:24 And then to add the argument element
6:29 in our HTML.
6:31 Now if we send anything in a URL
6:35 which we are basically doing here
6:37 I need to make sure that I URIencode the content
6:45 encode URI, for example, my quotes contain spaces
6:53 and what encoding does is converting spaces to
6:57 percentage 20 to make it compatible
6:59 to share in a URL.
7:07 Now we are going to open a new tab
7:12 which is to tweak your URL.
7:14 And to do this in a new tab, I can specify blank.
7:18 We are going to get to use
7:19 a bit more information, what they can do
7:22 so I'm going to target again that more paragraph
7:29 and append. Lets see if it works.
7:42 I've got a typo, right
7:44 I did not close off the parenthesis.
7:49 And hear I see click on the cross
7:51 to share them out to Twitter.
7:54 Awesome, and notice that this is the
7:56 URI encoding in action, so all the spaces
7:59 are converted to percentage 20.
8:03 Let's click on another one
8:09 so if I click on another quote
8:12 this handler fires, grabs the quote
8:15 and turns it into a Twitter share link
8:17 and goes to that link opening a new tab.
8:20 Pretty cool.
8:23 The click event is just one example
8:26 there are many, many more.
8:30 For example we can add mouse over
8:32 mouse out, resize of the window, etc.
8:36 And to all these user behaviors we can
8:40 add an EventListener and a function
8:42 to do something based on this user behavior.
8:45 In the final two projects you will work
8:47 a lot with the DOM and it's elements
8:49 with the demo shown you should
8:51 have all the basics to give that a try.
8:54 In the next video we are going