1
00:00:00,640 --> 00:00:03,150
We've covered a lot of material so
far, and

2
00:00:03,150 --> 00:00:05,620
you've learned enough to start
programming on your own.

3
00:00:05,620 --> 00:00:09,060
Now you're going to create a program
that retrieves user feedback and

4
00:00:09,060 --> 00:00:12,420
combines that feedback to create
a string that displays on the page.

5
00:00:13,570 --> 00:00:17,400
Along the way, you'll use most of the
JavaScript concepts you've learned so far.

6
00:00:17,400 --> 00:00:18,600
So let's go over what you'll need to do.

7
00:00:19,840 --> 00:00:23,060
In this challenge, you're going
to build a story maker program or

8
00:00:23,060 --> 00:00:26,450
word game, like the popular
children's activity called Mad Libs.

9
00:00:26,450 --> 00:00:31,200
You'll ask for various types of words,
like an adjective to describe something,

10
00:00:31,200 --> 00:00:34,320
a verb for action, or a noun.

11
00:00:34,320 --> 00:00:38,040
A person supplies words, but
doesn't know how the words will be used.

12
00:00:38,040 --> 00:00:41,980
When they're done answering, the words are
used to create a funny and silly story.

13
00:00:41,980 --> 00:00:43,490
Each time you load the page and

14
00:00:43,490 --> 00:00:46,250
the program asks questions,
you'll get a new result.

15
00:00:47,400 --> 00:00:50,680
Launch the workspace with this video
to access the starter code for

16
00:00:50,680 --> 00:00:52,100
this challenge.

17
00:00:52,100 --> 00:00:58,210
In the workspace, open the file named
story.js located inside the JS folder.

18
00:00:58,210 --> 00:01:01,480
This file is already linked to index.html.

19
00:01:01,480 --> 00:01:05,450
And it lists the instructions for
this challenge as JavaScript comments.

20
00:01:05,450 --> 00:01:07,480
Let's go over what you'll need to do.

21
00:01:07,480 --> 00:01:11,420
First, declare variables and
capture input.

22
00:01:11,420 --> 00:01:14,610
You'll need to use the prompt
method to ask for a word.

23
00:01:14,610 --> 00:01:17,760
For example, one prompt asks for
an adjective, another for

24
00:01:17,760 --> 00:01:20,100
a verb, then one for a noun, and so on.

25
00:01:20,100 --> 00:01:22,160
You'll store those inputs in a variable.

26
00:01:22,160 --> 00:01:25,850
For each word you ask for,
you'll need to use a new variable.

27
00:01:25,850 --> 00:01:31,210
Then you'll combine the input with other
words to create a message or story.

28
00:01:31,210 --> 00:01:35,460
You can use the plus operator to
concatenate the user's responses into

29
00:01:35,460 --> 00:01:38,740
a longer sentence, or
use a template literal.

30
00:01:38,740 --> 00:01:41,490
You can either use the example
sentence you see in this demo,

31
00:01:41,490 --> 00:01:43,220
or you can create your own.

32
00:01:43,220 --> 00:01:47,700
Ask as many questions as you like, and
make your story as long as you'd like.

33
00:01:47,700 --> 00:01:52,240
The last step is to display
the story on the page.

34
00:01:52,240 --> 00:01:55,335
Use the document.querySelector method and

35
00:01:55,335 --> 00:02:00,720
innerHTML property to display the final
story inside the main element.

36
00:02:00,720 --> 00:02:04,470
You should display the final story
as a paragraph between <p> tags.

37
00:02:05,550 --> 00:02:10,000
I recommend that you don't try to
write this program all at once.

38
00:02:10,000 --> 00:02:14,310
For instance, don't start by trying
to write every single line of code.

39
00:02:14,310 --> 00:02:16,450
And then testing to see
if you've got it right.

40
00:02:16,450 --> 00:02:19,610
Good programmers break a program
down into small parts.

41
00:02:19,610 --> 00:02:23,530
They build that part, and make sure it
works before continuing to the next part.

42
00:02:23,530 --> 00:02:27,510
There's a lot to do in this challenge,
so I suggest that you start

43
00:02:27,510 --> 00:02:32,130
by creating a variable and storing
input from the prompt method in it.

44
00:02:32,130 --> 00:02:35,190
You can test to make sure
it works using console.log

45
00:02:35,190 --> 00:02:37,470
to log the value of
the variable to the console.

46
00:02:37,470 --> 00:02:40,650
If that works, add another variable and
capture another word.

47
00:02:40,650 --> 00:02:43,470
See if you can insert their
values into a string or

48
00:02:43,470 --> 00:02:45,330
combine them with another string.

49
00:02:45,330 --> 00:02:47,740
Then print the result to the console,
and so on.

50
00:02:47,740 --> 00:02:49,530
Now, I've given you a lot to do, but

51
00:02:49,530 --> 00:02:53,450
this challenge is a great way to
practice what you've learned so far.

52
00:02:53,450 --> 00:02:56,820
In the next video, I'll show you one
solution to this challenge, good luck.