1
00:00:00,210 --> 00:00:01,570
How did it go?

2
00:00:01,570 --> 00:00:05,120
If you found some of this to be
challenging, that's perfectly okay.

3
00:00:05,120 --> 00:00:09,440
As with most things, when it comes to
coding, the more practice, exposure, and

4
00:00:09,440 --> 00:00:11,780
time you spend, the more and
more it will sink in.

5
00:00:11,780 --> 00:00:13,360
So keep at it.

6
00:00:13,360 --> 00:00:18,668
The first challenge reads, add a featured
tag to the second item in the list.

7
00:00:18,668 --> 00:00:22,690
Append a new span element containing
the word featured to the list item.

8
00:00:23,790 --> 00:00:27,360
Add a class of featured
to the new span element.

9
00:00:27,360 --> 00:00:28,916
So this is two parts.

10
00:00:31,970 --> 00:00:33,279
For the first part,

11
00:00:33,279 --> 00:00:37,822
I use the equals method to traverse
to the second list item, passing in

12
00:00:37,822 --> 00:00:43,320
a 1 because the items in a jQuery
collection are zero index like an array.

13
00:00:43,320 --> 00:00:46,760
Then to the equals method,
I changed an append method.

14
00:00:46,760 --> 00:00:52,620
Inside the append method, I created a new
span element containing the text featured.

15
00:00:52,620 --> 00:00:55,110
Here, I also could have created
the element separately and

16
00:00:55,110 --> 00:00:59,170
saved it to a variable, then pass
the variable into the append method.

17
00:00:59,170 --> 00:01:01,394
So that's totally fine
if you did it that way.

18
00:01:04,527 --> 00:01:08,033
Now you can see that next to the second
list item it says featured, but

19
00:01:08,033 --> 00:01:10,702
that's not exactly the look
that we're going for.

20
00:01:13,035 --> 00:01:15,130
Which brings us to the second part.

21
00:01:16,270 --> 00:01:20,200
For the second part, I selected
the span element I just created, and

22
00:01:20,200 --> 00:01:24,620
used the add class method to
add a class of featured to it.

23
00:01:24,620 --> 00:01:26,667
That gives it the styling
that we're looking for.

24
00:01:30,067 --> 00:01:32,010
Okay, let's look at the second challenge.

25
00:01:33,030 --> 00:01:37,390
It reads add a class of new
to the last item in the list.

26
00:01:37,390 --> 00:01:39,220
You can traverse to the last item or

27
00:01:39,220 --> 00:01:42,580
find a jQuery method that helps you
select the last item in the list.

28
00:01:44,090 --> 00:01:47,496
There are several ways to do this, and
I'll just go through a few really quickly.

29
00:01:52,338 --> 00:01:57,600
We can use the equals method to select
the fourth and last item in the list.

30
00:01:57,600 --> 00:02:01,336
And then use the add class
method to add a class of new.

31
00:02:09,086 --> 00:02:12,280
We can use the last or
last child pseudo selector.

32
00:02:13,300 --> 00:02:16,268
Or we can use the last method like so.

33
00:02:18,576 --> 00:02:20,721
And there are probably more
ways to do it as well.

34
00:02:23,211 --> 00:02:28,811
Number 3, add an attribute to each link so
that all anchor tags open in a new tab.

35
00:02:31,360 --> 00:02:36,432
I selected each anchor tag on the page,
and used the attribute or adder method

36
00:02:36,432 --> 00:02:41,520
to add an attribute called target, and
set the attribute's value to blank.

37
00:02:43,270 --> 00:02:45,161
Now let's save and refresh.

38
00:02:45,161 --> 00:02:47,490
And each of these should
open in a new tab.

39
00:02:56,419 --> 00:02:59,268
Number four, select and
print the index and

40
00:02:59,268 --> 00:03:02,410
text of each anchor tag to the console.

41
00:03:02,410 --> 00:03:06,890
For this one, first I select all anchors

42
00:03:06,890 --> 00:03:12,520
on the page by tag name, and call the each
function on my collection of anchor tags.

43
00:03:12,520 --> 00:03:16,210
To the each method,
I pass an anonymous callback function,

44
00:03:16,210 --> 00:03:21,080
passing in the index of each tag we're
looping through, as well as the word item,

45
00:03:21,080 --> 00:03:25,390
which represents each individual
item in the jQuery collection.

46
00:03:25,390 --> 00:03:29,611
Inside the function I log out the text of
each link by selecting it with jQuery and

47
00:03:29,611 --> 00:03:31,510
then calling the text method on it.

48
00:03:35,814 --> 00:03:38,412
If I open up Chrome Dev Tools,
here's the index and

49
00:03:38,412 --> 00:03:41,200
here's the text of each
item we're looping through.

50
00:03:43,300 --> 00:03:49,320
Finally, for question 5 it says, refactor
question 4 using the this keyword.

51
00:03:49,320 --> 00:03:52,904
So let's copy and paste question 4.

52
00:03:52,904 --> 00:03:57,780
And I'll get rid of item as an argument
because we no longer need it.

53
00:03:57,780 --> 00:04:04,203
And inside of the function, instead of
item, we'll replace it with this keyword.

54
00:04:06,899 --> 00:04:10,660
Then we should see all these
printouts twice, which they do.

55
00:04:10,660 --> 00:04:12,499
Awesome.

56
00:04:12,499 --> 00:04:16,320
Remember, you may have done things
a bit differently, and that's great.

57
00:04:16,320 --> 00:04:19,980
Part of what makes coding fun is that
there are often multiple ways to tackle

58
00:04:19,980 --> 00:04:21,170
a problem.

59
00:04:21,170 --> 00:04:23,260
Keep practicing and
I'll see you next time.