JSFiddle - React, Tailwind, and code Playground

by Rushan Sakhibgareev

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>
        <p @change="reset">{{ result }}</p>
    </div>
    <!-- 2) Watch for changes in the "result" and reset the "value" after 5 seconds (hint: setTimeout(..., 5000) -->
    <div>
        <input type="text" v-model="timeout">
        <p>{{ value }}</p>
    </div>
</div>

JavaScript

new Vue({
        el: '#exercise',
        data: {
            value: 0,
            timeout: 5000
        },
        computed: {
           result(){
              if (this.value === 37){
                 return 'done';
              } else {
                 return 'not there yet';
              }
                 
           }
        },
        watch:{
            result(){
               this.reset();
            }
        },
        methods: {
            reset(){
                setTimeout(()=>{
                   this.value = 0;
                },this.timeout); 
            }
        }
    });