Modification sur un script

Modification sur un script - Javascript/Node.js - Programmation

Marsh Posté le 19-02-2016 à 15:35:18    

Bonjour à tous !
 
Pour vous mettre au parfum, je suis à la limite du nul en informatique. L'élaboration du script que je vais vous présenter m'a pris beaucoup de temps...
 
Voilà, je suis correctrice de textes en français (je corrige les romans, les thèses... au niveau de l'orthographe, de la grammaire...).
 
J'ai un script qui permet à l'internaute de calculer le coût de la correction en fonction de divers critères (nombre de mots, formule, statut...).
 
J'avais d'ailleurs déjà posté sur ce forum et obtenu de l'aide.
 
Voici le script :  
 
 

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Devis pour correction &ndash; Liliana78</title>
  6.     <style>
  7.         body {
  8.             background-size: 5px 900px, 6px 6px;
  9.             font-family: Verdana, Geneva, sans-serif;
  10.             font-size: 14px;
  11.             color: #000309;
  12.             text-align: center;
  13.             line-height: 24px;
  14.         }
  16.         #page {
  17.             width: 1300px;
  18.             margin: auto;
  19.             padding: 20px;
  20.             background: #d8d8d8; /* Old browsers */
  21.             background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #d8d8d8), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
  22.             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
  23.             background: -moz-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* FF3.6+ */
  24.             background: -webkit-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
  25.             background: -o-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Opera 11.10+ */
  26.             background: -ms-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* IE10+ */
  27.             background: linear-gradient(to bottom, #d8d8d8 1%, #ffffff 100%); /* W3C */
  28.         }
  30.         .prix {
  31.             font-weight: bold;
  32.             font-size: 200%;
  33.             color: blue;
  34.         }
  36.         h1 {
  37.             font-size: 0em;
  38.             line-height: 1em;
  39.             margin: 0;
  40.             text-transform: uppercase;
  41.         }
  43.         fieldset {
  44.             border: none;
  45.             margin: 0 0 1ex;
  46.             padding: 0;
  47.         }
  49.         .explications {
  50.             border-left: solid thin #0042b0;
  51.             padding-left: 1ex;
  52.         }
  54.         .explications ul {
  55.             list-style: none;
  56.             font-size: 14px;
  57.             font-style: italic;
  58.             padding: 0;
  59.         }
  61.         .explications li {
  62.             margin: 1ex 0;
  63.         }
  65.         .explications h2 {
  66.             font-style: italic;
  67.             font-size: 2em;
  68.             font-weight: bold;
  69.             margin: 0 0 1em;
  70.          
  71.         }
  73.         explications h3 {
  74.             font-style: italic;
  75.             font-size: 2em;
  76.             margin: 0 0 1em;
  77.         }
  79.         .etape {
  80.             font-weight: bold;
  81.             text-transform: uppercase;
  82.         }
  84.         .etape::after {
  85.             content: "\00A0: ";
  86.         }
  87.     </style>
  88. </head>
  89. <body>
  91. <section id="page">
  92.     <h1>Calculez le coût de votre correction</h1>
  94.     <form id="testform">
  95.         <fieldset>
  96.             <p>
  97.                 <label for="nbchar" class="etape">Nombre de mots</label>
  98.                 <input id="nbchar" type="text" name="nbchar" value="0"/>
  99.             </p>
  101.             <div class="explications">
  102.                 <h2>Où trouver le nombre de mots ? </h2>
  103.                 <ul>
  104.                     <li>Word 2007, 2010 et 2013 : En bas à gauche de la fenêtre du logiciel.
  105.                     </li>
  106.                     <li>Word 2003/OpenOffice : Cliquez sur <strong>Outils</strong>,
  107.                         puis <strong>Statistiques.</strong> Repérez la ligne
  108.                         <strong>"mots".</strong>
  109.                     </li>
  110.                 </ul>
  111.             </div>
  112.         </fieldset>
  113.         <fieldset>
  114.             <p>
  115.                 <strong class="etape">Formule</strong>
  116.                 <input id="forumle1" type="radio" name="formule" value="1" checked="checked"/>
  117.                 <label for="forumle1">Simple</label>
  118.                 <input id="formule2" type="radio" name="formule" value="2"/>
  119.                 <label for="formule2">Approfondie</label>
  122.             </p>
  124.             <p class="details">
  125.                 Voir <a href="formules/correction-reformulation">Tableau comparatif des formules de correction</a>
  126.             </p>
  128.             <p>
  129.                 <label class="etape" for="formjur">Statut</label>
  130.                 <select id="formjur" name="formjur">
  131.                     <option value="0">Étudiant</option>
  132.                     <option value="1">Particulier</option>
  133.                     <option value="2">Professionnel</option>
  134.                 </select>
  135.                 <input type="submit" value="Calculer"/>
  136.             </p>
  137.         </fieldset>
  138.     </form>
  140.     <div id="resultat"></div>
  141.     <div id="resultatSupplement"></div>
  143. </section>
  145. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  146. <script type="text/javascript">// <![CDATA[
  147. function formatNumber(num) {
  148.     return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 " )
  149. }
  150. function supplement(result) {
  151.     var more = (result * 10) / 100;
  152.     return Math.ceil(result + more);
  153. }
  154. $(function () {
  155.     $("input:submit" ).click(
  156.             function () {
  157.                 var calcul = 0;
  158.                 var coefReduction = 10 / 100;
  159.                 var supp;
  160.                 if ($("input:checked" ).val() == 1) {
  161.                     supp = false;
  162.                     if ($("#formjur" ).val() == 1) {
  163.                         calcul = $("#nbchar" ).val() * 0.020;
  164.                     } else if ($("#formjur" ).val() == 2) {
  165.                         calcul = $("#nbchar" ).val() * 0.0237;
  166.                     } else {
  167.                         calcul = $("#nbchar" ).val() * 0.0178;
  168.                     }
  169.                 } else {
  170.                     supp = true;
  171.                     if ($("#formjur" ).val() == 1) {
  172.                         calcul = $("#nbchar" ).val() * 0.0346;
  173.                     } else if ($("#formjur" ).val() == 2) {
  174.                         calcul = $("#nbchar" ).val() * 0.0395;
  175.                     } else {
  176.                         calcul = $("#nbchar" ).val() * 0.0297;
  177.                     }
  180.                 }
  181.                 var resultat = Math.ceil(calcul);
  182.                 var resultatMajore = resultat + (calcul * coefReduction);
  183.                 var resultatSupplement = supplement(resultat);
  184.                 var resultatSupplementMajore = Math.round(resultatSupplement + (resultatSupplement * coefReduction));
  185.                 $("#resultat" ).html("Tarif généralement appliqué : <span class=\"prix\">" + formatNumber(resultat) + " &euro; </span>/ Si correction en rouge :  <span class=\"prix\">" + formatNumber(Math.round(resultatMajore)) + " &euro; </span>" );
  186.                 return false;
  188.             }
  189.     );
  190. });
  191. // ]]></script>


 
 
Voici mes deux demandes d'aide :
 
- L'internaute doit renseigner le nombre de mots de son document. S'il inscrit, par exemple, 158747 (sans espaces), cela marche. Mais s'il met un espace (158 747), non. Comment faire pour que le tarif s'affiche même en insérant un espace ?
 
- Le cadre du formulaire dépasse le template. Je modifie "width", mais ça élargit juste la page du template.
 
Je vous remercie de votre aide, car je galère pas mal...
 
Liliana

Reply

Marsh Posté le 19-02-2016 à 15:35:18   

Reply

Marsh Posté le 22-02-2016 à 00:29:01    

1) La valeur du champ est lue par $("#nbchar" ).val(), le mieux serait d'introduire une variable, par exemple après supp, et de virer tous les caractères non-numériques

Code :
  1. ...
  2. var supp;
  3. var nbMots = $("#nbchar" ).val().replace(/[^\d]+/g, "" );


Ensuite tu remplaces toutes les lignes où la variable calcul est calculée

Code :
  1. calcul = nbMots * ...


 
Ce qui te donne quelque chose comme ça

Code :
  1. $(function () {
  2.     $("input:submit" ).click(
  3.             function () {
  4.                 var calcul = 0;
  5.                 var coefReduction = 10 / 100;
  6.                 var supp;
  7.                 var nbMots = $("#nbchar" ).val().replace(/[^\d]+/g, "" );
  8.                 if ($("input:checked" ).val() == 1) {
  9.                     supp = false;
  10.                     if ($("#formjur" ).val() == 1) {
  11.                         calcul = nbMots * 0.020;
  12.                     } else if ($("#formjur" ).val() == 2) {
  13.                         calcul = nbMots * 0.0237;
  14.                     } else {
  15.                         calcul = nbMots * 0.0178;
  16.                     }
  17.                 } else {
  18.                     supp = true;
  19.                     if ($("#formjur" ).val() == 1) {
  20.                         calcul = nbMots * 0.0346;
  21.                     } else if ($("#formjur" ).val() == 2) {
  22.                         calcul = nbMots * 0.0395;
  23.                     } else {
  24.                         calcul = nbMots * 0.0297;
  25.                     }
  26.                 }
  27.                 var resultat = Math.ceil(calcul);
  28.                 var resultatMajore = resultat + (calcul * coefReduction);
  29.                 var resultatSupplement = supplement(resultat);
  30.                 var resultatSupplementMajore = Math.round(resultatSupplement + (resultatSupplement * coefReduction));
  31.                 $("#resultat" ).html("Tarif généralement appliqué : <span class=\"prix\">" + formatNumber(resultat) + " &euro; </span>/ Si correction en rouge :  <span class=\"prix\">" + formatNumber(Math.round(resultatMajore)) + " &euro; </span>" );
  32.                 return false;
  33.             }
  34.     );
  35. });


 
2)
Si je modifie

Code :
  1. #page {
  2.             width: 1300px;
  3.             ...
  4. }


Ça fonctionne pour moi?
 
Dans ton navigateur, tu dois normalement pouvoir ouvrir les outils de développement avec F12.
Ensuite dans l'onglet éléments (ou DOM, ça dépend du navigateur) il devrait y avoir un bouton pour aller inspecter les éléments suivant le pointeur de ta souris, ce qui devrait te permettre de trouver facilement l'élément que tu veux redimensionner. Donne-nous plus de détails. :)


---------------
click clack clunka thunk
Reply

Marsh Posté le 22-02-2016 à 11:56:32    

Je te remercie beaucoup de l'attention que tu as apportée à ma demande ainsi que pour tes réponses.
 
Pour le 1), OK, ça marche ;)  
 
Pour le 2), non, ça agrandit ou réduit la page du template. Et avec le système du F 12 "éléments", toute la page est sélectionnée. Ne serait-il pas possible de mettre un fond blanc au lieu de gris pour que le cadre ne se voit pas ?
 
J'avais une dernière question :
 
Quand l'internaute clique sur "Calculer" pour connaître le prix, il est indiqué "Tarif généralement appliqué : ... euros ; Si correction en rouge : ... euros" (voir code dans mon premier message).
J'aimerais insérer une troisième ligne : "Si délai supérieur à 1 mois". La réduction serait alors de 10 % par rapport au "Tarif généralement appliqué".
 
Je te remercie infiniment de ta patience.

Reply

Marsh Posté le 22-02-2016 à 21:08:33    

Personne ? :cry:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed