JSFiddle - React, Tailwind, and code Playground

by Oscar Jimenez

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id='growler'>

  <button onclick='changeName()'>
Change Name
</button>

  <h2 v-text='appName' v-bind:style="[appStyleColor, appStyleFont]"></h2>
  <img :alt="appName" :src="appLogo" style="height:36px;" />
  <h2 v-text='appName' v-bind:class="[accentColor]"></h2>
  <h2 v-text='appName' v-bind:class="{'headers': toggleClass}"></h2>
  <h2 v-text='appName' v-bind:style="{ color : toggleClass ? '#FF6A00' : '#000'}"></h2>
  <input v-model='query' v-on:keyup.enter='executeSearch' type='text' placeholder='Search...'> </input>
  <button v-on:click="executeSearch" v-bind:disabled="toggleClass">
  Search
</button>

  <div> {{query}} </div>
  <label><input type='checkbox' value='imperial' v-model='selectedBeers'> Imperial 
</label>
  <label><input type='checkbox' value='light' v-model='selectedBeers'/>
Light</label>
  <br>
  <label>
  <input type='radio' value='light' v-model='selectedBeer'> Light
</label>

  <label>
  <input type='radio' value='imperial' v-model='selectedBeer'> Imperial
</label>

  <br>

  <select v-model='selectedBeer'>
  <option value='light'>Light</option>
  
  <option value='imperial'>Imperial</option>
</select>



  <div>
    {{selectedBeers}}
  </div>
  <div>
    {{selectedBeer}}
  </div>
  <label> If Else and Cloak </label>
  <p v-cloak>
    <div v-if="selectedBeers.length === 0">
      No beers were returned
    </div>
    <div v-else-if="selectedBeers.length === 1">
      1 Beer was found
    </div>
    <div v-else>
      {{selectedBeers.length}} beers were found
    </div>
    <!-- The difference between show and if is that show just change the display property of css. If-else destroys the elements in the dom which makes it more slow. Comparative: https://www.screencast.com/t/jAVYb3fJ3 -->
    <div v-show="selectedBeers.length === 0">
      No beers were found
    </div>
    <div v-show="selectedBeers.length > 0">
     ...

CSS

.accent-color {
  color: #FF6B00;
}

.headers {
  color: #FF6A00;
}

[v-cloak] {
  display: none;
}

JavaScript

const bus = new Vue();

const growler = new Vue({
  el: '#growler',
  methods: {
    executeSearch: function() {
      alert(this.query);
    },
    searchPage: function(id) {
      alert(id);
    },
    buy: function(beer) {
      this.shoppingCart.push(beer);
    },
    updateSubTotal: function() {
      let sub = 0;
      for (let i = 0; i < this.shoppingCart.length; i++) {
        sub += this.shoppingCart[i].price;
      }
      this.subTotal = sub;
    },
    sendName: function() {
      bus.$emit('send-name', this.fullName);

    },
    sendDataToServer: function() {
    let data = {
        appName: this.appName,
        userName: this.fullName
      };
    let json = {
      json: data,
      delay: 3
 		 };
      
      axios.post('http://jsonplaceholder.typicode.com/todos', {
        userId: '1',
        title: 'sasa',
        completed: true
      })
        .then(function(res) {
         	console.log (res.data);
        })
        .catch(function(err) {
          console.log(err.message);
        });
    }
  },
  data: {
    appName: 'Growler',
    appLogo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRC546geBC6vA6yf-gLU217AKy6ToLhJ3mGmTLwnN2HGmiHUm3LRQ',
    appStyleColor: {
      color: '#FF6A00'
    },
    appStyleFont: {
      fontFamily: 'Verdana'
    },
    accentColor: 'accent-color',
    toggleClass: true,
    query: '',
    number: '',
    selectedBeers: [],
    selectedBeer: 'light',
    pages: [{
        name: 'transactions',
        id: 1,
        url: 'page=1'
      },
      {
        name: 'payables and receivables',
        id: 2,
        url: 'page=2'
      },
    ],
    beers: [{
        name: 'Imperial',
        price: 850,
        ibu: '33 i.b.u'
      },
      {
        name: 'Light',
        price: 800,
        ibu: '55 i.b.u'
      }
    ],
    shoppingCart: [],
    subTotal: 0.00,
    firstName: '',
    lastName: '',
    info: null,
    loading: true,
    errored: false
  },
  watch: {
    // This is most useful when...