JSFiddle - React, Tailwind, and code Playground

by suresh ponnukalai

HTML

<form id="audience_details" class="form-horizontal" action="" novalidate>
  
<span class="clearfix">
  <div class="control-group">
        <div class="input-group input-group-lg pull-left">
          <input type="text" placeholder="Audience 1" name="audience_1_field" id="audience_1_field" class="field form-control" />
        </div><a rel="tooltip" type="button" class="link" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo est, rhoncus eget hendrerit eget, suscipit id urna. Integer eleifend imperdiet risus nec sagittis."><span class="glyphicon glyphicon-question-sign"></span></a>
      </div>
</span>


<span class="clearfix">
        <div class="input-group input-group-lg pull-left">
          <input type="text" placeholder="Audience 2" name="audience_2_field" id="audience_2_field" class="field form-control" />
        </div><a rel="tooltip" type="button" class="link" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo est, rhoncus eget hendrerit eget, suscipit id urna. Integer eleifend imperdiet risus nec sagittis."><span class="glyphicon glyphicon-question-sign"></span></a>
</span>


<span class="clearfix">
        <div class="input-group input-group-lg pull-left">
            <input type="text" placeholder="Total Reach" name="reach_field" id="reach_field" class="field form-control" />
        </div> 
            <a rel="tooltip" type="button" class="link" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo est, rhoncus eget hendrerit eget, suscipit id urna. Integer eleifend imperdiet risus nec sagittis.">
            
            <span class="glyphicon glyphicon-question-sign"></span>
           
            </a>
</span>


<span class="clearfix">


          <div...

JavaScript

function audience_details()
{
    var temp = document.getElementById("audience_1_field").value;
    var temp1 = document.getElementById("audience_2_field").value;
    var temp2 = document.getElementById("reach_field").value;
    
    if(temp == "" || temp == null)
    {
        alert("please enter Audience 1 value");
    }
    else if(temp1 == "" || temp1 == null)
    {
        alert("please enter Audience 2 value");
    }
    else if(temp2 == "" || temp2 == null)
    {
        alert("please enter Total Reach value");
    }
    else
    {
     var aud1, aud2, total;
     var aud1 = parseInt(document.getElementById("audience_1_field").value);
     var aud2 = parseInt(document.getElementById("audience_2_field").value);
     var reach = parseInt(document.getElementById("reach_field").value);
     var total = (((aud1 + aud2) - reach ) / aud1) * 100 ;  

      total_field =  parseFloat(total).toFixed(2) + '%';

      estimate =  parseFloat(total).toFixed(2) + '%';
    
      document.getElementById("total_field").value = total_field;
    }   

}