A Nod to Nothing: Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Mad Lib (4)

Sunday, February 17, 2019

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Mad Lib (4) - Vue.js style with Drop Downs

Wow...the length of these titles is getting a bit off the hook. Maybe I need to go with EfP57 as a short form. I lose my keywords; but I don't care about my keywords.

The challenge for the madlib exercise was to put some control logic in the system. I didn't like the acceptance criteria, because there's some knowledge of what's being entered that's necessary. To avoid that, I thought I could force the user down a path of limited choices....aka a select/dropdown. In that case, the branching logic is pretty straightforward because you know the possible values. I see where to implement it in the display of the sentence using the computed property. Getting the drop downs set up in the first place was the hard part. Vue isn't intuitive to me. Although, and I am ashamed, flipping "key" to "name" in the bound property was so simple I'm embarrassed it took as long to intuit as it did. This will also be the first exercise with code so long it doesn't fit in an easy image, so all I'm posting is the textarea with scroll.

So here's the fiddle: https://jsfiddle.net/NodToNothing/L8rpd6ak/
Here's all my fiddles: https://jsfiddle.net/user/dashboard/fiddles/

Here's my oops where I use the key instead of the name. I tried to get to the object via some collection notation [index] and failed repeatedly even though I got back a viable object inserting those indexes.

You can see it inserting the indexes into the concatenated sentence above. That IS hilarious.

And there it works. The trick was changing :value="verb.key" to :value="verb.name". Simple. Easy Peasy. But I couldn't find an example on the web. All sorts of other examples, just not that one. And as you can see from the "person" code, I borrowed the initial code for modification and the example of how to flip it wasn't there. Well, for as stupid as that was, I feel undeservedly smart. And I can finally move on to exercise #5 "Simple Math" which must be easier.

HTML:
<div id="app">

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/>

</div>
VUE + 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!";
 }}
});