1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Ejemplo del uso del operador de "%" en JS

Tema en 'Tutoriales de Javascript' comenzado por Faustotnc, 30 de Junio de 2017.

?

Lo entendiste?

  1. Si

    0 votos
    0,0%
  2. No

    0 votos
    0,0%
  3. Algo parecido

    0 votos
    0,0%
  1. Faustotnc

    Faustotnc Miembro Activo

    Se incorporó:
    13 de Febrero de 2015
    Mensajes:
    320
    Me gusta recibidos:
    237
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Diseñador y desarrollador web
    Localización:
    Concord, North Carolina
    Página web:
    Si conoces de flex-box, te interza este post...

    Hace aproximadamente 15 minutos atras, me encontre con un problema en el diseño de mi blog. Lo que pasa es que como todos sabemos, al usar Flexbox con space-between para hacer un Grid de 3 columnas, si el numero de elementos no se puede dividir entre 3, queda un espacio en blanco en medio.
    Asi:
    Screenshot (9).png

    Una solucion seria, en vez de usar space-between para Justify-content, simplemente usar flex-start. La solucion parece sencilla, pere eso te daria otros problemas que no voy a discutir ahora. Para que haiga un margen etre cada post, usar la formula width: calc((100% / 3) - 24px) con space-between es simplemente mas facil. Lo que hace esta formula es tomar cada post, ponerle un width del 33.3333...% de su padre (100% / 3) y restarle 24 pixeles, el cual es igual a 12 pixeles en cada lado del post, pero cuando estan todos uno al lado del otro este margen es igual a 24 pixeles de espacio. Si no entendiste, comenta y yo te explico.

    Por 2 semanas (y tambien basicamente desde que empece con flexbox) no habia pensado en una solucion.
    Hasta que me quede mirando el diseño casi listo de mi blog por 10 minutos, y una idea llego a mi mente. Para que el ultimo post se ponga hacia al lado, simplemente hay que llenar el espacio vacio. Para saber exactamente cuantos me faltan (cuantos espacios hay que rellenar), solo saco el modulo de la cantidad de posts que hay, entre la cantidad de posts necesitados para completar una fila (postlist.length % 3).

    El codigo final es tan simple como el siguiente. Si sacas el modulo entre cualquier numero y 3, solo tienes tres posibles resultados. Esos son: 0, 1, y 2.
    Javascript (Typescript por Angular4)
    Código (Javascript):
        // si el modulo es igual a 2, quiere decir que necesitamos
                // solo un post mas
                if ((this.postList.length % 3) === 2) {
                    this.fillerRepeat = [1];
                // si el modulo es igual a 1, quiere decir que necesitamos
                // 2 post mas
                } else if ((this.postList.length % 3) === 1) {
                    this.fillerRepeat = [1, 2];
                // si es igual a cualquier otro numero, no
                // necesitamos mas
                } else {
                    this.fillerRepeat = [];
                }
    HTML template con Angula4
    Código (HTML5):
        <div class="post" *ngFor="let post of postList">
            <div class="attachment">
                <div class="fakeLink">
                    <a [routerLink]="['post', post?.slug, post?.id]" md-ripple mdRippleColor="rgba(255,255,255,.24)" [attr.aria-label]="post?.slug"></a>
                </div>
                <div class="trueLink">
                    <a [routerLink]="['post', post?.slug, post?.id]">
                        <img
                           [src]="post?._embedded['wp:featuredmedia'][0].source_url"
                           [alt]="post?._embedded['wp:featuredmedia'][0].title.rendered"
                           *ngIf="post?._embedded['wp:featuredmedia'][0].source_url"
                           [@comeIn]="">
                    </a>
                </div>
            </div>
            <div class="info">
                <a [routerLink]="['post', post?.slug, post?.id]" class="title"><h2>{{ post?.title.rendered }}</h2></a>
                <div class="postExcerpt" [innerHtml]="post?.excerpt.rendered"></div>
            </div>
        </div>
        <!-- este es el post de relleno -->
        <!-- este div se multiplica por el numero de elementos dentro del array fillerRepeat -->
        <div class="post fillRestOfSpace" *ngFor="let fn of fillerRepeat"><div class="attachment"><div class="trueLink"></div></div></div>
    Y el resultado es el siguiente:
    Screenshot (11).jpg
    Y eso es todo, asi es como podemos usar el operador de modulo en Javascript (por primera vez en 3.7 años como programador)
    Si te te hice tripas el cerebro, no te preocupes, comenta y yo te explico.
    Para saber mas hacerca de los operadores en JS, ve a http://librosweb.es/libro/javascript/capitulo_3/operadores.html
    Para ver como voy con el diseño de mi blog, ve a http://codesnack.netlify.com/

    Espero te sirva. Buenas tardes.
     
    Última modificación por un moderador: 3 de Julio de 2017
  2. Faustotnc

    Faustotnc Miembro Activo

    Se incorporó:
    13 de Febrero de 2015
    Mensajes:
    320
    Me gusta recibidos:
    237
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Diseñador y desarrollador web
    Localización:
    Concord, North Carolina
    Página web:
    Alguien vio este post?
     

Comparte esta página