JSFiddle - React, Tailwind, and code Playground

by kodisha

HTML

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <div class="out">
    <div class="count" :style="{width: counter + '%'}">{{ counter }}</div>
  </div>
  <button @click="plus">+</button>
  <button @click="plus(10)">++</button>
  <button @click="minus">-</button>
  <button @click="minus(10)">--</button>
</div>

CSS

button {
  margin-top: 10px;
}

.out {
  width: 200px;
  height: 30px;
  background-color: grey;
}

.count {
  background-color: red;
  width: 80%;
  height: 30px;
  transition: width 1500ms;
  text-align: center;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    counter: 10
  },
  methods: {
    plus: function(number) {
      if (number !== undefined) {
        this.counter += number
      } else {
        this.counter++;
      };
    },
    minus: function(number) {
      if (number !== undefined) {
        this.counter -= number
      } else {
        this.counter--;
      };
    }
  }
});