JSFiddle - React, Tailwind, and code Playground

by Maxiste Deams

HTML

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<svg id='VectorFormula' name='LM317TVoltage' width="400" height="150" onload="UpdateVref();" debug="false" >
  <text x="10" y="20" transform="scale(2.26458333)" style="font-style:normal;font-weight:normal;font-size:10.66666698px;line-height:25px;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" >V</text>
<text x="7" y="10" transform="scale(5)"  style="font-style:normal;font-weight:normal;font-size:2.82222223px;line-height:6.61458302px;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">out
<tspan x="57" y="10" style="font-style:normal;font-weight:normal;font-size:2.82222223px;line-height:6.61458302px;font-family:sans-serif;letter-spacing:-50%;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">Adj</tspan>
<tspan x="64" y="10">2</tspan>
</text>

<text x="13" y="9" transform="scale(5)" style="font-style:normal;font-weight:normal;font-size:2.82222223px;line-height:6.61458302px;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
<tspan x="13" y="9" >=</tspan>
<tspan x="17" y="9" id="vref" name="VoltageRef" >0.00</tspan>
<tspan x="24" y="9">V</tspan>
<tspan x="27" y="9">x</tspan>
<tspan x="52" y="9">+</tspan>
<tspan id='Intensity' name='Intensity' x="56" y="9">I</tspan>
<tspan id='RSecondIntensity' name='R2Intensity' x="62" y="9">R</tspan>
</text>
<text x="75" y="12" transform="scale(2,5)"...

CSS

<style type="text/css">
tspan-text {
font-style:bold;font-weight:normal;font-size:10px;line-height:6.61458302px;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;
}
</style>

JavaScript

function UpdateVref()
  {
   var VForm = SVG( 'VectorFormula' ) ;
   var FormDebug = document.getElementById("VectorFormula") ;
   var IsDebug = new Boolean(false) ;
   if ( String(VForm.attr("debug")).toLowerCase() === "true" )
   {
    IsDebug=true ; 
   }
   
   var VoltageRef = document.getElementById("vref") ; 
   
   //var StrVRef = VoltageRef.textContent ; 
   var StrVRef = VoltageRef.textContent ; 
   
   if ( IsDebug == true ) 
   { 
    alert("Voltage Reference at creation:" + StrVRef ) ;  
   } 
   
   var NmVref = Number( StrVRef ) ;
   
   //var IntVref ;
   var IsUnderVref = new Boolean( NmVref < 1.25 ); 
   var IsOverVref = new Boolean( NmVref > 2.00 ); 
   var IsNoVref= new Boolean( NmVref == 0.0 ) ; 
   var StrAnswer ;
   StrAnswer = "NmVref < 1.25 : __IsUnderVref__\nNmVref > 2.00 : __IsOverVref__\nNmVref == 0.0: __IsNoVref__" ; 
   
   StrAnswer= StrAnswer.replace("__IsUnderVref__",IsUnderVref.toString()) ; 
   StrAnswer= StrAnswer.replace("__IsOverVref__",IsOverVref.toString()) ; 
   StrAnswer= StrAnswer.replace("__IsNoVref__",IsNoVref.toString()) ; 
   
   if ( IsDebug == true ) 
   { 
    alert( StrAnswer ) ; 
   }
   
   if ( IsDebug == true ) 
   { 
    if(  IsUnderVref == true  )
    {
     alert( "Voltage reference must be higher than 1.25 volts ." ) ; 
    }
    if( IsOverVref == true )
    {
      alert( "Voltage reference must be lower than 2.0 Volts." ) ; 
    }
   }
   
   if( IsNoVref == true )
   {
    IntVref=1.25 ; 
    alert("Voltage Reference set to default:" + IntVref ) ;  
   }
   //VoltageRef.value = IntVref.toString() ; 
   //document.getElementById("vref") .value
   
   $(document).ready(function(){$("tspan#vref").text( IntVref.toString() ) ;}); 
   

  }