Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Reto #2: La pirámide de javascript
Actualizado el 04 Febrero, 2017 y leído 3,260 veces
Calificación: 10.00 / 10

Reto #2: La pirámide de javascript

Anexsoft

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 <span>, 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 <br />.
    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. <span class="bloque bloque-a"></span>
        <br>
        <span class="bloque bloque-b"></span>
        <span class="bloque bloque-a"></span>
        <br>
        <span class="bloque bloque-a"></span>
        <span class="bloque bloque-b"></span>
        <span class="bloque bloque-a"></span>

        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: '<span class="bloque bloque-a"></span>',
            b: '<span class="bloque bloque-b"></span>',
        };
    
        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 <br />.

    2. Hay una variable llamado contenedor que hace referencia al <div> que va a contener a nuestra pirámide y otra llamada ladrillo, la cual contiene 2 indices que ya tienen guardado el <span> 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.

  5. 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

 

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.