# Tâche 

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

En résultat, vous devez retourner un tableau composé de nombres et de chaînes de caractères. Vous pouvez consulter les indices et les solutions si vous rencontrez des difficultés pour résoudre ce problème. De cette manière, 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')">
    Astuce
  </button>
  <button class="button" onclick="toggleBlock1('solution-block1', 'hint-block1')">
    Solution
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. Votre objectif est de limiter le nombre d'itérations dans la boucle à la longueur du tableau. Pour cela, vous pouvez utiliser
  <code>i < arrayName.length</code>.<br>
  2. Lorsque le nombre est divisible par 3, vous devez remplacer l'élément du tableau par <b>Fizz</b>. Pour cela, à l'intérieur de la condition <code>if</code>,
  vous devez vérifier avec la condition suivante :
  <code>array[i] % 3 == 0</code>. <br>
  3. Vous devez faire la même chose pour les autres vérifications. Dans le second bloc if, vous devez vérifier si le nombre est divisible par 5.<br>
  4. Pour vérifier deux conditions en même temps, utilisez
  <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 s'adresse aux débutants absolus souhaitant 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 notions fondamentales, en abordant les variables, les types de données, les opérateurs de comparaison et les instructions conditionnelles. Ensuite, nous explorerons la manipulation des tableaux et des boucles. À l'issue 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 présente TypeScript. Vous découvrirez pourquoi TypeScript est précieux et en quoi 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 un exemple pour les meilleurs programmeurs.

Familiarisons-nous avec une méthode pratique pour stocker des données dans une collection d’éléments : un tableau. Vous apprendrez à créer et utiliser des tableaux, ainsi qu’à ajouter et manipuler des éléments dans un tableau. Une structure importante et fondamentale pour tout programmeur.

Automatisation des tâches avec un grand volume de données ou de variables. Les boucles vous aideront à traiter une grande quantité de données et à obtenir rapidement des résultats en seulement quelques lignes de code. Nous explorerons les types fondamentaux de boucles et vous apprendrons à les utiliser efficacement.

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

Défi : FizzBuzz

Tâche

Awesome!

Défi : FizzBuzz

Tâche