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"> <!--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> 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!"; }} });

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

I thought a madlib lended itself more appropriately to Python, but perhaps that's because I grew up in the age of Zork and Leather Goddess of Phobos.  It works just fine with Vue, although the branching it's asking for next might be a challenge.  I haven't really tried control statements with Vue.  Wait, that's not true - I used the for/next in the random quote example.

I might actually have to put a little thought into the structure for that one.  I'm not sure what "branching" means in that context.  Select one of two verbs at random, and then use the other one later?  Allow them to only select from a few options and branch depending on the one they select?  That second one makes more sense if I'm not going to implement some NLP weirdness.  I haven't used a dropdown in Vue, so that will be a good challenge.


The code....I wonder how long until these start exceeding my textarea and I'll have to actually change the tag attributes.

HTML <div id="app"> Noun: <input ref="input" type="text" v-model="noun"><BR/> Adverb: <input ref="input" type="text" v-model="adverb"><BR/> Adjective: <input ref="input" type="text" v-model="adjective"><BR/> Verb: <input ref="input" type="text" v-model="verb"><BR/> {{sentence}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { noun: "dog", adverb: "quickly", verb: "walk", adjective: "blue" }, computed:{ sentence: function(){ return "Do you " + this.verb + " your " + this.adjective + " " + this.noun + " " + this.adverb + "? That's hilarious!"; }} })

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

Simple one - do a madlib in this style and try it with string interpolation/substitution. Part II will be harder - it branches...I wonder if I'll have to use a picker to limit choices....I'll have to ponder that one. This one needs some sort of NLP to clean up the verb.

noun = input("Please provide a noun: ")
verb = input("Please provide a verb: ")
adverb = input("Please provide an adverb: ")
adjective = input("Please provide an adjective: ")

print("Do you " + verb + " your " + adjective + " " + noun + " " +  adverb + " That's funny!")

print(f'With literal string interpolation: Do you {verb} your {adjective} {noun} {adverb}.  That\'s funny!')
print('With interpolation: Do you %s your %s %s %s}.  That\'s funny!'%(verb,adjective,noun,adverb))

================ RESTART: C:/Users/u0024159/Desktop/MadLib.py ================
Please provide a noun: banana
Please provide a verb: ate
Please provide an adverb: quickly
Please provide an adjective: yellow
Do you ate your yellow banana quickly That's funny!
With literal string interpolation: Do you ate your yellow banana quickly.  That's funny!
With interpolation: Do you ate your yellow banana quickly}.  That's funny!
>>>