Múltiplo de 3 mais próximp

by joplomacedo

HTML

<div id="app">
  <h2>Múltiplo de 3 mais próximo de:</h2>
  <p>
    <input v-model.number="num">
  </p>
  <div>
    <h3>Resultado:</h3>
    <p>{{result}}</p>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    num: '',
  },
  computed: {
  	result() {
    	return this.getMultipleOfNum1ClosestToNum2(3, this.num, 'up');
    }
  },
  methods: {
  	getMultipleOfNum1ClosestToNum2(num1, num2, closestDirection) {
    	const excess = num2%num1;
     	
      if ( !excess ) {
	    	return num2;
      }
      
      if ( closestDirection ===  'up' ) {
      	return num2 - excess + num1;
      } else {
        return num2 - excess;
      }
    }
  }
})