Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Basics!
You have completed JavaScript Basics!
Preview
This video covers one solution to the "Variables and Strings" challenge.
"Variables and Strings" Challenge Solution
// 1. Declare variables and capture input.
const adjective = prompt('Please type an adjective.');
const verb = prompt('Please type a verb.');
const noun = prompt('Please type a noun.');
// 2. Combine the input with other words to create a story.
const sentence = `<p>There once was a ${adjective} programmer who wanted to use JavaScript to ${verb} the ${noun}.</p>`;
// 3. Display the story as a <p> inside the <main> element.
document.querySelector('main').innerHTML = sentence;
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up