JSFiddle - React, Tailwind, and code Playground

by Arnaud

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; media=&quot;screen&quot; href=&quot;bootstrap/css/bootstrap-responsive.min.css&quot; &gt;"></script>
<div class="sim-sliders" ng-controller="simMontantCtrl">

                                   

                 
                
                   <div class="sim-montant sim-slider" >
                 Montant de l'emprunt en Euros :  {{user1.value}} 
                    <div class="range range-assertive" >
                      
                        <input type="range" name="montant" id="montant" min="0" max="{{user1.max}}" value="{{user1-min}}" step="50000" ng-model="user1.value" >
                       
                     
                    
                       </div>
                    </div>

                 
 <div class="sim-duree sim-slider" >
               Durée de l'emprunt en années:  {{user2.value}} 
                    <div class="range range-assertive" >
                      
                        <input type="range" name="duree" id="duree" min="1" max="{{user2.max}}" value="{{user2.min}}" step="1" ng-model="user2.value" >
                       
                     
                      
                       </div>
                    </div>
                
         
            <div class="sim-taux sim-slider" >
               Taux de l'emprunt en pourcentage :  {{user3.value}} 
                    <div class="range range-assertive" >
                      
                        <input type="range" name="taux" id="taux" min="0" max="{{user3.max}}" value="1" step="0.1" ng-model="user3.value" >
                       
                     
                      
                       </div>
                    </div>
                
                                    
                      
                       Mensualités en Euro :
                          
                          <input name="mensualite" class="Style3" id="mensualite" type="text">
                    ...

JavaScript

.controller('simMontantCtrl', function($scope) {

 $scope.user1= {
        min:0,
        max:10000000
     
    };


$scope.user2= {
        min:0,
        max:60
     
    };
	
$scope.user3= {
        min:0,
        max:25
     
    };
	
})
;

function calcul(e){
	//var obj=document.form_calcul2;
	var C=document.getElementsByName("montant")[0].value;
	var t=document.getElementsByName("taux")[0].value;
	var m=document.getElementsByName("mensualite")[0].value;
	var n=document.getElementsByName("duree")[0].value;
	var temp=0;
	var msg="";
	var msg1="";
	var msg2="";
	var msg3="";
	var msg4="";
	var msg5="";
	var msg6="";	
	
	msg1="- Au moins un des champs obligatoires est vide.\n";
	msg2= "- Le champ taux est invalide.\n" ;
	msg3= "- Le champ durée est invalide.\n" ;
	msg4= "- Vous devez laisser le champ montant ou le champ mensualité vide.\n" ;
	msg5= "- Le champ montant est invalide.\n" ;
	msg6= "- Le champ mensualité est invalide.\n" ;
	
	t=t.replace(",",".");
	
	if((t==="")||(n==="")) msg+=msg1;
	else if((t!=="")&&(n!=="")){
		if(isNaN(t)){
			msg+=msg2;
			//obj.taux.value="";
		    document.getElementsByName("taux")[0].value="";
		}
		if(isNaN(n)){
			msg+=msg3;
			//obj.duree.value="";
			document.getElementsByName("duree")[0].value="";
		}
	}
	if ((m!=="")&&(C!=="")) msg+=msg4;
	else if((m==="")&&(C==="")) msg+=msg4;
	else if((C!=="")&&(isNaN(C))){
		msg+=msg5;
		//obj.montant.value="";
		document.getElementsByName("montant")[0].value = "";
	}else if((m!=="")&&(isNaN(m))){
		msg+=msg6;
		//obj.mensualite.value="";
		document.getElementsByName("mensualite")[0].value = "";
	}
	if(msg===""){
		if(C!==""){
			vtaux=t/1200;
			vduree=n*12;
			temp=1+vtaux;
			temp=Math.pow(temp,...