MadLib Branching

From 57 Exercises - #4 with the challenges

by NodToNothing

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id="app">

<!--can do this in a template in the Vue code for reuse-->


Noun: <select v-model="selectedPerson">
     <option v-for="person in people" :value="person.name">{{person.name}}</option>
</select><BR/>

Adverb: <select v-model="selectedAdverb">
     <option v-for="adverb in adverbs" :value="adverb.name">{{adverb.name}}</option>
</select><BR/>

Verb: <select v-model="selectedVerb">
     <option v-for="verb in verbs" :value="verb.name">{{verb.name}}</option>
</select><BR/>
            

Adjective: <select v-model="selectedAdjective">
     <option v-for="adjective in adjectives" :value="adjective.name">{{adjective.name}}</option>
</select><BR/>


{{sentence}}

</div>

JavaScript

new Vue({
    el: '#app',
        data: {
        people: [
            {key: 1, name: "Cat"},
            {key: 2, name: "Dog"},
            {key: 3, name: "Hamster"},
            {key: 4, name: "Giraffe"},
            {key: 5, name: "Zebra"},
            {key: 6, name: "Rat"},
            {key: 7, name: "Dragon"}
        ],
        selectedPerson: "",
          adverbs: [
            {key: 1, name: "quickly"},
            {key: 2, name: "slowly"},
            {key: 3, name: "aggressively"},
            {key: 4, name: "bashfully"},
            {key: 5, name: "wistfully"},
            {key: 6, name: "urgently"},
            {key: 7, name: "diligently"}
        ],
        selectedAdverb: "",
        adjectives: [
            {key: 1, name: "blue"},
            {key: 2, name: "green"},
            {key: 3, name: "ugly"},
            {key: 4, name: "pretty"},
            {key: 5, name: "smart"},
            {key: 6, name: "weird"},
            {key: 7, name: "funny"}
        ],
        selectedAdjective: "",
        verbs: [
            {key: 1, name: "run"},
            {key: 2, name: "smile"},
            {key: 3, name: "laugh"},
            {key: 4, name: "cry"},
            {key: 5, name: "jump"},
            {key: 6, name: "swim"},
            {key: 7, name: "scream"}
        ],
        selectedVerb: ""   
    },
computed:{
   sentence: function(){
     return "Do you " + this.selectedVerb + " your " + this.selectedAdjective + " " + this.selectedPerson  + " " + this.selectedAdverb + "? That's hilarious!";
 }}
});