FizzBuzz with Vue

by samonela

HTML

<div id="app">
  <header>
    <h1>
    FizzBuzz with dynamic height container
    </h1>
  </header>
  <div>
   Height: {{ height }}
  </div>
  <input type="range" min="200" max="3000" v-model="height" />
  <div id="listContainer" v-bind:style="{ height: height + 'px'}">
    <ul>
      <li v-for="number in numbers" :class="getClass(number)">
        {{ number | getOutput }}
      </li>
    </ul>
  </div>  
</div>

CSS

body {
  padding: 60px;
  font-family: serif;
}
header > h1 {
   font: 400 20px cursive;
}
input[type="range"] {
  width: 100%;
}
#listContainer {
  overflow-y: hidden;
}

li {
  background: #fff;
  color: #000000;
  border-radius: 4px;
  border: 2px solid #6a737c;
  padding: 3px;
}

li.FizzBuzz {
  border-color: #f800ff; 
}

li.Fizz {
  border-color: #f80000;
}

li.Buzz {
  border-color: #0000ff;
}

Vue

const getindex = (number, index) => index + 1;
const app = new Vue({
  el: "#app",
  data: {
    numbers: new Array(100).fill(1).map(getindex),
    height: 3000
  },
  filters: {
    getOutput: function(number) {
  		if (number % 3 === 0 && number % 5 === 0) return 'FizzBuzz';
      if (number % 3 === 0) return 'Fizz';
      if (number % 5 === 0) return 'Buzz';
      return number;
    }
  },
  methods: {
  	getClass: function(number) {
    	const output = this.$options.filters.getOutput(number);
      if (isNaN(parseInt(output, 10))) {
      	return output;
      }
      return '';
    }
  }
});