1
00:00:00,649 --> 00:00:04,034
Hopefully, you were able to complete
the story making programming challenge.

2
00:00:04,034 --> 00:00:07,642
There was a lot to do and even if you only
got some of it to work, that's great.

3
00:00:07,642 --> 00:00:09,382
Now, let me show you my solution,

4
00:00:09,382 --> 00:00:13,594
which you can reference in the teacher's
notes and project files with this video.

5
00:00:13,594 --> 00:00:17,984
Remember, I suggested breaking down
the program into small, testable steps, so

6
00:00:17,984 --> 00:00:21,193
I'm not going to try to write
the entire program all at once.

7
00:00:21,193 --> 00:00:21,745
In fact,

8
00:00:21,745 --> 00:00:26,370
I'm going to start at the end with my
complete sentence as a paragraph element.

9
00:00:28,179 --> 00:00:32,161
Between the <p> tags, I'll type,

10
00:00:32,161 --> 00:00:36,649
There once was a [adjective] programmer

11
00:00:39,330 --> 00:00:41,101
who wanted to use JavaScript

12
00:00:47,650 --> 00:00:50,400
to [verb] the [noun].

13
00:00:53,983 --> 00:00:56,757
This is what I want the finished
sentence to look like.

14
00:00:56,757 --> 00:01:01,514
I'll need to capture three words,
an adjective, a verb, and a noun,

15
00:01:01,514 --> 00:01:04,227
and place those words into this string.

16
00:01:04,227 --> 00:01:06,796
I'll leave this string in the file for
reference.

17
00:01:06,796 --> 00:01:10,786
Now, I'll add the first step to
the program, capture user input,

18
00:01:10,786 --> 00:01:12,404
and store it in a variable.

19
00:01:12,404 --> 00:01:16,978
I'll first ask for
an adjective with const adjective

20
00:01:16,978 --> 00:01:21,155
= prompt('Please type an adjective'.).

21
00:01:28,427 --> 00:01:33,217
And to make sure this works, I'll log
the value of adjective to the console.

22
00:01:36,426 --> 00:01:38,868
I'll save this and test it in the browser.

23
00:01:43,006 --> 00:01:45,203
And it's looking good so far.

24
00:01:45,203 --> 00:01:48,029
Now, I need to create two more variables.

25
00:01:48,029 --> 00:01:51,563
But before I do that, I'll try to
make sure that I can get the value of

26
00:01:51,563 --> 00:01:53,618
the adjective variable into a string.

27
00:01:55,850 --> 00:02:00,631
I'll declare a variable named sentence
to hold my final story sentence.

28
00:02:00,631 --> 00:02:05,919
Then use backticks to set its
value to a template literal.

29
00:02:05,919 --> 00:02:13,058
Inside the backticks, I'll include
just the first part of this sentence.

30
00:02:13,058 --> 00:02:16,599
I'll use interpolation
with a dollar sign and

31
00:02:16,599 --> 00:02:21,881
curly braces to insert the value of
adjective into the final string.

32
00:02:21,881 --> 00:02:25,349
You could have also used string
concatenation with the plus operator to

33
00:02:25,349 --> 00:02:26,112
achieve this.

34
00:02:28,905 --> 00:02:33,154
Next, I'll print the value of sentence to
the console to make sure that it works.

35
00:02:35,391 --> 00:02:38,710
I'll save this and refresh the browser.

36
00:02:40,708 --> 00:02:42,579
In the console, I see that it works.

37
00:02:45,256 --> 00:02:49,045
Now, I'll add two more variables up top.

38
00:02:49,045 --> 00:02:52,150
One stores a verb and the other a noun.

39
00:03:09,768 --> 00:03:14,287
Next, I'll add the rest of the sentence
using string interpolation to

40
00:03:14,287 --> 00:03:18,364
insert the value of the verb and
noun variables into the string.

41
00:03:38,027 --> 00:03:39,587
I'll test this in the browser.

42
00:03:44,182 --> 00:03:48,470
All the prompts appear and the final
sentence looks great in the console.

43
00:03:50,567 --> 00:03:55,687
Finally, I'll display the sentence on the
page using the querySelector method and

44
00:03:55,687 --> 00:03:58,655
innerHTML property you
learned about earlier.

45
00:04:07,365 --> 00:04:11,122
The story should display
inside the main element.

46
00:04:11,122 --> 00:04:17,995
So I need to provide ('main')
to the querySelector method,

47
00:04:17,995 --> 00:04:21,442
follow that with .innerHTML.

48
00:04:21,442 --> 00:04:26,578
And to display the HTML
snippet stored in the sentence

49
00:04:26,578 --> 00:04:31,727
variable within the main element,
add = sentence.

50
00:04:31,727 --> 00:04:34,898
Now I'm ready to test
the completed program.

51
00:04:34,898 --> 00:04:41,075
I'll save the file and
refresh the browser, type my three words.

52
00:04:44,019 --> 00:04:47,279
And everything works as expected.

53
00:04:47,279 --> 00:04:51,615
As you learned, the write one line and
test it approach is really helpful, and

54
00:04:51,615 --> 00:04:53,601
also great for catching mistakes.

55
00:04:53,601 --> 00:04:55,289
As you become better at programming,

56
00:04:55,289 --> 00:04:57,569
you'll be able to write
more code before testing.

57
00:04:57,569 --> 00:04:59,708
But it's a good idea to write small,

58
00:04:59,708 --> 00:05:04,065
testable chunks of code before proceeding
to the next part of the program.

59
00:05:04,065 --> 00:05:07,456
So now you've built a basic program and
practiced with variables,

60
00:05:07,456 --> 00:05:09,369
strings, console.log, and more.

61
00:05:09,369 --> 00:05:13,659
Well done, you've reached the end of
another stage in your JavaScript journey.

62
00:05:13,659 --> 00:05:15,077
You're beginning to learn and

63
00:05:15,077 --> 00:05:18,521
use the building blocks that are present
in just about every application.

64
00:05:18,521 --> 00:05:20,778
You might even start
looking at websites and

65
00:05:20,778 --> 00:05:22,981
apps a little differently as you use them.

66
00:05:22,981 --> 00:05:23,848
In the next stage,

67
00:05:23,848 --> 00:05:27,863
you'll learn how to work with another core
feature of JavaScript, making your program

68
00:05:27,863 --> 00:05:31,520
react to different situations using
what are called conditional statements.