# Tâche 

Le problème classique est appelé FizzBuzz. La tâche est très simple : Vous avez un tableau de nombres aléatoires, et le code pour générer les nombres est fourni ci-dessus ; veuillez ne pas modifier ce code. Votre tâche est de remplacer les éléments du tableau selon les conditions suivantes :
- Si un nombre est divisible par 3, remplacez-le par '`Fizz`';
- Si un nombre est divisible par 5, remplacez-le par '`Buzz`';
- Si un nombre est divisible à la fois par 3 et par 5, remplacez-le par '`FizzBuzz`'.

En conséquence, vous devriez retourner un tableau de nombres et de chaînes de caractères. Vous pouvez consulter les indices et les solutions si vous avez des difficultés à résoudre ce problème. De cette façon, vous assimilerez mieux l'information et améliorerez vos compétences. Que la force soit avec vous !

let randomNumbers: (number | string)[] = [];

// do not change the code below
for (let i = 0; i < 15; i++) {
  let randomNumber: number = Math.floor(Math.random() * 100); // Generating a random number from 0 to 99
  randomNumbers.push(randomNumber);
}
//do not change the code above

for (let i = 0; i < ___; i++) {
    // Assert that randomNumbers[i] is a number before using the modulus operator
    let num = randomNumbers[i] as number;
  
    if (___) {
        randomNumbers[i] = '___'
    } else if (___) {
        ___ = 'Fizz'
    } else if (___) {
        ___
    }
}

console.log(randomNumbers);

<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 goal is to limit the number of iterations in the loop to the length of
  the array. To achieve this, you can use
  <code>i < arrayName.length</code>.<br />
  2. When the number is divisible evenly by 3, you need to replace the array
  element with <b>Fizz</b>. To do this, inside the <code>if</code> condition,
  you should check it using the following condition:
  <code>array[i] % 3 == 0</code>. <br />
  3. You need to do the same with other checks. In the second if block, you
  should check if the number is evenly divisible by 5.<br />
  4. To check two conditions at once, use
  <code>condition_1 && condition_2</code>.<br />
</div>

<div id="solution-block1" class="block solution-styling-block">
  
  <textarea id="code-1" class="language-typescript">
let randomNumbers: (number | string)[] = [12, 15, 10];

// do not change the code below
for (let i = 0; i < 15; i++) {
  let randomNumber: number = Math.floor(Math.random() * 100); // Generating a random number from 0 to 99
  randomNumbers.push(randomNumber);
}
//do not change the code above

for (let i = 0; i < randomNumbers.length; i++) {
    // Assert that randomNumbers[i] is a number before using the modulus operator
    let num = randomNumbers[i] as number;

    if (num % 3 == 0 && num % 5 == 0) {
        randomNumbers[i] = 'FizzBuzz';
    } else if (num % 3 == 0) {
        randomNumbers[i] = 'Fizz';
    } else if (num % 5 == 0) {
        randomNumbers[i] = 'Buzz';
    }
}

console.log(randomNumbers);</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 (FizzBuzz)

Tâche