# Tarea

El problema clásico se llama FizzBuzz. La tarea es muy sencilla: Se te proporciona un arreglo de números aleatorios, y el código para generar los números está dado arriba; por favor, no modifiques ese código. Tu tarea es reemplazar los elementos del arreglo según las siguientes condiciones:
- Si un número es divisible por 3, reemplázalo por '`Fizz`';
- Si un número es divisible por 5, reemplázalo por '`Buzz`';
- Si un número es divisible por 3 y 5, reemplázalo por '`FizzBuzz`'.

Como resultado, debes devolver un arreglo de números y cadenas. Puedes consultar las pistas y soluciones si tienes dificultades para resolver este problema. De esta manera, absorberás mejor la información y mejorarás tus habilidades. ¡Que la fuerza te acompañe!

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')">
    Pista
  </button>
  <button class="button" onclick="toggleBlock1('solution-block1', 'hint-block1')">
    Solución
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. Tu objetivo es limitar el número de iteraciones en el bucle a la longitud del
  arreglo. Para lograr esto, puedes usar
  <code>i < arrayName.length</code>.<br>
  2. Cuando el número sea divisible exactamente por 3, necesitas reemplazar el elemento
  del arreglo con <b>Fizz</b>. Para hacer esto, dentro de la condición <code>if</code>,
  deberías comprobarlo usando la siguiente condición:
  <code>array[i] % 3 == 0</code>. <br>
  3. Debes hacer lo mismo con las otras comprobaciones. En el segundo bloque if,
  deberías verificar si el número es divisible exactamente por 5.<br>
  4. Para comprobar dos condiciones a la vez, utiliza
  <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>

Este curso está diseñado para principiantes absolutos que desean dominar los conceptos básicos del lenguaje de programación TypeScript. TypeScript es un lenguaje moderno y potente que amplía las capacidades de JavaScript, haciendo que el código sea más confiable y legible. Comenzaremos desde lo más básico, cubriendo variables, tipos de datos, operadores de comparación y sentencias condicionales. Luego, profundizaremos en el trabajo con arreglos y bucles. Al finalizar este curso, estará preparado para crear programas sencillos en TypeScript y continuar su aprendizaje hacia temas más avanzados.

Esta sección te introduce a TypeScript. Aprenderás por qué TypeScript es valioso y cómo se diferencia de JavaScript.

¡Vamos a tomar el control del código! En esta sección, aprenderás cómo establecer condiciones para la ejecución del código en TypeScript. Descubrirás por qué se utiliza esto y cómo emplearlo correctamente, para que tu código sea la envidia de los mejores programadores.

Familiarícese con una forma conveniente de almacenar datos en una colección de elementos: un arreglo. Aprenderá cómo crear y utilizar arreglos, así como agregar y trabajar con elementos en un arreglo. Una estructura importante y fundamental para cualquier programador.

Automatización de tareas con grandes cantidades de datos o variables. Los bucles facilitan este proceso, permitiendo procesar grandes volúmenes de datos y obtener resultados rápidamente con pocas líneas de código. Se explorarán los tipos fundamentales de bucles y se explicará cómo utilizarlos de manera eficiente.

Ha llegado el momento de aprender a escribir tus propias funciones que realizarán las operaciones que especifiques. Las funciones te ayudarán a organizar tu código, dividiéndolo en partes manejables y permitiendo llamarlas en una sola línea. Es momento de aprender.

Desafío: FizzBuzz

Tarea

Awesome!

Desafío: FizzBuzz

Tarea