Vue.js Watchers

A Color Changing Clock using Vue.js Watcher.

HTML

<div id="app">
  {{date}}
</div>

CSS

#app {
  width: 300px;
  height: 100px;
  border: 1px solid lightgrey;
  text-align: center;
  padding: 20%;
  font-size: 70px;
  box-shadow: 1px 1px 1px grey;
}

JavaScript

function hashCode(str) { // java String#hashCode
  var hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return hash;
}

function intToRGB(i) {
  var c = (i & 0x00FFFFFF)
    .toString(16)
    .toUpperCase();

  return "00000".substring(0, 6 - c.length) + c;
}

var app = new Vue({
  el: '#app',
  data: {
    date: ''
  },
  created: function() {
    this_1 = this;
    setInterval(function() {
      var time = new Date();
      this_1.date = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
    }, 1000)
  },
  watch: {
    date: function(val) {
      this.$el.style.backgroundColor = '#' + intToRGB(hashCode(val + val.split(':')[2]));
    }
  }
});