JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<div class="container">
  <h1>How Has My Investment Performed?</h1>

  <p>
    <label for="metal-type">Metal Type</label>
    <select name="metal-type" v-model="type" @change="refresh" @keyup="refresh">
      <option v-for="type in types">{{type}}</option>
    </select>
  </p>

  <p>
    <label for="ounces">Ounces</label>
    <input type="number" v-model="ounces" @change="refresh" @keyup="refresh">
  </p>

  <p>
    <label for="spot-buy-price">Spot Buy Price</label>
    <input type="number" v-model="spotBuyPrice" @change="refresh" @keyup="refresh">
  </p>

  <h2>Outputs</h2>

  <p>
    <label for="current-spot-value">Current Spot Value</label>
    <input disabled :value="currentSpotValue.toFixed(2)">
  </p>
  <p>
    <label for="roi_dollar">ROI $</label>
    <input disabled :value="roiDollar.toFixed(2)" :class="{red: roiDollar < 0, green: roiDollar > 0}">
  </p>
  <p>
    <label for="roi_percent">ROI %</label>
    <input disabled :value="roiPercent !== '' ? (roiPercent * 100).toFixed(2) : ''" :class="{red: roiPercent < 0, green: roiPercent > 0}">
  </p>
</div>

CSS

body {
  text-align: center;
  background: white;
}

input.red {
  background: red;
  color: white;
}

input.green {
  background: green;
  color: white;
}

JavaScript

new Vue({
  el: document.body,
  data: {
    types: ["Gold", "Silver", "Platinum", "Palladium"],
    prices: [10, 20, 30, 40],
    type: "Gold",
    ounces: "",
    spotBuyPrice: "",
    currentSpotValue: "",
    roiDollar: "",
    roiPercent: ""
  },
  methods: {
    refresh: function() {
      if (this.ounces && this.spotBuyPrice) {
        var currentPrice = this.prices[this.types.indexOf(this.type)];
        this.currentSpotValue = this.ounces * currentPrice;
        this.roiDollar = this.ounces * (currentPrice - this.spotBuyPrice);
        this.roiPercent = this.roiDollar / (this.ounces * this.spotBuyPrice);
      } else {
        this.currentSpotValue = this.roiDollar = this.roiPercent = "";
      }
    }
  }
})