10550 sujets

JavaScript, DOM et API Web HTML5

Bonjour à vous le forum,

Je suis depuis plusieurs semaines, en train de créer un calculateur de nicotine pour la boite dans laquelle je travaille (vente de produits pour cigarette électronique).
Je me suis attelé à créer, à l'aide de JQUERY, l'interface de mon calculateur.
Cependant, je bloque sur le calcul lui même, qui n'est en soit pas compliqué, mais qui demande des compétences que pour le moment je n'ai pas.
J'ai commencé les cours de JS sur openclassroom, mais mon boss, commence à me presser un peu pour obtenir un résultat concluant.

Je sais que ce n'est pas très correct de demander une aide qui commence à presque 0, mais je fais appel à votre bonne volonté pour m'aider.

Le principe est assez simple à expliquer, mais sa mise en oeuvre, est pour moi, complexe.

Le but c'est que les personnes puissent fabriquer leur propre liquide de cigarette électronique avec 3 éléments :
1) une base neutre exprimée en ml
2) une quantité de nicotine exprimée en ml et traduit en quantité de flacon
3) une quantité d'arôme exprimée en % et traduit en ml

Considérons par exemple que je veuilles faire 200ml de liquide aromatisés à la menthe et ayant une valeur de 6mg de nicotine.
Sachant qu'un flacon de 10ml de nicotine représente 20mg/ml
Sachant que l'arôme est en moyenne de 15%
Et enfin, sachant que la base neutre ne contient ni arôme ni nicotine.

Vous pourrez trouver un exemple sur le site suivant
https://www.lepetitvapoteur.com/fr/content/69-calculateur-diy


Voici le code HTML/CSS/JS/JQUERY qui est déjà en place :
<meta charset="utf-8">
<title></title>
<link href="jquery-ui.css" rel="stylesheet" />
<style type="text/css">body{
		font-family: "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	select {
		width: 200px;
	}
</style>
<h1>Calculateur de nicotine</h1>

<div class="ui-widget">
<p>Calculez votre besoin en nicotine</p>
</div>

<p id="yui_3_18_1_1_1557224753026_201"><button class="ui-button ui-corner-all ui-widget" id="dialog-link">A propos de la nicotine</button></p>
<!-- ui-dialog --><!-- Checkboxradio -->

<h2 class="demoHeaders">Taux de nicotine souhaité</h2>

<div class="ui-controlgroup ui-controlgroup-horizontal ui-helper-clearfix" id="radioset" role="toolbar"><input class="ui-checkboxradio ui-helper-hidden-accessible" id="radio1" name="radio" type="radio" value="0" /><label class="ui-button ui-widget ui-checkboxradio-radio-label ui-controlgroup-item ui-checkboxradio-label ui-corner-left" for="radio1"><span class="ui-checkboxradio-icon-space"> </span>0</label> <input class="ui-checkboxradio ui-helper-hidden-accessible" id="radio2" name="radio" type="radio" value="3" /><label class="ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-label ui-controlgroup-item" for="radio2"><span class="ui-checkboxradio-icon-space"> </span>3</label> <input class="ui-checkboxradio ui-helper-hidden-accessible" id="radio3" name="radio" type="radio" value="4" /><label class="ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-label ui-controlgroup-item" for="radio3"><span class="ui-checkboxradio-icon-space"> </span>4</label> <input class="ui-checkboxradio ui-helper-hidden-accessible" id="radio4" name="radio" type="radio" value="6" /><label class="ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-label ui-controlgroup-item" for="radio4"><span class="ui-checkboxradio-icon-space"> </span>6</label> <input class="ui-checkboxradio ui-helper-hidden-accessible" id="radio5" name="radio" type="radio" value="9" /><label class="ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-label ui-controlgroup-item" for="radio5"><span class="ui-checkboxradio-icon-space"> </span>9</label> <input class="ui-checkboxradio ui-helper-hidden-accessible" id="radio6" name="radio" type="radio" value="12" /><label class="ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-label ui-controlgroup-item" for="radio6"><span class="ui-checkboxradio-icon-space"> </span>12</label> <input class="ui-checkboxradio ui-helper-hidden-accessible" id="radio7" name="radio" type="radio" value="16" /><label class="ui-button ui-widget ui-checkboxradio-radio-label ui-controlgroup-item ui-checkboxradio-label ui-corner-right" for="radio7"><span class="ui-checkboxradio-icon-space"> </span>16</label></div>
<!-- Autocomplete -->

<h2 class="demoHeaders">Quantité de base finale souhaitée (en ml)</h2>

<div><input autocomplete="off" class="ui-autocomplete-input focusSelectAll-ok" id="autocomplete" title="Quantité en ml" /></div>
<!-- Controlgroup -->

<h2 class="demoHeaders">Arôme</h2>

<fieldset><legend>Concentré en %</legend>

<div class="ui-controlgroup ui-controlgroup-horizontal ui-helper-clearfix" id="controlgroup" role="toolbar"><select id="car-type" style="display: none;"><option>814</option><option>Nuage des Iles</option><option>SuperVape</option><option>Cloud Vapor</option><option>XXX</option><option>YYY</option><option>Z</option> </select><span aria-activedescendant="ui-id-2" aria-autocomplete="list" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-labelledby="ui-id-2" aria-owns="car-type-menu" class="ui-selectmenu-button ui-button ui-widget ui-controlgroup-item ui-selectmenu-button-closed ui-corner-left" id="car-type-button" role="combobox" tabindex="0"><span class="ui-selectmenu-text">814</span></span> <span class="ui-widget ui-widget-content ui-controlgroup-item ui-spinner ui-corner-right"><input autocomplete="off" class="ui-spinner-input focusSelectAll-ok" id="horizontal-spinner" role="spinbutton" /><a aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-button-icon-only ui-spinner-up" role="button" tabindex="-1"><span class="ui-button-icon-space"> </span></a><a aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-button-icon-only ui-spinner-down" role="button" tabindex="-1"><span class="ui-button-icon-space"> </span></a></span></div>
</fieldset>
<!-- Button -->

<h2 class="demoHeaders">Calcul</h2>

<p><button class="ui-button ui-corner-all ui-widget" id="button">Calcul</button><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></p>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><script>

$( "#accordion" ).accordion();



var availableTags = [
	"ActionScript",
	"AppleScript",
	"Asp",
	"BASIC",
	"C",
	"C++",
	"Clojure",
	"COBOL",
	"ColdFusion",
	"Erlang",
	"Fortran",
	"Groovy",
	"Haskell",
	"Java",
	"JavaScript",
	"Lisp",
	"Perl",
	"PHP",
	"Python",
	"Ruby",
	"Scala",
	"Scheme"
];
$( "#autocomplete" ).autocomplete({
	source: availableTags
});



$( "#button" ).button();
$( "#button-icon" ).button({
	icon: "ui-icon-gear",
	showLabel: false
});



$( "#radioset" ).buttonset();



$( "#controlgroup" ).controlgroup();



$( "#tabs" ).tabs();



$( "#dialog" ).dialog({
	autoOpen: false,
	width: 400,
	buttons: [
		{
			text: "Ok",
			click: function() {
				$( this ).dialog( "close" );
			}
		},
		{
			text: "Cancel",
			click: function() {
				$( this ).dialog( "close" );
			}
		}
	]
});

// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
	$( "#dialog" ).dialog( "open" );
	event.preventDefault();
});



$( "#datepicker" ).datepicker({
	inline: true
});



$( "#slider" ).slider({
	range: true,
	values: [ 17, 67 ]
});



$( "#progressbar" ).progressbar({
	value: 20
});



$( "#spinner" ).spinner();



$( "#menu" ).menu();



$( "#tooltip" ).tooltip();



$( "#selectmenu" ).selectmenu();


// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
	function() {
		$( this ).addClass( "ui-state-hover" );
	},
	function() {
		$( this ).removeClass( "ui-state-hover" );
	}
);
</script>


Merci d'avance à ceux qui peuvent m'aider
Administrateur
Bonjour,

a écrit :
Sachant que l'arôme est en moyenne de 15%

Je n'ai pas compris cette partie-là : est-ce que dans le résultat final il y a 15% d'arôme (donc 85% de neutre+truc à nicotine et 15% d'arôme) ou bien à 100 mL de neutre+truc à nicotine on ajoute 15 mL d'arôme (on se retrouve avec 115 mL de produit et la concentration en arôme est de 15/115 donc ~13%) ou variante 100 mL de neutre, 15 mL d'arôme et ce qu'il faut de truc à nicotine (là c'est lourd à calculer Smiley langue ) ?
Bonjour à vous,
Désolé pour le retard de ma réponse ...
@laurent : oui j'ai posé sur papier dont voici le résultat :
- BASE_FINALE est un nombre exprimé en ml (soit la quantité de produit fini nicotiné et aromatisé). Il est au format texte libre
- TxNico est un nombre exprimé en ml (1 flacon de nicotine = 10ml max pour un taux de 20mg/ml). Il est au format bouton
- AROME est un nombre exprimé en %. Il est au format texte libre

le calcul algorithmique final est le suivant :
AROME = (base_finale*arome/100)
Nicotine = base_finale*TxNico/20
Nombre de flacons de nicotine = base_finale*TxNico/200
Base = (base_finale-(base_finale*TxNico/20)-(base_finale*arome/100))
Modifié par ajja17r (10 May 2019 - 07:32)
Felipe a écrit :
Bonjour,

Sachant que l'arôme est en moyenne de 15%
le résultat final il y a 15% d'arôme (donc 85% de neutre+truc à nicotine et 15% d'arôme)


Bonjour Felipe,

Merci pour ton retour,
C'est exactement ça, seulement seul l'arôme est exprimé en % puis traduit en ml comme l'algorithme en réponse à Laurent
Imaginons que je veuilles 100ml de produit aromatisé en 6mg de nicotine, il me faut donc (toujours selon l'algorithme au dessus) :
- 55ml de base neutre
- 30ml de nicotine (soit 3 flacons de nicotine à 20mg/ml pour une flacon de 10ml)
- 15 ml d'arôme

Ma difficulté est de traduire cet algo en java, de récupérer les infos du bouton sélectionné pour la nicotine, texte libre pour la base neutre et du % d'arôme, d'en faire le calcul en cliquant sur le bouton "calcul" et enfin d'afficher le résultat sur la même page.

Bref, il me manque la fin...

Merci pour votre aide Smiley smile
Modifié par ajja17r (10 May 2019 - 07:37)
Salut,

Et bien si tu as la formule il ne te reste qu'a la poser en code.
Tu crées :
- une variable pour chacun des éléments
- une fonction qui prend les variables en entrée et fait le calcul
- et enfin tu attache a chaque champ qui met a jour une variable une event listner qui va recalculer à la volée avec la nouvelle value

Tu as pu avancer depuis ?


[Edit] Par contre j'ai un petit doute sur tes calculs... tu les a testé avec des valeurs ? Tu tombes sur les bon résultats ? [Edit]
Modifié par _laurent (13 May 2019 - 15:45)
Bonjour Laurent,

Merci pour ton retour.

J'ai pu légèrement avancer car j'ai un taf prenant dans tous les sens...

Bref, mon soucis est bien de passer la formule en code, car le JS pour le moment je ne maitrise pas bien (mais alors pas bien du tout !).

Côté calcul, normalement je suis OK, mais où as tu un petit doute... Toi même tu sais que lorsqu'on à la tête dans le guidon... Smiley cligne
Oui pour la tete dans le guidon c'est clair !

Pour le calcul c'est juste pur etre sur qu'il est bon, je ne vais pas m’embêter a tout recalculer hahaha

Du coup reprend juste ce que tu as écris :
ajja17r a écrit :

- BASE_FINALE est un nombre exprimé en ml (soit la quantité de produit fini nicotiné et aromatisé). Il est au format texte libre
- TxNico est un nombre exprimé en ml (1 flacon de nicotine = 10ml max pour un taux de 20mg/ml). Il est au format bouton
- AROME est un nombre exprimé en %. Il est au format texte libre

le calcul algorithmique final est le suivant :
AROME = (base_finale*arome/100)
Nicotine = base_finale*TxNico/20
Nombre de flacons de nicotine = base_finale*TxNico/200
Base = (base_finale-(base_finale*TxNico/20)-(base_finale*arome/100))


et passe le en JS en faisant une fonction avec les calculs. Je pourrais le faire mais c'est pas le but du forum Smiley cligne On te guidera en fonction de ce que tu écris !
Il n'y a pas de piege normalement hein
Bonjour,

Voilà, j'ai fais ce qu'il faut.

Cependant, j'arrive pas à le caler dans mon code ci dessus et surtout en cliquant sur le bouton "calculer" je voudrais qu'il apparaisse...

Pour le moment je bloque...

https://jsfiddle.net/r2h4pozm/1/


au niveau du code modifié voilà où j'en suis :
		<input type="radio" id="radio1" name="taux_nicotine" value=0><label for="radio1">0</label>
		<input type="radio" id="radio2" name="taux_nicotine" value=3><label for="radio2">3</label>
		<input type="radio" id="radio3" name="taux_nicotine" value=4><label for="radio3">4</label>
		<input type="radio" id="radio4" name="taux_nicotine" value=6><label for="radio4">6</label>
		<input type="radio" id="radio5" name="taux_nicotine" value=9><label for="radio5">9</label>
		<input type="radio" id="radio6" name="taux_nicotine" value=12><label for="radio6">12</label>
		<input type="radio" id="radio7" name="taux_nicotine" value=16><label for="radio7">16</label>


De plus pour des raisons que sont indépendante de ma (bonne volonté), je ne peux pas utiliser de JS en fichier à part. Donc j'ai utilisé l'API de google en conséquence avec ce code avant la fermeture du </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Modifié par ajja17r (17 May 2019 - 10:22)
Bah c'est plutôt cool ça !

Pour que ça se déclenche au click il faut juste changer le EventListener de "change" à "click"

var button = document.getElementById("button");
button.addEventListener("click", fonctionquicalcule);


On peut du coup sortir ton calcul dans une fonction à part :

function fonctionquicalcule() {
  const baseFinale = form.base_finale.value;
  const tauxNicotine = form.taux_nicotine.value;
  const tauxArome = form.arome.value;
  if (baseFinale && tauxNicotine && tauxArome) {
    var qteArome = baseFinale * tauxArome / 100;
    var qteNicotine = baseFinale * tauxNicotine / 20;
    
    form.out_arome.value = qteArome;
    form.out_nicotine.value = qteNicotine;
    form.out_flacons_nicotine.value = qteNicotine / 10;
    form.out_base_neutre.value = baseFinale - qteArome - qteNicotine;
  }
}


Et au passage plutôt que const (pour constante) utilise var pour déclarer tes variables (c'est dans le nom).

https://jsfiddle.net/undless/kx1c79jb/2/
Meilleure solution
Merci pour ton retour.
Maintenant, j'essaie d'appliquer le CSS, comme remettre les boutons de sélection de nicotine et la liste des fabricants d'arômes pour obtenir une interface "agréable" comme les images ci-dessous

upload/1558084188-73072-capture1.jpg

upload/1558084205-73072-capture2.jpg
Bon j'avance bien ! (grâce à toi Laurent !!)

Voici l'intégralité du code. Mais j'aimerais qu'au niveau des % d'arôme on est le même design que l'image précédente et une valeur par défaut de 10%... (on en veut toujours plus hein !?)

<form id="calculateur">
<div class="ui-widget">
</div>
	
<p>
	<button id="dialog-link" class="ui-button ui-corner-all ui-widget">
		<span class="ui-icon ui-icon-newwin"></span>A propos de la nicotine
	</button>
</p>
<!-- ui-dialog -->
<div id="dialog" title="A propos de la nicotine">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

  <p>
  <h2 class="demoHeaders">Quantité de base finale souhaitée (ml)</h2>
    <input id="base_finale" type="number" min=0>
    <label for="base_finale">Base finale (ml)</label>
  </p>

  <p>
  <h2 class="demoHeaders">Taux de nicotine souhaité</h2>
   <div id="radioset">
    <input type="radio" id="radio0" name="taux_nicotine" value=0><label for="radio0">0</label>	
    <input type="radio" id="radio2" name="taux_nicotine" value=2><label for="radio2">2</label>	
    <input type="radio" id="radio3" name="taux_nicotine" value=3><label for="radio3">3</label>
	<input type="radio" id="radio6" name="taux_nicotine" value=6><label for="radio6">6</label>
	<input type="radio" id="radio9" name="taux_nicotine" value=9><label for="radio9">9</label>
	<input type="radio" id="radio12" name="taux_nicotine" value=12><label for="radio12">12</label>
  </div>
  </p>

<!-- Controlgroup -->
<h2 class="demoHeaders">Arôme</h2>

<fieldset>
	<legend>% de concentré</legend>
	<div id="controlgroup">
		<select>
			<option >814</option>
			<option>Nuage des Iles</option>
			<option>SuperVape</option>
			<option>Cloud Vapor</option>
			<option>XXX</option>
			<option>YYY</option>
			<option>Z</option>
		</select>
		<input id="arome" type="number" min=0>
	
	
</fieldset>


    
	</div>
  <h2 class="demoHeaders">Ce dont vous avez besoin</h2>
  <p>
    <output id="out_base_neutre" name="out_base_neutre"></output>
    <label for="out_base_neutre">ml de base neutre</label>
  </p>
  <p>
    <output id="out_nicotine" name="out_nicotine"></output>
    <label for="out_nicotine">ml de nicotine</label>
  </p>
  <p>
    <output id="out_flacons_nicotine" name="out_flacons_nicotine"></output>
    <label for="out_flacons_nicotine">flacon(s) de nicotine</label>
  </p>
  <p>
    <output id="out_arome" name="out_arome"></output>
    <label for="out_arome">ml d'arômes</label>
  </p>
</form>

  <button class="ui-button ui-corner-all ui-widget" id="button">Calcul</button>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<script>
var form = document.getElementById("calculateur");

var button = document.getElementById("button");
button.addEventListener("click", fonctionquicalcule);

function fonctionquicalcule() {
  var baseFinale = form.base_finale.value;
  var tauxNicotine = form.taux_nicotine.value;
  var tauxArome = form.arome.value;
  if (baseFinale && tauxNicotine && tauxArome) {
    var qteArome = baseFinale * tauxArome / 100;
    var qteNicotine = baseFinale * tauxNicotine / 20;
    
    form.out_arome.value = qteArome;
    form.out_nicotine.value = qteNicotine;
    form.out_flacons_nicotine.value = qteNicotine / 10;
    form.out_base_neutre.value = baseFinale - qteArome - qteNicotine;
  }
}

//Bouton A propos de la nicotine
$( "#dialog" ).dialog({
	autoOpen: false,
	width: 400,
	buttons: [
		{
			text: "Ok",
			click: function() {
				$( this ).dialog( "close" );
			}
		},
		{
			text: "Cancel",
			click: function() {
				$( this ).dialog( "close" );
			}
		}
	]
});

//Bouton Radio Nicotine
$( "#radioset" ).buttonset();

//Affichage choix d'arome
$( "#controlgroup" ).controlgroup();

// Lien d'ouverture pour A propos de la nicotine
$( "#dialog-link" ).click(function( event ) {
	$( "#dialog" ).dialog( "open" );
	event.preventDefault();
});

</script>


upload/1558092442-73072-capture7.jpg
Modifié par ajja17r (17 May 2019 - 13:29)
ajja17r a écrit :
Bon j'avance bien ! (grâce à toi Laurent !!)

Avec plaisir

ajja17r a écrit :
Voici l'intégralité du code. Mais j'aimerais qu'au niveau des % d'arôme on est le même design que l'image précédente et une valeur par défaut de 10%... (on en veut toujours plus hein !?)

Tu devrais en faire un autre sujet avec juste le bout de html a styler, d'autres pourront t'aider.
En règle général fait un nouveau sujet pour chaque pb distinct sinon ca mélange tout et t'auras moins d'aide.

Pour la value par défaut :
<input type="number" value="12">


Bonne journée !
Laurent,

Merci pour ta précieuse aide ! Je vais ouvrir en effet un nouveau sujet Smiley smile
Je passe celui-ci en résolu !!

MERCI ENCORE ! Smiley biggrin
Modifié par ajja17r (18 May 2019 - 10:23)