30 Days of Vue - Day 5 -Watching for changes

In this example below you will see how to do a 30 Days of Vue - Day 5 -Watching for changes with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by lilianab, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lilianab ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>30 Days of Vue - Day 5 -Watching for changes</title>
  <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app">
  <button v-on:click="counter++">
    Increase</button>
   <button v-on:click="counter--">
    Decrease</button>
  <p>Counter: {{ counter}}</p>
  <p>Result: {{ result() }}</p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/lilianab/30-days-of-vue-day-5-watching-for-changes-XqOJWK */
::-webkit-input-placeholder {
  color: #76FF03;
  opacity: 0.3;
}

:-ms-input-placeholder {
  color: #76FF03;
  opacity: 0.3;
}

::-ms-input-placeholder {
  color: #76FF03;
  opacity: 0.3;
}

::placeholder {
  color: #76FF03;
  opacity: 0.3;
}

body {
  font-family: 'Inconsolata', sans-serif;
  font-size: 16px;
  height: 100vh;
}
body #app {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #000;
  flex-direction: column;
  padding: 30px;
}
body button {
  font-family: 'Inconsolata';
  cursor: pointer;
  background: black;
  border: 1px solid #76FF03;
  color: #76FF03;
  font-size: 1.5em;
  padding: 10px;
  margin-bottom: 20px;
}
body button:focus {
  outline: none;
}
body p {
  color: #76FF03;
  font-size: 2em;
  display: block;
}


/*Downloaded from https://www.codeseek.co/lilianab/30-days-of-vue-day-5-watching-for-changes-XqOJWK */
new Vue({
  el: '#app',
  data: {
   counter: 0
  },
  watch: {
    counter: function(value) {
      var vm = this;
      setTimeout(function() {
        vm.counter = 0;
      }, 2000);
  }
  },
  methods: {
    result: function() {
      return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
    }
  }
});

Comments