Bonjour,

J'aimerais avoir de l'aide pour créer cela :
en javascript.

avez-vous des tuto ou autres à me proposer ?

En vous remerciant !

Ce n'est pas très dur à réaliser, sur quoi bloques tu ?

je bloque sur tout.
Bon j'ai uniquement créer un bouton calculer et qui me calcule 2 nombres par exemple et c'est tout.

Le 24 juin 2021 à 11:18:33 :
je bloque sur tout.
Bon j'ai uniquement créer un bouton calculer et qui me calcule 2 nombres par exemple et c'est tout.

Le truc c'est qu'on ne fait pas les devoir ici alors il va falloir décomposer le problème pour qu'on puisse t'aider.

Tu as réussi à créer ta mise en page en HTML ?

Oui c'est normal.
à vrai dire, j'en suis là maintenant.

Je cherche actuellement à calculer le prix x la quantité, car il me faut le totaux du prix, pas la quantités et
j'aimerais aligner toutes mes cases comme la photos dans le premier message.

Pour avoir tes cases alignées, tu peux placer tes elements dans une table avec pour chaque ligne une nouvelle balise tr (table row).
Histoire de pouvoir réutiliser le prix et le nombre d'elements en js, c'est bien de les séparer avec des span et de leur attribuer une classe.

Puis tout ce qu'il te reste à faire c'est d'appeler une fonction js quand tu appuies sur le bouton calculer, et en js tu fais une boucle qui parcours les class prixElt et nbElt et tu les multiplies entre eux.

<table>
		<tr>
			<td class="lblInputText">
				<span>Petite Ration</span>
				<span class="prixElt">2</span><span>$</span>
			</td>

			<td><input class="nbElt" type="number" name="" min="0" value="0"></td>
		</tr>

        <tr>
			<td class="lblInputText">
				<span>Grosse ration</span>
				<span class="prixElt">8</span><span>$</span>
			</td>

			<td><input class="nbElt" type="number" name="" min="0" value="0"></td>
		</tr>
</table>

Moi j'ai ça dans mon html

<div id="produits">
<label for="petiteration">Petite ration 2€</label>
<input type="number" id="petiteration" name="petiteration"
min="0">
</div>
<br>
<div>
<label for="grosseration">Grosse ration 8€</label>
<input type="number" id="grosseration" name="grosseration"
min="0">
</div>
<br>
<div>
<label for="epee">Epée 20€</label>
<input type="number" id="epee" name="epee"
min="0">
</div>
<br>
<div>
<label for="bouclier">Bouclier 15€</label>
<input type="number" id="bouclier" name="bouclier"
min="0">
</div>
<br>
<div>
<label for="potion">Potion 5€</label>
<input type="number" id="potion" name="potion"
min="0">
</div>
<br>
<div>
<label for="sacdetoile">Sac de toile 1€</label>
<input type="number" id="sacdetoile" name="sacdetoile"
min="0">
</div>

et en js

function total(){
var petiteration, grosseration, epee, bouclier, potion, sacdetoile, sum;
nbr1 = Number(document.getElementById("petiteration").value);
nbr2 = Number(document.getElementById("grosseration").value);
nbr3 = Number(document.getElementById("epee").value);
nbr4 = Number(document.getElementById("bouclier").value);
nbr5 = Number(document.getElementById("potion").value);
nbr6 = Number(document.getElementById("sacdetoile").value);
sum = nbr1 + nbr2 + nbr3 + nbr4 + nbr5 + nbr6;
document.getElementById("sum").value = sum;
}

Place ton code entre les balises <code></code> pour avoir le même rendu que moi, c'est plus facile pour s'y retrouver.
Ensuite ton html n'est pas complet.
Pour finir est-ce que tu as essayer d'appliquer ce que j'ai expliquer ? (surtout pour l'alignement)
Pour le JS tu peux garder ce que tu as fait plutôt que ce que j'ai décris, c'est plus répétitif mais ça marche aussi.

je t'ai uniquement montré le html par rapport au case c'est tout.

Oui j'ai essayé mais c'est soit ton code que tu m'a donné ou soit le miens.
Je pensai que c'était en plus à rajouter mais en faite non je doit tout remplacer.

Sauf que le miens est déjà lier avec fichier js.

Et pour la boucle et le prix x quantité, je sais pas comment faire. je suis complètement novice.
J'ai découvert le javascript ce matin même