Reto #2: La pirámide de javascript

En este reto debemos crear una pirámide de etiquetas <span> bajo ciertas condiciones.

Rodríguez Patiño, Eduardo
2020-12-01 | 8,733 lecturas

Seguimos con los retos de Anexsoft, la cual tiene como finalidad pasar un buen rato y aprender entre todos.

Objetivo

  • Implementar un algoritmo que permita construir una pirámide de colores orientados paralaleamente. El resultado final debe ser identico al de la imagen.

Instrucciones

Las pautas que debemos considerar son las siguientes:

  1. Solo se usará javascript, no plugins, menos jQuery ¬¬'.
  2. Tenemos una función llamada CrearPiramide(n), la cual recibe como parámetro la cantidad de filas que debe tener nuestra piramide.
    1. Al final de este POST hay un archivo que debemos descargar. Este contiene el CSS necesario para poder visualizar la pirámide y el cual NO DEBE SER ALTERADO.
    2. Basicamente, la pirámide esta compuesto por bloques de etiquetas , la cual usa 2 clases:
      1. bloque-a: pinta el span de color rojo.
      2. bloque-b: pinta el span de color verde.
    3. Para pasar a la siguiente fila, debemos considerar hacer un
      .
    4. La orientación de los colores debe ser la misma que la de la imagen mostrada anteriormente.
    5. Este es un ejemplo de la maquetación que debemos realizar:
      1. ```

        ```

        El cual esta formando una pirámide de 3 filas.

  3. Debemos considerar obligatoriamente la siguiente función.
  4. ``` function ConstruirPiramide(n) { var ladrillo = { a: '', b: '', }; var contenedor = document.getElementById("contenedor"); /* Implementar tu código */ } ```
    1. Nuestra función recibe un valor, el cual es la cantidad de filas que debe contener nuestra pirámide. Considerar para cada salto de fila usar un
      .

    2. Hay una variable llamado contenedor que hace referencia al

      que va a contener a nuestra pirámide y otra llamada ladrillo, la cual contiene 2 indices que ya tienen guardado el que deben incluir, el a hace referencia al bloque rojo y el otro al verde.
    3. Por ejemplo, yo haría algo como contenedor.innerHTML = ladrillo.a

    4. Dependiendo el caso usaremos el ladrillo.a o ladrillo.b.

    5. NOTA: por defecto nuestro contenedor soporta hasta 20 filas, pasado esto la pirámide se va a desarmar debido a las dimensiones del contenedor, asi que no se asusten. Prueben con cualquier número menor o igual a 20.

    6. Descarga el archivo adjunto a esta entrada para que comiences a realizar las pruebas y buena suerte.

¿A donde mando mi código?

Para enviar tu código debes haber seguido al pie de la letra las instrucciones dadas, una vez que hayas terminado tu implementación copa tu código en http://jsfiddle.net/ y comparteme el enlace como un comentario a esta entrada.

Personas que han participado:

A continuación la lista de todos los paritcipantes, haga click en los nombres para ver el script desarrollado.

  1. Eduardo Rodríguez Patiño
  2. Hebert Hernández
  3. Christian
  4. KIRA YAGAMI ARIZPE
  5. Luis Miguel Sardon
  6. Charly Román
  7. Carlos Alberto Alegre
  8. Christian DC
  9. Ricardo Torres
  10. Roy Carlos Surjano
  11. Jose Guillermo
  12. Dionny Prensa