WEBVTT

0
00:00.300 --> 00:00.540
All right.

1
00:00.540 --> 00:07.590
So here comes Challenge 20. Currently on our home page it's quite cluttered because every single blog post

2
00:07.680 --> 00:11.310
no matter how long it is one paragraph or five paragraphs,

3
00:11.340 --> 00:13.210
it all gets listed here.

4
00:13.500 --> 00:18.960
But now that we've managed to create a separate page for each and every single one of our blog posts

5
00:19.290 --> 00:23.100
we don't want to list it in full on our home page anymore.

6
00:23.550 --> 00:29.940
The goal of this challenge is to use Google and use Stack Overflow and use all the resources you have

7
00:29.940 --> 00:38.910
on the Internet to figure out how you can change the code so that our home page now truncates the content

8
00:39.030 --> 00:45.790
of each blog posts to only 100 characters. And then at the end there's just these three ...

9
00:46.140 --> 00:51.690
and now we only have a preview of each blog post.

10
00:51.690 --> 00:57.750
Pause the video and I want you to practice this really truly important programming skill of figuring

11
00:57.750 --> 01:02.060
things out by yourself and try to complete this challenge.

12
01:03.180 --> 01:06.390
So here's my first hint for you.

13
01:06.390 --> 01:09.920
A journey of a thousand miles starts with a single step.

14
01:10.030 --> 01:16.200
The programmer version of that is that the journey of solving any programming problem starts with a single

15
01:16.200 --> 01:16.880
search.

16
01:16.890 --> 01:22.380
So let's go ahead and try to succinctly explain to Google what it is that we want to know.

17
01:22.800 --> 01:30.360
Now the goal that we want to achieve is to be able to truncate our string down to 100 characters using

18
01:30.480 --> 01:31.360
Javascript.

19
01:31.440 --> 01:37.110
So if we exclude all of the specific parts of our problem say the 100 characters right? Because somebody

20
01:37.110 --> 01:40.800
else might have posted that they wanted to limit it to 10 characters.

21
01:40.890 --> 01:43.490
So to widen our search let's try something like

22
01:43.500 --> 01:50.030
truncate string Javascript. And the first answer we get on Stack Overflow

23
01:50.040 --> 01:50.890
let's check it out.

24
01:50.970 --> 01:54.290
Let's see what that query is to see if it matches our own.

25
01:54.300 --> 02:01.110
So they want to truncate a dynamically loaded string using straight Javascript and all they care about

26
02:01.170 --> 02:02.790
is just the number of characters.

27
02:02.820 --> 02:05.640
That sounds exactly like what we want to do as well.

28
02:05.640 --> 02:11.550
And the answer they explain is to use the substring method and they actually very kindly link to the

29
02:11.550 --> 02:15.140
documentation as well as providing a code example.

30
02:15.180 --> 02:23.040
So let's say that you have a string ABCDEFG and you want to truncate it down to say only 3 characters

31
02:23.040 --> 02:26.290
long. Then you would say the string

32
02:26.290 --> 02:33.720
call a method .substring on it and then inside the parentheses you specify a start position and an

33
02:33.720 --> 02:37.090
end position where you want to cut up that string.

34
02:37.120 --> 02:45.190
So now the outcome of my truncated string is now just ABC because it goes from 0 to length which is 3.

35
02:45.190 --> 02:51.390
So from 0 to 3 then then that includes 0, 1, 2, 3 only has ABC right?

36
02:51.460 --> 02:53.270
So now using this

37
02:53.380 --> 02:56.930
can you apply it to the challenge and solve it for yourself?