- Introducing Strings 6:43
- Transform and Manipulate Strings 6:04
- Introducing Strings Review 5 questions
- Capture Input 4:05
- Combine Strings 8:28
- Combine and Manipulate Strings 3 objectives
- Template Literals 5:19
- Display the Value of a String on a Page 7:55
- Variables and Strings Challenge 2:57
- Variables and Strings Challenge Solution 5:32
- Combine Strings and Template Literals Review 6 questions
- Write a Template Literal 1 objective
Preview
Video Player
00:00
00:00
Variables and Strings Challenge Solution
5:32This video covers one solution to the "Variables and Strings" challenge.
Hopefully, you were able to complete
the story making programming challenge.
0:00
There was a lot to do and even if you only
got some of it to work, that's great.
0:04
Now, let me show you my solution,
0:07
which you can reference in the teacher's
notes and project files with this video.
0:09
Remember, I suggested breaking down
the program into small, testable steps, so
0:13
I'm not going to try to write
the entire program all at once.
0:17
In fact,
0:21
I'm going to start at the end with my
complete sentence as a paragraph element.
0:21
Between the <p> tags, I'll type,
0:28
There once was a [adjective] programmer
0:32
who wanted to use JavaScript
0:39
to [verb] the [noun].
0:47
This is what I want the finished
sentence to look like.
0:53
I'll need to capture three words,
an adjective, a verb, and a noun,
0:56
and place those words into this string.
1:01
I'll leave this string in the file for
reference.
1:04
Now, I'll add the first step to
the program, capture user input,
1:06
and store it in a variable.
1:10
I'll first ask for
an adjective with const adjective
1:12
= prompt('Please type an adjective'.).
1:16
And to make sure this works, I'll log
the value of adjective to the console.
1:28
I'll save this and test it in the browser.
1:36
And it's looking good so far.
1:43
Now, I need to create two more variables.
1:45
But before I do that, I'll try to
make sure that I can get the value of
1:48
the adjective variable into a string.
1:51
I'll declare a variable named sentence
to hold my final story sentence.
1:55
Then use backticks to set its
value to a template literal.
2:00
Inside the backticks, I'll include
just the first part of this sentence.
2:05
I'll use interpolation
with a dollar sign and
2:13
curly braces to insert the value of
adjective into the final string.
2:16
You could have also used string
concatenation with the plus operator to
2:21
achieve this.
2:25
Next, I'll print the value of sentence to
the console to make sure that it works.
2:28
I'll save this and refresh the browser.
2:35
In the console, I see that it works.
2:40
Now, I'll add two more variables up top.
2:45
One stores a verb and the other a noun.
2:49
Next, I'll add the rest of the sentence
using string interpolation to
3:09
insert the value of the verb and
noun variables into the string.
3:14
I'll test this in the browser.
3:38
All the prompts appear and the final
sentence looks great in the console.
3:44
Finally, I'll display the sentence on the
page using the querySelector method and
3:50
innerHTML property you
learned about earlier.
3:55
The story should display
inside the main element.
4:07
So I need to provide ('main')
to the querySelector method,
4:11
follow that with .innerHTML.
4:17
And to display the HTML
snippet stored in the sentence
4:21
variable within the main element,
add = sentence.
4:26
Now I'm ready to test
the completed program.
4:31
I'll save the file and
refresh the browser, type my three words.
4:34
And everything works as expected.
4:44
As you learned, the write one line and
test it approach is really helpful, and
4:47
also great for catching mistakes.
4:51
As you become better at programming,
4:53
you'll be able to write
more code before testing.
4:55
But it's a good idea to write small,
4:57
testable chunks of code before proceeding
to the next part of the program.
4:59
So now you've built a basic program and
practiced with variables,
5:04
strings, console.log, and more.
5:07
Well done, you've reached the end of
another stage in your JavaScript journey.
5:09
You're beginning to learn and
5:13
use the building blocks that are present
in just about every application.
5:15
You might even start
looking at websites and
5:18
apps a little differently as you use them.
5:20
In the next stage,
5:22
you'll learn how to work with another core
feature of JavaScript, making your program
5:23
react to different situations using
what are called conditional statements.
5:27