JSFiddle - React, Tailwind, and code Playground

by Raymund Macaalay

HTML

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.5/clipboard.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <div class="row">
            <div class="col-md-6">
                From
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input id="AmountFrom" class = "form-control input-largest" step = "0.01" type = "number" />
                </div>
            </div>
            <div class="col-md-6">
                To
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input type="text" id="AmountTo" class="form-control input-largest" readonly data-clipboard-action="copy" data-clipboard-target="#AmountTo" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6"><br />&nbsp;</div>
            <div class="col-md-6"><br /><span id="messageBox" class="text-success" style="display: block; text-align: center"></span></div>
        </div>

JavaScript

var clipboard = new Clipboard('#AmountTo');
clipboard.on('success', function (e) {
  $("#messageBox").text("Amount Successfully Copied!").show().fadeOut(2000);

  e.clearSelection();
});

clipboard.on('error', function (e) {
  $("#messageBox").text("Error Copying Amount").show().fadeOut(2000);
});

$('#AmountFrom').click(function () {
  $("#AmountFrom").val("");
});

 $("#AmountFrom").keyup(function () {
  var amountFrom = $('#AmountFrom').val();
  var rate = 1.80;
  var convertedAmount = amountFrom * rate;
  $('#AmountTo').val(convertedAmount.toFixed(2));
});