- 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
2:57Create a program that retrieves user feedback and combines that feedback to create a string that displays on the page.
We've covered a lot of material so
far, and
0:00
you've learned enough to start
programming on your own.
0:03
Now you're going to create a program
that retrieves user feedback and
0:05
combines that feedback to create
a string that displays on the page.
0:09
Along the way, you'll use most of the
JavaScript concepts you've learned so far.
0:13
So let's go over what you'll need to do.
0:17
In this challenge, you're going
to build a story maker program or
0:19
word game, like the popular
children's activity called Mad Libs.
0:23
You'll ask for various types of words,
like an adjective to describe something,
0:26
a verb for action, or a noun.
0:31
A person supplies words, but
doesn't know how the words will be used.
0:34
When they're done answering, the words are
used to create a funny and silly story.
0:38
Each time you load the page and
0:41
the program asks questions,
you'll get a new result.
0:43
Launch the workspace with this video
to access the starter code for
0:47
this challenge.
0:50
In the workspace, open the file named
story.js located inside the JS folder.
0:52
This file is already linked to index.html.
0:58
And it lists the instructions for
this challenge as JavaScript comments.
1:01
Let's go over what you'll need to do.
1:05
First, declare variables and
capture input.
1:07
You'll need to use the prompt
method to ask for a word.
1:11
For example, one prompt asks for
an adjective, another for
1:14
a verb, then one for a noun, and so on.
1:17
You'll store those inputs in a variable.
1:20
For each word you ask for,
you'll need to use a new variable.
1:22
Then you'll combine the input with other
words to create a message or story.
1:25
You can use the plus operator to
concatenate the user's responses into
1:31
a longer sentence, or
use a template literal.
1:35
You can either use the example
sentence you see in this demo,
1:38
or you can create your own.
1:41
Ask as many questions as you like, and
make your story as long as you'd like.
1:43
The last step is to display
the story on the page.
1:47
Use the document.querySelector method and
1:52
innerHTML property to display the final
story inside the main element.
1:55
You should display the final story
as a paragraph between <p> tags.
2:00
I recommend that you don't try to
write this program all at once.
2:05
For instance, don't start by trying
to write every single line of code.
2:10
And then testing to see
if you've got it right.
2:14
Good programmers break a program
down into small parts.
2:16
They build that part, and make sure it
works before continuing to the next part.
2:19
There's a lot to do in this challenge,
so I suggest that you start
2:23
by creating a variable and storing
input from the prompt method in it.
2:27
You can test to make sure
it works using console.log
2:32
to log the value of
the variable to the console.
2:35
If that works, add another variable and
capture another word.
2:37
See if you can insert their
values into a string or
2:40
combine them with another string.
2:43
Then print the result to the console,
and so on.
2:45
Now, I've given you a lot to do, but
2:47
this challenge is a great way to
practice what you've learned so far.
2:49
In the next video, I'll show you one
solution to this challenge, good luck.
2:53