Múltiplo de 3 mais próximp

by joplomacedo

HTML

<div id="app">
  <div class="form">
    <div class="form__row">
      <label class="field">
        <span class="field__label">Múltiplo de:</span>
        <span class="field__wrapper">
          <input class="field__field" v-model.number="num1">
        </span>
      </label>
    </div>

    <div class="form__row">
      <label class="field">
        <span class="field__label">Mais próximo de:</span>
        <span class="field__wrapper">
          <input class="field__field" v-model.number="num2">
        </span>
      </label>
    </div>
  </div>

  <div class="result">
    <p>Resultado:</p>
    <p>{{result}}</p>
  </div>
</div>

CSS

*,
*:after,
*:before {
   box-sizing: border-box;
   font: inherit;
   color: inherit;
   padding: 0;
   border: 0;
   margin: 0;
   border-radius: 0;
}

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

.field,
.field__label,
.field__wrapper,
.field__field {
  display: block;
}

.field__field {
  padding: .7em;
  border: 1px solid #aaa;
}

.form {
  margin-bottom: 2em;
}

.form__row {
  margin-bottom: 1em;
}

.result {
  border-top: 1px solid #999;
  padding-top: 2em;
}

Vue

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