Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Ready to test your JavaScript skills? Take the challenge and build a "fill-in-the-blank" game.
-
0:00
We've covered a lot of material so far and
-
0:02
you've learned enough to start programming on your own.
-
0:05
It's time for you to create a simple application that retrieves visitor
-
0:09
feedback, combines or concatenates that
-
0:12
feedback to create a longer string that you print to the browser window.
-
0:16
In this challenge you'll be building a StoryMaker program.
-
0:20
It's like the popular kids activity called Mad Libs.
-
0:23
You'll ask for various types of words like an adjective to describe something,
-
0:29
a verb for action, and a noun.
-
0:36
A person supplies words but doesn't know how the words will be used.
-
0:40
When they're done answering the words will be used to create a funny and silly story.
-
0:46
Each time you load the page and
-
0:48
the program asks questions, you'll get a new result.
-
0:50
Let's take a look at the components for this game.
-
0:54
Create a variable and capture input.
-
0:56
You'll need to use the prompt method to ask for a word.
-
0:59
You'll store the input in a variable.
-
1:02
Create a variable for each piece of input.
-
1:05
For each word you ask for, you'll need to use a new variable.
-
1:10
Add an alert to tell the visitor when they're finished.
-
1:13
Use the alert method to pop up a dialog box letting the visitor know that he or
-
1:17
she has finished answering the questions.
-
1:21
Combine the input with other strings to create a message.
-
1:24
You'll need to use the plus symbol to concatenate the visitors responses into
-
1:28
a longer message.
-
1:30
You can either copy the example sentence you see in this demo or
-
1:33
you can create your own.
-
1:35
Ask as many questions as you like.
-
1:37
And make your story as long as you'd like.
-
1:41
Print the story to the browser window.
-
1:42
Use the document.write command to print the final story to the page.
-
1:47
Now, don't try to write this program all at once.
-
1:50
I mean, don't just sit down and
-
1:51
try to write every line of code and then test to see if you got it right.
-
1:55
Good programmers break a program down into small parts.
-
1:59
They build that part and make sure it works before continuing to the next part.
-
2:03
There's much to do in this challenge so just start by creating a variable and
-
2:07
storing input from the prompt command.
-
2:10
You can test to make sure it works by using document.write to write the value of
-
2:15
the variable to the window.
-
2:17
If that works then add another variable and capture another word.
-
2:21
See if you can combine both variables and
-
2:23
print the concatenated result to the browser window.
-
2:27
I've created a workspace for this challenge.
-
2:29
Just click the launch workspace button.
-
2:31
The workspace has an index.html file and a file named instructions.txt.
-
2:38
It has instructions for this challenge.
-
2:40
You should create a new external JavaScript file named story.js.
-
2:43
And put your programming in it.
-
2:46
Then make sure you link that file to the index.html file.
-
2:50
I've given you a lot to do.
-
2:51
But this challenge is a great way to practice what you've learned so far.
-
2:55
In the next video I'll show you one solution to this challenge.
-
2:58
Good luck.
You need to sign up for Treehouse in order to download course files.
Sign up