JavaScript - Input, Processing, and Output(Mad Lib)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• jQuery (Library)
• Safari(Web browser)

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills (Brian P. Hogan 著、Pragmatic Bookshelf)のChapter 2(Input, Processing, and Output)、4(Mad Lib)を取り組んでみる。

4(Mad Lib)

コード(Emacs)

<label for="noun0">
  Enter a noun: <input id="noun0" type="text" value="dog">
</label>
<br>
<label for="verb0">
  Enter a verb: <input id="verb0" type="text" value="walk">
</label>
<br>
<label for="adjective:0">
  Enter a adjective: <input id="adjective0" type="text" value="blue">
</label>
<br>
<label for="adverb0">
  Enter a adverb: <input id="adverb0" type="text" value="quickly">
</label>
<br>

<p id="story0"></p>

<script src="sample4.js"></script>

var input_noun = document.querySelector('#noun0'),
    input_verb = document.querySelector('#verb0'),
    input_adjective = document.querySelector('#adjective0'),
    input_adverb = document.querySelector('#adverb0'),
    inputs = [input_noun, input_verb, input_adjective, input_adverb],    
    createStory;

createStory = function () {
    var story = document.querySelector('#story0');

    story.innerHTML = 'Do you ' + input_verb.value + ' your ' +
        input_adjective.value + ' ' + input_noun.value + ' ' +
        input_adverb.value + "? That's hilarious!";
};

inputs.forEach(function (input) {
    console.log(input);
    input.onkeyup = createStory;
});

Enter a noun:
Enter a verb:
Enter a adjective:
Enter a adverb: