# Tâche 

Si vous avez pu comprendre le dernier code du chapitre précédent, cette tâche ne devrait pas être difficile pour vous.

Votre tâche est de **calculer le prix final de la commande**, en tenant compte du `price` d'une unité du produit, de la `quantity` du produit commandé, et de la `discount`. Notez que la `quantity` du produit doit avoir une **valeur par défaut**. Si la `quantity` du produit n'est pas spécifiée, nous supposons que l'acheteur achète **une unité du produit**. La `discount` est un **paramètre optionnel** car elle n'est pas toujours disponible, et le produit peut être acheté sans remise.
Vous devez remplir les lacunes (`___`) dans le code ci-dessous afin qu'il vérifie si le paramètre de remise est spécifié et **calcule correctement le prix final de la commande**.

Utilisez les boutons <u>indice</u> et <u>solution</u> si vous trouvez la tâche difficile. Vous pouvez toujours analyser la solution, et elle restera dans votre mémoire. Rappelez-vous, nous sommes tous en train d'apprendre, et **le succès vous attend à l'avenir**!

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css"
/>


<link
  rel="stylesheet"
  href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-solution-with-copyable-%26%3Dhighlighted-code.css"
/>

<div class="button-container">
  <button
    class="button"
    onclick="toggleBlock1('hint-block1', 'solution-block1')"
  >
    Hint
  </button>
  <button
    class="button"
    onclick="toggleBlock1('solution-block1', 'hint-block1')"
  >
    Solution
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. Your task is to calculate the user's order cost, for this purpose, the
  variables <code>priceWithoutDiscount</code> and <code>result</code> have been
  created. <br />
  2. Initialize this variable as the <b>price multiplied by the quantity</b>.
  <br />
  3. Next, depending on whether you have a <code>discount</code>, you need to
  calculate the final price.<br />
  4. If there is a <code>discount</code>, you should subtract it, which can be
  done like this:
  <code>priceWithoutDiscount - priceWithoutDiscount * (discount / 100)</code
  >.<br />
  5. If there is <b>no discount</b>, then the
  <u>price without a discount will be the result</u>.<br />
  6. Note that <code>quantity</code> should be a default parameter, and
  <code>discount</code> is optional.<br />
  7. The default value for <code>quantity</code> is 1.
</div>

<div id="solution-block1" class="block solution-styling-block">
  
  <textarea id="code-1" class="language-typescript">
function calculatePrice(price: number, quantity: number = 1, discount?: number): number {
    let priceWithoutDiscount = (price * quantity);
    let result;
    if (discount) {
        result = priceWithoutDiscount - priceWithoutDiscount * (discount / 100)
    } else {
        result = priceWithoutDiscount;
    }
    return result;
}

console.log(calculatePrice(20)); // Expected result: 20 (no discount, one item)
console.log(calculatePrice(15, 3)); // Expected result: 45 (no discount, three items)
console.log(calculatePrice(50, 2, 10)); // Expected result: 90 (10% discount applied, two items)</textarea
  >

  <button class="copy-button" onclick="handleClick1('code-1')">
    <svg
      width="20"
      height="20"
      x="0"
      y="0"
      viewBox="0 0 32 32"
      style="enable-background: new 0 0 512 512"
      xml:space="preserve"
      class=""
    >
      <g>
        <path
          d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
          fill="#a6b8e6"
          opacity="1"
          data-original="#000000"
          class=""
        ></path>
      </g>
    </svg>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>

<script>
  document.addEventListener("readystatechange", (event) => {
    if (event.target.readyState === "complete") {
      onPageLoad1();
    }
  });

  function onPageLoad1() {
    var editor = CodeMirror.fromTextArea(document.getElementById("code-1"), {
      lineNumbers: true,
      mode: "text/x-scala",
      theme: "dracula",
    });

    // ----------> HIGHLIGHT <----------
    editor.markText(
      { line: 0, ch: 0 },
      { line: 0, ch: 0 },
      { className: "specific" }
    );

    // Initially hide both the hint and solution blocks
    hideBlock1("hint-block1");
    hideBlock1("solution-block1");
  }

  // Copy Button handler
  const handleClick1 = (codeBlock) => {
    const textarea = document.getElementById(codeBlock);
    const copiedText = textarea.value;

    navigator.clipboard.writeText(copiedText);

    Notiflix.Notify.Success("Copied to clipboard!", {
      timeout: 2000,
      width: "260px",
      position: "center-top",
      textColor: "#ff5549",
    });
  };

  // Function to toggle the visibility of a block
  const toggleBlock1 = (blockId) => {
    const block = document.getElementById(blockId);

    if (block.style.display === "none" || block.style.display === "") {
      hideBlock1("hint-block1");
      hideBlock1("solution-block1");
      showBlock1(blockId);
    } else {
      hideBlock1(blockId);
    }
  };

  // Function to show a block
  const showBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "block";
  };

  // Function to hide a block
  const hideBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "none";
  };
</script>

Ce cours est conçu pour les débutants absolus qui souhaitent maîtriser les bases du langage de programmation TypeScript. TypeScript est un langage moderne et puissant qui étend les capacités de JavaScript, rendant votre code plus fiable et lisible. Nous commencerons par les bases, en couvrant les variables, les types de données, les opérateurs de comparaison et les instructions conditionnelles. Ensuite, nous nous plongerons dans le travail avec les tableaux et les boucles. À la fin de ce cours, vous serez prêt à créer des programmes simples en TypeScript et à poursuivre votre apprentissage vers des sujets plus avancés.

Cette section vous introduit à TypeScript. Vous apprendrez pourquoi TypeScript est précieux et comment il diffère de JavaScript.

Nous allons prendre le contrôle du code ! Dans cette section, vous apprendrez à définir des conditions pour l'exécution du code en TypeScript. Vous découvrirez pourquoi cela est utilisé et comment l'utiliser correctement, afin que votre code devienne l'envie de tous les meilleurs programmeurs !

Familiarisons-nous avec un moyen pratique de stocker des données dans une collection d'éléments - un array. Vous apprendrez à créer et utiliser des arrays, ainsi qu'à ajouter et travailler avec des éléments dans un array. Une structure importante et fondamentale pour tout programmeur.

Automatisez les tâches avec une grande quantité de données ou de variables. Les loops vous aideront dans cette tâche, vous permettant de traiter une grande quantité de données et d'obtenir rapidement des résultats en seulement quelques lignes de code. Nous explorerons les types fondamentaux de loops et vous apprendrons à les utiliser efficacement !

Il est temps d'apprendre enfin à écrire vos propres fonctions qui effectueront les opérations que vous spécifiez. Les fonctions vous aideront à organiser votre code, à le diviser en morceaux gérables et à les appeler en une seule ligne. Il est temps d'apprendre !

Introduction à TypeScript

Défi (Calculateur de Prix)

Tâche