JSFiddle - React, Tailwind, and code Playground

by Superman

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
          <div id="cpu">
       <div id="core">
        <div class="core1" value="1">


        </div>
        <div class="core2" value="2">

        </div>
        <div class="core3" value="3">

        </div>
        <div class="core4" value="4">


        </div>
       </div>     
      </div>
      <div id="slider" style="font-size:80%;">
      </div>
      <div id="space_slider">
      </div>

      <div id="recapitulatif">
       <div class="processeur">
        <input type="text" value="1 core" readonly id="text_processeur" name="text_processeur" value="" style="width:90px;height:15px;background-color:transparent;border:0px;margin-left:70px;margin-top:15px;">
       </div>
       <div class="memoire">
        <input type="text" value="1024 Mo" readonly id="text_memoire" name="text_memoire" value="" style="width:90px;height:15px;background-color:transparent;border:0px;margin-left:65px;margin-top:15px;">
       </div>
       <div class="duree">
        <select id="input_duree"  >
          <option value='1'>1</option> 
          <option value='2'>2</option> 
          <option value='3'>3</option> 
          <option value='4'>4</option> 
        </select> 
       </div>
       <div class="prix">
        <input type="text" value="23" readonly id="text_prix" name="text_prix" value="" style="width:20px;height:15px;background-color:transparent;border:0px;margin-left:73px;margin-top:15px;">&euro;
       </div>
      </div>
</body>

CSS

#cpu {
margin-left:120px;
margin-top:7px;
height:155px;
width:516px;
background-image:url('http://www.gl-serv.fr/v3/images/glcore/bg_cpu.png');
background-repeat:no-repeat;
}

#core {
height:150px;
width:516px;
background-image:url('http://www.gl-serv.fr/v3/images/glcore/1.png');
background-repeat:no-repeat;
}


#core .core1{
float:left;
width:129px;
height:150px;
}


#core .core2{
float:left;
width:129px;
height:150px;
}

#core .core3{
float:left;
width:129px;
height:150px;
}

#core .core4{
float:left;
width:129px;
height:150px;
}


#slider {
width:500px;
margin-left:130px;
}

#space_slider {
height:40px;
}

#description-glcore {
width:671px;    
height:235px;
margin-left:40px;
}

#description-glcore .plus{
float:left;
margin-top:50px;
width:170px;
}

#description-glcore .bg_description{
background-image:url('http://www.gl-serv.fr/v3/images/glcore/bg_description.png');
background-repeat:no-repeat;
float:left;
width:501px;
height:235px;

}


#space_recapitulatif {
height:40px;
}

#recapitulatif {
color:black;
margin-left:30px;
background-image:url('http://www.gl-serv.fr/v3/images/glcore/bg_recapitulatif.png');
background-repeat:no-repeat;
height:93px;
width:701px;
}

#recapitulatif .processeur {
float:left;
margin-top:30px;
width:175.25px;
height:63px;
}
#recapitulatif .memoire {
float:left;
margin-top:30px;
width:175.25px;
height:63px;
}
#recapitulatif .duree {
float:left;
margin-top:30px;
width:175.25px;
height:63px;
}
#recapitulatif .prix {
float:left;
margin-top:30px;
width:175.25px;
height:63px;
}

JavaScript

//slider working code example : not by me
var template = "url(http://www.gl-serv.fr/v3/images/glcore/n.png)";

$('#input_duree').live('change',function () {
    //in getElementById you don't put the #, that is for jquery selectors
    //dropdown = document.getElementById('#input_duree');
    dropdown = $('#input_duree');
    //price = document.getElementById('#text_prix');
    price = $('#text_prix');
    price.val( parseInt( price.val() )* parseInt(dropdown.find(':selected').val() ) );
    //price.data = price.value * dropdown.options[dropdown.selectedIndex].value;
    
});

$(document).ready(function(){
//$( "#slider" ).slider({ animate: true });
$("#slider").slider({
    animate: true,
    range: "min",
    value: 1,
    min: 1,
    max: 4,
    change: function(event, ui) {

        
        $("#core").css("background-image", template.replace("n", ui.value)); 
        $("#text_processeur").val(ui.value + ' core'); 
        $("#text_memoire").val(ui.value * 1024 + ' Mo'); 
        $("#text_duree").val('1 mois');
        $("#text_prix").val(ui.value - ui.value + 23 * ui.value *parseInt($("#input_duree option:selected").val())); 


    }
});
    
    


$("#core .core1").click(function(){
    $("#slider").slider("value",1);
  
});

$("#core .core1").click(function(){
    $("#slider").slider("value",1);
  
});
$("#core .core2").click(function(){
    $("#slider").slider("value",2);
});
$("#core .core3").click(function(){
    $("#slider").slider("value",3);
});
$("#core .core4").click(function(){
    $("#slider").slider("value",4);
});


});