1
00:00:00,300 --> 00:00:05,820
In this section, we've got a collection of interesting many Web applications to build, the first one

2
00:00:05,820 --> 00:00:10,830
that we're going to be building is just a regular joke that's going to get the current joke of the day,

3
00:00:11,280 --> 00:00:18,060
making a collection to the end point, returning back an object that objects to contain the joke information.

4
00:00:18,240 --> 00:00:23,330
And then we're taking that joke information and putting it on the page using JavaScript.

5
00:00:23,940 --> 00:00:31,010
The next project that we're going to work on is going to be a practice to connect to fetch text files.

6
00:00:31,020 --> 00:00:34,340
So we've got three different text files within an array.

7
00:00:34,530 --> 00:00:39,830
So loading the content of any one of the text files and outputting it to the page.

8
00:00:40,110 --> 00:00:47,550
So it's simple exercise where we've got multiple endpoints and the user can interact and select which

9
00:00:47,550 --> 00:00:52,320
file they want to make the request to and which files they want to return back on the page.

10
00:00:52,500 --> 00:00:56,520
So it's making a fetch request, returning back the content of the text file.

11
00:00:57,480 --> 00:01:02,590
The next one is that we're making Fach request to GitHub.

12
00:01:02,940 --> 00:01:09,920
So this allows us to search the ghetto repositories and also get a Zen response from GitHub.

13
00:01:10,230 --> 00:01:14,490
So returning back the GitHub repository information.

14
00:01:15,060 --> 00:01:19,590
So the URL, the ID and just some useful information.

15
00:01:19,590 --> 00:01:26,070
And this is a really good API that you can connect to in order to practice and getting data from a very

16
00:01:26,070 --> 00:01:27,380
deep API.

17
00:01:27,420 --> 00:01:32,640
It's got a lot of object information, so selecting that object information and outputting it to the

18
00:01:32,640 --> 00:01:32,970
page.

19
00:01:33,180 --> 00:01:36,930
So that also includes linking it to where the you are out is.

20
00:01:37,710 --> 00:01:43,890
The next one is going to be a word scramble game and we're actually going to be getting the data from

21
00:01:43,890 --> 00:01:45,020
a Google sheet.

22
00:01:45,270 --> 00:01:49,250
So loading the sheet by whatever the ID is of the sheet.

23
00:01:49,770 --> 00:01:54,480
So this is the sheet here and dynamically loading whatever the ID is of the sheet.

24
00:01:54,720 --> 00:02:01,410
We've got the sheet content shared, so it's looping through and getting the first row of content from

25
00:02:01,410 --> 00:02:03,990
the first column of the sheet.

26
00:02:04,350 --> 00:02:15,630
And if we update the sheet and we refresh the project load sheet data, now we've got the new content

27
00:02:15,630 --> 00:02:17,670
included within the sheep list.

28
00:02:17,670 --> 00:02:24,090
So there's Lowrance and that's been added as number 12 were also because we just want a simple word

29
00:02:24,090 --> 00:02:24,450
list.

30
00:02:24,750 --> 00:02:27,690
We're going to be splitting the words by spaces.

31
00:02:28,020 --> 00:02:32,730
So if the words do have spaces in there, it's just going to be listed as a separate object.

32
00:02:33,210 --> 00:02:38,330
So now we've got the newly updated content and that's been loaded into the sheet.

33
00:02:38,580 --> 00:02:45,000
So once we've loaded the data that we want to use for this word scrambled game, it's going to take

34
00:02:45,000 --> 00:02:46,230
that data list.

35
00:02:46,230 --> 00:02:48,320
So the new word list is loaded.

36
00:02:48,510 --> 00:02:53,040
We can hit start game and that's going to start the game where we need to select.

37
00:02:53,040 --> 00:02:58,670
And guess what word is this one from the 14 words that we had with in the spreadsheet.

38
00:02:58,950 --> 00:03:03,060
So a way to dynamically load and generate spreadsheet information.

39
00:03:03,690 --> 00:03:11,110
And then this, again, is all coming from the spreadsheet content and dynamically can be updated so

40
00:03:11,110 --> 00:03:14,280
that you update your spreadsheet content and that will update that content.

41
00:03:14,880 --> 00:03:17,480
Coming up next is Dummy JSON Quiz.

42
00:03:18,060 --> 00:03:24,520
So this is just a simple quiz and practice generating an object array.

43
00:03:24,870 --> 00:03:31,440
So we've got a number of possible answers and we've got a question and that's up to the user to pick

44
00:03:31,440 --> 00:03:32,640
which one is the right one.

45
00:03:33,180 --> 00:03:41,850
We can select a dynamic number of questions if we want, and this just generates some random JSON data.

46
00:03:42,090 --> 00:03:48,780
So it's a practice exercise for creating dummy data and it's relatively straightforward where we've

47
00:03:48,780 --> 00:03:49,590
got the question.

48
00:03:49,770 --> 00:03:51,840
And then one of these answers is right.

49
00:03:52,020 --> 00:03:53,250
We select the right one.

50
00:03:53,250 --> 00:03:54,720
We move on to the next question.

51
00:03:54,900 --> 00:03:59,940
If we select the wrong one, we get the wrong message and we can go through the quiz.

52
00:04:00,300 --> 00:04:04,020
And then at the end, we're going to also be tracking the score.

53
00:04:04,030 --> 00:04:06,630
So it's moving through the questions of the quiz.

54
00:04:06,990 --> 00:04:15,120
And then at the end, we're able to select and get the ultimate score and then we can refresh it and

55
00:04:15,120 --> 00:04:16,020
rebuild the quiz.

56
00:04:16,230 --> 00:04:21,690
And this is all dynamically generated so we can update and set how many JSON questions we want.

57
00:04:21,900 --> 00:04:26,280
And it's also a good practice way of constructing JSON objects.

58
00:04:26,850 --> 00:04:29,610
And then the last one is going to be a YouTube search.

59
00:04:29,910 --> 00:04:35,940
So if we want to search YouTube for whatever term we want to search for, it's actually going to be

60
00:04:35,940 --> 00:04:39,270
searching my channel for any related content.

61
00:04:39,480 --> 00:04:42,180
So it returns back from the YouTube API.

62
00:04:42,360 --> 00:04:48,630
We're going to be connecting to the YouTube API and returning back the snippet information of the available

63
00:04:48,630 --> 00:04:49,650
video content.

64
00:04:50,010 --> 00:04:53,700
And there's a lot of information contained within the API.

65
00:04:53,970 --> 00:04:59,490
So also taking that information and putting it to the page, including getting the.

66
00:04:59,900 --> 00:05:07,300
Thumbnail of the video, as well as getting the details, the title and also linking it to the video,

67
00:05:07,850 --> 00:05:14,360
so all of that information being returned back from the YouTube API dynamically with the search and

68
00:05:14,360 --> 00:05:21,620
all of the all of the lessons are going to start with the same basic code structure and then all of

69
00:05:21,620 --> 00:05:25,730
the content is going to be dynamically generated within that output div.

70
00:05:25,910 --> 00:05:31,310
So they're all going to have an input button and each one tag and a development and then the rest is

71
00:05:31,310 --> 00:05:36,920
going to be done with JavaScript and this is going to be the same across all of them where we've got

72
00:05:36,920 --> 00:05:42,720
the basic structure that we're starting with and then the content gets generated dynamically.

73
00:05:42,980 --> 00:05:52,640
So when we hit start game it populates the content using JavaScript into the output element and runs

74
00:05:52,640 --> 00:05:54,200
the game within the output element.

75
00:05:54,830 --> 00:06:01,430
And also for this one, the same structure once again, where we have a very simple structure and this

76
00:06:01,430 --> 00:06:09,830
is reconstructed with JavaScript to update it and to be able to accommodate building out the gameplay

77
00:06:09,830 --> 00:06:11,890
that we've set out with an application.

78
00:06:12,380 --> 00:06:16,070
So there's a lot of really good practice exercises in this lesson.

79
00:06:16,340 --> 00:06:21,740
Source code, of course, is included and one of the best ways to learn is just to try it out.

80
00:06:21,740 --> 00:06:22,850
The code for yourself.

81
00:06:22,850 --> 00:06:26,570
If you have any questions or comments, I'm always happy to hear from you.

82
00:06:27,350 --> 00:06:28,640
So let's get started coding.