<div>
<button id="click-me">QTY Estimator</button>
</div>

<div id="popup-modal" style="display:none;">

<div id="productcustom" class="reveal-modal large" >
<div class="product-form">
<div class="row">
<label>Room Width(ft)</label>
<input type="number" name="rate" id="rate" />
<label> Room Length(ft)</label>
<input type="number" name="box" id="box" />
<label>Room Area in Sq Ft</label>
<input type="number" name="amount" id="amount"  readonly />
<label>Number of Boxes</label>
<input type="number" name="amount2" id="amount2" readonly />
</div>
</div>
</div>
</div>

<script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    )
    {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            title: 'Qty Estimator',
            buttons: [{
                text: $.mage.__('Continue'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
        };

        var popup = modal(options, $('#popup-modal'));
        $("#click-me").on('click',function(){
            $("#popup-modal").modal("openModal");
        });

    }


  );
  </script>

$('#rate, #box').keyup(function(){
var rate = parseFloat($('#rate').val());
var box = parseFloat($('#box').val());

$('#amount').val(rate * box);
var amount = rate * box;

if(amount != null || amount != undefined) {
  $('#amount2').val(amount / 20);
 }
 });