JSFiddle - React, Tailwind, and code Playground

by Nicholas Bridgemohan

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row col-sm-4">
  Solid (g)
  <input name="type" type="radio" id="solid_radio">
  <br> Liquid (l)
  <input name="type" type="radio" id="liquid_radio">
  <br> Volume (cm3)
  <input name="type" type="radio" id="volume_radio">
  <br>
</div>


<div class="row">
  <label class="col-sm-1"></label>
  <div class="col-sm-2">
    <input type="text" id="input1" class="form-control">
  </div>

  <div class="col-sm-1" id="none">
    <select class="form-control multiplier">
      <option val="1">Select a Form</option>

    </select>
  </div>

  <div class="col-sm-1 metric_div" id="solid">
    <select class="form-control" class="multiplier">
      <option val="1000">kg</option>
      <option val="1">g</option>
      <option val="453.592">lbs</option>
    </select>
  </div>

  <div class="col-sm-1 metric_div" id="liquid">
    <select class="form-control" class="multiplier">
      <option>liters</option>
      <option>bbl</option>
    </select>
  </div>

  <div class="col-sm-1 metric_div" id="volume">
    <select class="form-control" class="multiplier">
      <option>cm3</option>
      <option>m3</option>
      <option>y3</option>
    </select>
  </div>
</div>


<div class="row">
  <div class="col-sm-2">
    <input type="text" disabled id="result" class="col-sm-1 form-control">
  </div>


</div>

JavaScript

$(document).ready(function() {

  $(".metric_div").hide();

  $("#solid_radio").click(function() {
    $("#solid").show();
    $("#liquid").hide();
    $("#volume").hide();
    $("#none").hide();
  });

  $("#liquid_radio").click(function() {
    $("#solid").hide();
    $("#liquid").show();
    $("#volume").hide();
    $("#none").hide();
  });

  $("#volume_radio").click(function() {
    $("#solid").hide();
    $("#liquid").hide();
    $("#volume").show();
    $("#none").hide();
  });

  $("#input1").change(function() {
    console.log($("#input1").val());
    var input1 = $("#input1").val();
    var multiplier=$(".multiplier").val()
    console.log(multiplier);
    $("#result").val(input1 * multiplier);
  });


});