Calories Calculator using Vue

Tue Aug 28, 2018

There are various theories behind how many calories one should eat. One of the strategy is to eat calories required to maintain your goal weight. This way you will not need to change your diet once you reach your goal weight. I like this formula for its simplicity. (Just learned that this formula seems to apply to men in their 20s only. I will update this soon with more comprehensive formula.)

And I have been playing with Vue.js, so I built this quick calculator for fun and profits.

Total calories to eat: {{ calories }}

Protein: {{ protein }} grams
Calories from Protein: {{ protein_calories }}

Fat: {{ fat }} grams
Calories from fat: {{ fat_calories }}

Carbs: {{ carbs }} grams
Calories from carbs: {{ carbs_calories }}

Code

var app = new Vue({
  el: '#app',
  data: {
    gw: 180,
    hours: 1,
  },
  computed: {
    calories: function () {
      return parseInt(this.gw) * (9 + parseInt(this.hours))
    },
    protein: function () {
      return parseInt(this.gw)
    },
    protein_calories: function () {
      return parseInt(this.gw) * 4
    },
    fat: function () {
      return parseInt(this.gw) * 0.5
    },
    fat_calories: function () {
      return this.fat * 9
    },
    carbs: function () {
      return this.carbs_calories / 4
    },
    carbs_calories: function () {
      return this.calories - (this.protein_calories + this.fat_calories)
    }
  }
})