Dinner Decider

dinner-decider.markdown

Dinner Decider

A Pen by Edward Lance Lorilla on CodePen.

License.

index.html

<div id="app">
  <h1>{{randomDinnerChoose | capitalize}}</h1>
  {{dinnerChooser}}
  <p>
    <label ><b>Add Dinner</b></label>
    <input  type="text" v-model="inputDinner">
  </p>
  <p>
    <button @click="randomDinner" >Choose Dinner</button>
    <button @click="addDinner"  >Add Dinner Array</button>
  </p>
</div>

script.js

new Vue({
  el:'#app',
  data(){
    return{
      dinnerChooser: ['dairy','seafood','pasta','vegetable','egg','fish a'],
      incrementDinner: 0,
      inputDinner: '',
      randomDinnerChoose: null
    }
  },
  filters:{
    capitalize(string){
      return _.startCase(string);
    }
    
  },
  methods:{
    addDinner(){
      var vm = this
      if(vm.inputDinner){
        vm.dinnerChooser.push(vm.inputDinner) 
      }else{
        alert('put Something')
      }
    },
    randomDinner(){
      var vm = this
      if(vm.incrementDinner == vm.dinnerChooser.length - 1){
        vm.incrementDinner = 0 
        // it will shuffle until the condition was meet
        vm.dinnerChooser = _.shuffle(vm.dinnerChooser);
      }else{
        //else continue the process of increment dinner
        vm.randomDinnerChoose = vm.dinnerChooser[vm.incrementDinner]
        vm.incrementDinner++
      }
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

styles

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />