JSFiddle - React, Tailwind, and code Playground

by nevkatz

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="exercise">
    <!-- 1) Show a "result" of 'not there yet' as long as "value" is not equal to 37 - you can change "value" with the buttons. Print 'done' once you did it -->
    <div>
        <p>Current Value: {{ value }}</p>
        <button @click="value += 5">Add 5</button>
        <button @click="value += 1">Add 1</button>
        <button @click="value -= 1">Subtract 1</button>
        <button @click="value -= 5">Subtract 5</button>
        <p>{{ output }}</p>
    </div>
    <!-- 2) Watch for changes in the "result" and reset the "value" after 5 seconds (hint: setTimeout(..., 5000) -->
    <div>
        <input type="text">
        <p>{{ value }}</p>
    </div>
    <!-- setTimeout only fires when you get to the exact limit because it is a COMPUTED property. -->
</div>

JavaScript

new Vue({
      el: "#exercise",
      data: {
        value: 0,
        result: "not there yet"
      },
      computed: {
      	output: function() {
        	return this.value === 37 ? "done" : "not there yet"
        }
      },
      watch: {
      	result: function() {
        	var vm = this
         setTimeout(function() {
            vm.value = 0
          }, 5000)
        }
      }
    })