<div id="app">
  <div class="daily-consumption">
    <div class="top">
      <h1>Alcohol Converter</h1>
      
      <div class="new-drink">
      <button @click="addDrink()" v-if="drinks.length < 3"><i class="far fa-plus-circle"></i> Drink</button>
        <div v-else class="cut-off">Whoa! hold your horses. 🐴</div>
    </div>
    </div>
    <div class="drinks" v-for="(drink, index) in drinks">
      <span class="label"><i class="hide-mobile">{{drink.name}}</i><i class="show-mobile">Calories</i></span>
      <i v-if="index>0" class="delete far fa-times" @click="deleteDrink(index)"></i>
      <input
        type="range"
        v-model="drink.calories"
        min="50"
        max="350"
        @change="setDrink(drink)"
      />
      <span
        class="cal"
        :style="{left: calLeft(drink.calories)}"
            >{{drink.calories}}<i>Cal</i></span>
      <i
        class="icon fas fa-wine-glass-alt"
        :style="{left: calLeft(175)}"
        @click="drink.calories=175;setDrink(drink)"
      ></i>
      <i
        class="icon far fa-wine-glass-alt"
        :style="{left: calLeft(150)}"
        @click="drink.calories=150;setDrink(drink)"
      ></i>
      <i
        class="icon far fa-glass-whiskey-rocks"
        :style="{left: calLeft(100)}"
        @click="drink.calories=100;setDrink(drink)"
      ></i>
      <i
        class="icon fas fa-beer"
        :style="{left: calLeft(210)}"
        @click="drink.calories=210;setDrink(drink)"
      ></i>
      <i
        class="icon far fa-beer"
        :style="{left: calLeft(165)}"
        @click="drink.calories=165;setDrink(drink)"
      ></i>
      <i
        class="icon fal fa-beer"
        :style="{left: calLeft(120)}"
        @click="drink.calories=120;setDrink(drink)"
       ></i>
      <div class="drink-count">
        <span>#<i class="per-day">per day</i></span>
        <button
          @click="drink.count=1"
          :class="{active:drink.count===1}"
         >1</button>
        <button
          @click="drink.count=2"
          :class="{active:drink.count===2}"
         >2</button>
        <button
          @click="drink.count=3"
          :class="{active:drink.count===3}"
         >3</button>
        <button
          @click="drink.count=4"
          :class="{active:drink.count===4}"
         >4</button>
        <button
          @click="drink.count=5"
          :class="{active:drink.count===5}"
         >5</button>    
      </div>
    </div>
  </div>
  
  <div class="toggle-container">
    <div class="toggle">
      <span class="convert-to">Convert to</span>
      <button
        :class="{active: convert==='carbs'}"
        @click="convert='carbs'"
      >Carbs</button>
      <button
        :class="{active: convert==='fat'}"
        @click="convert='fat'"         
      >Fat</button>
    </div>
  </div>
  
  <table>
    <tr class="header">
      <td class="label">&nbsp;</td>
      <td>Drinks</td>
      <td>Calories</td>
      <td v-if="convert==='carbs'" class="grey">Carbs</td>
      <td v-if="convert==='fat'" class="grey">Fat</td>
      <td v-if="convert==='carbs'" class="grey last">Bread Slice<br />Equivalent</td>
      <td v-if="convert==='fat'" class="grey last">Butter (tbsp)<br />Equivalent</td>
    </tr>
    <tr>
      <td class="label">Daily</td>
      <td class="num">{{totalDrinks(1)}}</td>
      <td class="num">{{(totalCalories(1)).toLocaleString(undefined)}}</td>
      <td v-if="convert==='carbs'" class="num grey">{{totalCarbs(1)}}g</td>
      <td v-if="convert==='fat'" class="num grey">{{totalFat(1)}}g</td>
      <td v-if="convert==='carbs'" class="num grey last">{{slicesOfBread(1)}} <i class="far fa-bread-slice"></i></td>
      <td v-if="convert==='fat'" class="num grey last">{{sticksOfButter(1)}} <i class="far fa-cube"></i></td>
    </tr>
    <tr>
      <td class="label">Weekly</td>
      <td class="num">{{totalDrinks(7)}}</td>
      <td class="num">{{(totalCalories(7)).toLocaleString(undefined)}}</td>
      <td v-if="convert==='carbs'" class="num grey">{{totalCarbs(7)}}g</td>
      <td v-if="convert==='fat'" class="num grey">{{totalFat(7)}}g</td>
      <td v-if="convert==='carbs'" class="num grey last">{{slicesOfBread(7)}} <i class="far fa-bread-slice"></i></td>
      <td v-if="convert==='fat'" class="num grey last">{{sticksOfButter(7)}} <i class="far fa-cube"></i></td>
    </tr>
    <tr>
      <td class="label">Monthly</td>
      <td class="num">{{totalDrinks(30)}}</td>
      <td class="num">{{(totalCalories(30)).toLocaleString(undefined)}}</td>
      <td v-if="convert==='carbs'" class="num grey">{{totalCarbs(30)}}g</td>
      <td v-if="convert==='fat'" class="num grey">{{totalFat(30)}}g</td>
      <td v-if="convert==='carbs'" class="num grey last">{{slicesOfBread(30)}} <i class="far fa-bread-slice"></i></td>
      <td v-if="convert==='fat'" class="num grey last">{{sticksOfButter(30)}} <i class="far fa-cube"></i></td>
    </tr>
    <tr>
      <td class="label">Yearly</td>
      <td class="num">{{totalDrinks(365)}}</td>
      <td class="num">{{(totalCalories(365)).toLocaleString(undefined)}}</td>
      <td v-if="convert==='carbs'" class="num grey">{{totalCarbs(365)}}g</td>
      <td v-if="convert==='fat'" class="num grey">{{totalFat(365)}}g</td>
      <td v-if="convert==='carbs'" class="num grey last">{{slicesOfBread(365)}} <i class="far fa-bread-slice"></i></td>
      <td v-if="convert==='fat'" class="num grey last">{{sticksOfButter(365)}} <i class="far fa-cube"></i></td>
    </tr>
  </table>
</div>
body {
  background: linear-gradient(#fbfdfe,#f4f8fb);
  background: #f4f8fb;
  font-family: effra, sans-serif;
  min-height: 100vh;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cut-off {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.6);
  padding: 0 20px;
  user-select: none;
  cursor: not-allowed;
}

h1 {
  font-size: 28px;
  font-weight: bold;
}

*:focus {
  outline: none;
}

.daily-consumption {
  padding: 40px 40px 0 40px;
  width: 100vw;
  box-sizing: border-box;
}

.macro-ratio {
  padding: 50px;
  opacity: .5;
}

.drinks {
  margin: 75px 0 60px 0;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
}

.drinks .delete {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translate(-100%,-50%);
  color: #aaa;
  cursor: pointer;
}

.drinks .label {
  position: absolute;
  top: 50%;
  transform: translate(0, -32px);
  font-weight: bold;
  font-size: 16px;
}

.drinks .icon {
  position: absolute;
  top: -5px;
  transform: translate(-50%, -100%);
  font-size: 20px;
  cursor: pointer;
}

.drinks .cal {
  position: absolute;
  top: 50%;
  transform: translate(-50%, 13px);
  font-size: 24px;
  font-weight: bold;
}

.drinks .cal i {
  position: absolute;
  top: 50%;
  right: -3px;
  transform: translate(100%,calc(-50% + 1px));
  font-size: 12px;
}

.drink-count {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -38px);
  display: flex;
  align-items: center;
}

.drink-count span {
  font-size: 15px;
  margin-right: 5px;
}

.drink-count button {
  font-size: 15px;
  font-weight: bold;
  background: #ecf0f3;
  border: none;
  height: 24px;
  padding: 0 8px;
  margin-left: 5px;
  cursor: pointer;
}

.drink-count button.active {
  background: #000;
  color: #fff;
}

.new-drink {
  text-align: center;
  height: 40px;
}

.new-drink button {
  background: #ffdd3f;
  border: none;
  width: 160px;
  height: 40px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}

table {
  width: 100%;
  width: calc(100% - 80px);
  margin: 0 40px 40px 40px;
}

tr.header {
  border-bottom: 2px solid #000;
  font-size: 16px;
  font-weight: bold;
}

tr.header td {
  padding: 0 20px 3px 0;
  vertical-align: bottom;
  line-height: 1.3;
}

tr {
  border-bottom: 1px solid rgba(0,0,0,.1);
}

td {
  padding: 10px 20px 10px 10px;
  text-align: right;
}

td.num {
  padding-right: 20px;
}

td.label {
  font-size: 16px;
  font-weight: bold;
  width: 90px;
}

td.grey {
  background: rgba(0,0,0,.03);
  width: 90px;
  border-left: 15px solid #f4f8fb;
}

td.last {
  width: 150px;
  border-left: none;
}

td i {
  margin-left: 8px;
}

input[type="range"] { 
    margin: 0;
    -webkit-appearance: none;
    position: relative;
    overflow: hidden;
    height: 20px;
    width: 100%;
    cursor: pointer;
    border-radius: 0; /* iOS */
}

.toggle-container {
  display: flex;
  margin: 0 40px;
  justify-content: flex-end;
  width: 100%;
  width: calc(100% - 80px);
}

.toggle {
  width: 280px;
  background: rgba(0,0,0,.03);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  padding-right: 20px;
  margin-top: -20px;
}

.toggle span {
  margin-right: 10px;
}

.toggle button {
  font-size: 15px;
  font-weight: bold;
  background: #f1f1f1;
  border: none;
  height: 30px;
  margin-left: 0;
  cursor: pointer;
  border: 2px solid #000;
  width: 80px;
}

.toggle button.active {
  background: #000;
  color: #fff;
}

::-webkit-slider-runnable-track {
    background: #ecf0f3;
}

/*
 * 1. Set to 0 width and remove border for a slider without a thumb
 */
::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px; /* 1 */
    height: 30px;
    background: #000;
    box-shadow: -100vw 0 0 100vw #ffdd3f;
    border: 0px solid #fff;
}

::-moz-range-track {
    height: 30px;
    background: #fafafa;
}

::-moz-range-thumb {
    background: #fff;
    height: 30px;
    width: 15px;
    border: 0px solid #000;
    border-radius: 0 !important;
    box-shadow: -100vw 0 0 100vw #ffdd3f;
    box-sizing: border-box;
}

::-ms-fill-lower { 
    background: #ffdd3f;
}

::-ms-thumb { 
    background: #000;
    border: 0px solid #000;
    height: 30px;
    width: 15px;
    box-sizing: border-box;
}

::-ms-ticks-after { 
    display: none; 
}

::-ms-ticks-before { 
    display: none; 
}

::-ms-track { 
    background: #ffdd3f;
    color: transparent;
    height: 30px;
    border: none;
}

::-ms-tooltip { 
    display: none;
}

.per-day {
  margin-left: 2px;
}

  .show-mobile {
    display: none;
  }

@media (max-width: 669px) {
  .new-drink,
  .hide-mobile,
  .convert-to,
  .per-day,
  td,
  i.icon {
    display: none;
  }
  
  .show-mobile {
    display: inline;
  }
  
  tr.header td.grey,
  tr.header td.label,
  td.label,
  td.grey {
    display: table-cell;
  }
  
  td.label {
    width: auto;
  }
  
  .toggle {
    background: transparent;
  }
  
  .new-drink button {
    width: 130px;
  }
}
var app = new Vue({
  el: '#app',
  data: {
    drinks: [
      {
        calories: 165,
        count: 1,
        name: 'Beer'
      }
    ],
    convert: 'carbs'
  },
  methods: {
    addDrink: function() {
      this.drinks.push({
        calories: 165,
        count: 1,
        name: 'Beer'
      });
    },
    deleteDrink: function(index) {
      this.drinks.splice(index, 1);
    },
    calLeft: function(cal) {
      let percent = ((cal-50)/300);
      let width = percent*100;
      let offset = 7.5 - (15*percent);
      return `calc(${width}% + ${offset}px)`;
    },
    setDrink: function(drink) {
      drink.name = this.drinkLabel(drink.calories);
    },
    drinkLabel: function(cal) {
      switch (Number(cal)) {
        case 100:
          return 'Whiskey';
        case 120:
          return 'Lite Beer';
        case 150:
          return 'White Wine';
        case 165:
          return 'Beer';
        case 175:
          return 'Red Wine';
        case 210:
          return 'Craft Beer';
        default:
          return 'Custom';
      }
    },
    slicesOfBread: function(days) {
      let calories = this.totalCalories(1);
      let caloriesPerSlice = 58;
      let slices = calories/caloriesPerSlice;
      return (slices*days).toLocaleString(undefined, {maximumFractionDigits: 0});
    },
    sticksOfButter: function(days) {
      let calories = this.totalCalories(1);
      let caloriesPerStick = 105.75;
      let sticks = calories/caloriesPerStick;
      return (sticks*days).toLocaleString(undefined, {maximumFractionDigits: 0});
    },
    totalDrinks: function(days) {
      let count = 0;
      this.drinks.map(drink => {
        count += drink.count;
      });
      return (count * days).toLocaleString(undefined);
    },
    totalCalories: function(days) {
      let drinks = this.drinks;
      let calories = 0;
      drinks.map(drink => {
        calories += (drink.calories * drink.count * days);
      });
      return calories;
    },
    totalCarbs: function(days) {
      let calories = this.totalCalories(days);
      return (calories/4).toLocaleString(undefined, {maximumFractionDigits: 0});
    },
    totalFat: function(days) {
      let calories = this.totalCalories(days);
      return (calories/9).toLocaleString(undefined, {maximumFractionDigits: 0});
    },
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js