A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Condicionales y Loops

34/42
Recursos

Un condicional nos permite evaluar cierta condici贸n y bifurcar entre dos caminos dependiendo de si se cumple o no.

Un loop es un fragmento de c贸digo que va a ejecutar de forma repetitiva hasta que cumpla una condici贸n.

Imagen del reto

Platzi Games - Reto Stylus.jpg

Aportes 101

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Chicos, este es el contenido de las noticias

鈥渘oticias鈥, 鈥減es 2020 obtiene acuerdo con el manchester united鈥, 鈥淜onami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego.鈥

鈥渘oticias鈥, 鈥渃yberpunk: habr谩 dos juegos m谩s鈥, 鈥淓l estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.鈥

鈥渘oticias鈥, 鈥淢ortal Kombat 11: Filtraci贸n confirma al Joker como DLC鈥, 鈥淯suarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.鈥

Espero les ayude 馃槈

mms yo diciendo que las clases eran r谩pidas y tenia la velocidad a 1.75 :v

Reto finalizado: C贸digo

Para solucionar el reto hice dos cosas:

  • Agregue los 3 items mas a mi lista de datos en la variable de pug, sin su atributo de imagen.
  • A帽adi un condicional if que valide si existe el dato imagen se agrege o no.

Al trabajar con Staylus se generan muchos errores por identacion, y al trabajar en produccion se puede volver muy tedioso

Para realizar el reto hice lo siguiente:

En el archivo ejercicio-stylus.pug duplique la section de contenido:

html
	include head.pug
	body
		.buscador: form: input(type="text" placeholder="Playstation" class="buscador__input")
		header.encabezado--con-filtros
			h2 20 Resultados para "Playstation"
			.filtros
				span Filtrar Por
				a(href="#" class="fa fa-th-large")
				a(href="#" class="fa fa-bars")
		section.contenido
			+caja("apex.jpg", "Video", "Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")
			+caja("crash.jpg", "Video", "Ya salio la rese帽a de Crash Team Racing Nitro Fueled", "Veinte a帽os despu茅s del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")
			+caja("ff.jpg", "Video", "Final Fantasy XIV recibir谩 una serie live-action en televisi贸n ", "Final Fantasy XIV Online recibir谩 una adaptaci贸n aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")
		section.contenido
			+caja2( "Noticias", "Pes 2020 obtiene acuerdo con el manchester united", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")
			+caja2( "Noticias", "Cyberpunk 2077: habr谩 dos juegos m谩s", "Veinte a帽os despu茅s del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")
			+caja2( "Noticias", "Mortal kombat 11: filtraci贸n confirma al joker como dlc", "Final Fantasy XIV Online recibir谩 una adaptaci贸n aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")

Posteriormente en el archivo head.pug cree un nuevo mixin llamado caja2:

mixin caja(imagen, category, title, summary)
	.caja
		a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

mixin caja2(category, title, summary)
	.caja
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

mixin estadistica
	.estadistica--articulos: ul
		li
			i.fas.fa-share
			span 275
		li
			i.fas.fa-eye
			span 275
		li
			i.fas.fa-comment-alt
			span 12

doctype html
html
	head
		title PlatziGames
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')
		meta(name='viewport', content='width=device-width, maximum-scale=1.0, user-scalable=no')
		link(rel="stylesheet",href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Oswald:400,500,600,700&display=swap" )
		link(rel='stylesheet', href='../css/ejercicio-stylus.css')
		script(src='https://kit.fontawesome.com/552ebddad2.js')
	body```


Y listo :)


Dupliqu茅 la section contenido e hice una condicional.

section.contenido
			+caja("", "Noticias", "PES 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol ingles Manchester United para ser incluido en el juego." )
			+caja("", "Noticias", "Cyberpunk 2077: Habr谩 dos juegos m谩s" ,"El estudio polaco de videojuegos CD Projekt Red est谩 trabajando no en uno, sino tres juegos ubicados en el universo RPG de Cyberpunk" )
			+caja("", "Noticias", "Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC", "Usuarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos del Joker..." )

Al c贸digo existente solo puse la condicional (imagen). Si no existe, se devuelve el mismo c贸digo sin el contenedor de imagen.

mixin caja(imagen, category, title, summary)
	if(imagen)
		.caja
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
			.caja__contenido
				span.caja__categoria=category
				h3=title
				p=summary
			+estadistica
	else
		.caja
			a(href="#",class="caja__imagen")
			.caja__contenido
				span.caja__categoria=category
				h3=title
				p=summary
			+estadistica


en la parte de Pug duplique el contenido e hice un mixin (al que llam茅 mediaCaja) solo le quite el par谩metro imagen y la parte del a, y en stylus no hice ningun cambio

mixin

Imagen del reto:

Al contenedor de los art铆culos le agregue un flex-wrap para que pueda ser responsive

CSS

/*Mixin*/
contenedor(alinear)
 width 100%
 display flex
 justify-content alinear


.contenido 
 contenedor(space-evenly)
 flex-wrap wrap

隆Que buenas respuestas al reto! Aplausos a todos 馃憦馃憦 Que alegria ver sus trabajos y como ponen en practica lo aprendido.

Solo una reutilizaci贸n de los mismos estilos de stylus y agregando en pug un mixin similar al ya existente.
Y no pude subir mi imagen resultante

aqu铆 el reto
y despu茅s de probar todos creo que me quedo con sass fue el que mas me gusto xD, aun que los tres est谩n muy buenos

Yo opto por modificar el c贸digo lo menos posible, y m谩s f谩cil adaptar el flujo de las cajas para poder ser Responsive.

As铆 lo hice:

mixins.styl

// MIXINS
contenedor()
    width: 96%
    display: flex
    flex-wrap: wrap // Permitiendo que el contenido caiga dependiendo del ancho total de la p谩gina
    margin: 0 auto
    padding: 30px 0

cajas.styl

.contenido
    margin-bottom: 40px
    justify-content: space-evenly
    grid-row-gap: 70px // Agregando el espacio entre lineas flecha

    contenedor()

mixins.pug

mixin caja(imagen, category, title, summary)
	.caja
		if (imagen)  // Esto eval煤a si contiene imagen y la agrega en caso de ser verdadero
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

cajas.pug

+caja("apex.jpg", "Video", "Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")

+caja("crash.jpg", "Video", "Ya salio la rese帽a de Crash Team Racing Nitro Fueled", "Veinte a帽os despu茅s del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")

+caja("ff.jpg", "Video", "Final Fantasy XIV recibir谩 una serie live-action en televisi贸n ", "Final Fantasy XIV Online recibir谩 una adaptaci贸n aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")

+caja("", "Noticias", "Pes 2020 obtiene acuerdo con el Manchester United", "Konami ha anunciado que ha firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego")

+caja("", "Noticias", "Cyberpunk 2077: Habr谩 dos juegos m谩s", "EL estudio polaco de videojuegos CD Projeckt est谩 trabajando no en uno, sino tres juegos ubicados en el universo RPG de Cyberpunk.")

+caja("", "Noticias", "Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC", "Usuarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos de Joker y Terminator.")

El c贸digo completo lo tengo segmentado en diferentes componentes.

Estaba escribiendo asi y no compilaba

for header in 3 2 1
h{header}
font-size: 35px - (5*header)
margin: 0

hasta que escribi asi:

for header in 3 2 1 {
h(header)
font-size: 35px - (5*header)
margin: 0
}

Si te sale el error de 鈥<expected 鈥渋ndent鈥, got 鈥渋dent h鈥> al compilar:鈥

Mi soluci贸n fue copiar y pegar el c贸digo del maestro, s茅 que es rar铆simo ya que yo lo ten铆a tal cual, no cambia absolutamente nada, pero cuando yo lo hago me arroja el error, y caundo lo copio y pego si me deja guardarlo.

炉_(銉)_/炉

Como apenas estoy aprendiendo me apoy茅 en las respuestas de mis compa帽eros. La de @Francisco914 me pareci贸 la m谩s resumida porque solamente duplic贸 la secci贸n de contenido (ejercicio-stylus.pug) y cre贸 un nuevo mixin llamado caja2 (head.pug)

Hola! Para aquellos que tengan el problema

鈥 expected 鈥渋ndent鈥, got 鈥渇or鈥 鈥

La forma en que yo lo solucion茅 fue la siguiente:

Cambiando de lugar el ciclo, como te muestro a continuaci贸n.

fuente1 = "Lato", sans-serif
fuente2 = "Oswald", sans-serif
color-primario = #333333
color-secundario = #8841DA
color-claro = #FFFFFF

contenedor()
	display: flex
	width 90%
	margin: 0 auto
	padding 30px 0

caja-sombra()
	background-color color-claro
	box-shadow 0px 20px 33px 0px rgba(0, 0, 0, 0, 0.20)

opacidad(color, nivel)
    alpha color, nivel
* 
	box-sizing: border-box

body
	margin: 0
	font-family: fuente1

for header in (3 2 1)
	h{header}
		font-size 35px - (5*header)
		margin 0px

Para cumplir el reto, cree un mixin con la clase. caja__noticia, el cual hereda los estilos de .caja. Elimine la secci贸n de imagen y al contenedor se le coloco un display flex y un wrap para que cada caja ocup茅 su espacio.

No puedo publicar im谩genes pero estar谩 en m铆 Twitter

Mi Reto:

Reto:
(

Imagen del reto:
![](

Me siento realmente impresionado con las posibilidades que dan los preprosesadores en general. Me gusto mas Stylus finalmente porque se me hace muy similar a Sass pero de tipado mas sencillo. Para desarrollar el reto solo agregue un mixin al pug par ahacer las tres cajas, luego reuse la clase contenidos para que se alineara con el resto del contenido y se aplicara el flexbox. Finalemte aplique una clase extra de estilos para definir los estilos de las cajas cuando no tienen imagenes. 10 de 10 para este curso.

Reto cumplido!
Creen un mixin en head.pug igual al mixin de caja pero sin la imagen:

Luego lo agregu茅 en una nueva section adentro del componente _cajas.styl:

Resultado:

Reto cumplido solo poniendole un if al mixin de pug, inclusive podria poner un mixin de solo el contenido.

mixin caja(imagen, category, title, summary)
	if(imagen)
		.caja
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
			.caja__contenido
				span.caja__categoria=category
				h3=title
				p=summary
			+estadistica
	else
		.caja
			.caja__contenido
				span.caja__categoria=category
				h3=title
				p=summary
			+estadistica

Para resolver el reto hice los siguientes pasos:

En head.pug, agrege un unevo mixin

mixin caja-sin-foto(category, title, summary)
	.caja-sin-foto
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

En ejercicio-stylus.pug, las noticias se escriben asi:

+caja-sin-foto("noticias", "pes 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego.")

En el modulo cajas styl, extiendo el estilo de .caja asi:

.contenido
	margin-bottom: 40px
	contenedor-grid()

.caja
	max-width: 400px;
	caja-sombra()
	&__contenido
		padding: 20px;
		background-color: color-claro
		span
			color: color-secundario
			titulos(Fuente2)
		h3
			font-weight: normal
			titulos(Fuente2)

.caja-sin-foto
	@extends .caja

y finalmente en globales.styl

contenedor-grid()
	display: grid
	grid-template-columns: repeat(3, 1fr)
	grid-template-rows: auto
	gap: 20px
	width: 90%
	margin: 0 auto
	padding: 30px 0

Espero no tener que volver a tocar Stylus jam谩s en mi vida, horrible la identaci贸n鈥

Reto completado

finalizado loop minuto 04:37

Creando loop minuto 02:04

hola este es mi resultado del proyecto le agregue las im谩genes espero que les guste

Stylus es el Pug para estilos 馃槃

genial este preprocesador me gusto mucho!!

Mi soluci贸n al ejercicio fue la siguiente:
1. Duplicar el contenido del section 鈥渃ontenido鈥 en el archivo 鈥渆jercicio-stylus.pug鈥:

html
	include head.pug
	body
		.buscador: form: input(type="text" placeholder="Playstation" class="buscador__input")
		header.encabezado--con-filtros
			h2 20 Resultados para "Playstation"
			.filtros
				span Filtrar Por
				a(href="#" class="fa fa-th-large")
				a(href="#" class="fa fa-bars")
		section.contenido
			+caja("apex.jpg", "Video", "Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")
			+caja("crash.jpg", "Video", "Ya salio la rese帽a de Crash Team Racing Nitro Fueled", "Veinte a帽os despu茅s del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")
			+caja("ff.jpg", "Video", "Final Fantasy XIV recibir谩 una serie live-action en televisi贸n ", "Final Fantasy XIV Online recibir谩 una adaptaci贸n aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")
		section.contenido
			+caja("", "Noticias", "PES 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego.")
			+caja("", "Noticias", "Cyberpunk: habr谩 dos juegos m谩s", "El estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.")
			+caja("", "Noticias", "Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC", "Usuarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.")

2. Agregar un condicional (if) en el mixin 鈥渃aja鈥 del archivo 鈥渉ead.pug鈥:

mixin caja(imagen, category, title, summary)
	.caja
		if imagen!=""
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica



mixin estadistica
	.estadistica--articulos: ul
		li
			i.fas.fa-share
			span 275
		li
			i.fas.fa-eye
			span 275
		li
			i.fas.fa-comment-alt
			span 12

doctype html
html
	head
		title PlatziGames
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')
		meta(name='viewport', content='width=device-width, maximum-scale=1.0, user-scalable=no')
		link(rel="stylesheet",href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Oswald:400,500,600,700&display=swap" )
		link(rel='stylesheet', href='../css/ejercicio-stylus.css')
		script(src='https://kit.fontawesome.com/552ebddad2.js')
	body

Reto cumplido

Para el reto agregu茅 una condicional en el mixin existente:

mixin caja(imagen, category, title, summary)
    .caja
          if imagen
               a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
	  .caja__contenido
	       span.caja__categoria=category
	       h3=title
	       p=summary
	  +estadistica

Y para renderizar:

+caja(false, "Video", "Final Fantasy XIV recibir谩 una serie live-action en televisi贸n ", "Final Fantasy XIV Online recibir谩 una adaptaci贸n aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")

Este reto mas parec铆a un reto Pug que Stylus . El reto lo hice con una variable condicional en la cual tu decides si aparece la seccion 鈥淣oticias鈥

En ejercicio-stylus.pug

1.- Creamos una variable en la cual si existe se muestra la seccion noticias

-var reto = "Reto Stylus"

2.- A帽adimos la condicional con las nuevas cajas

section.contenido
	+caja("apex.jpg", "Video", "Apex ...")
	+caja("crash.jpg", "Video", "Ya salio ...")
	+caja("ff.jpg", "Video", "Final Fantasy ..")
	if reto
		section.contenido
			+caja("","noticias", "pes 2020...")
			+caja("","noticias", "cyberpunk: ...")
			+caja("","noticias", "Mortal Kombat ...")
		

En head.pug

Agregamos una condicional cuando recibe o no una imagen

mixin caja(imagen, category, title, summary)
	.caja
		if imagen
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

Hola chicos. El ejercicio era mas un tema con pug que un reto de stylus. mi solucion fue crear un nuevo parametro que recibe la funcion de pug de cajas y a帽adirle un bool, si este bool es falso esque no cargara la imagen , si es true si la cargara.

mixin caja(imagen, category, title, summary,bool)
	.caja
		if bool == true
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

ahora para las funciones se tiene que usar llaves para encerrar el codigo

listo el reto, pero me quedo con sass.
.

Reto completado!!
Me dio m谩s problemas la identaci贸n que de l贸gica jajaja, pero ya qued贸

Este es mi resultado del reto, me siento un poco mas c贸modo con Sass que con Stylus, creo que Sass me eligi贸 馃槄 Aunque las tres est谩n geniales

Reto cumplido:

Se agrego un Mixin en pug:

mixin caja2(category, title, summary)
	.caja
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica 

En mi caso me cuesta definirme por un preprocesador de css o por otro, tal vez hay que tener cierta flexibilidad. Observando los requerimientos laborales me he topado m谩s con pedidos de stylus y si comparo en google trends veo que el m谩s popular parece ser sass鈥

Si tienen el error de indentaci贸n
expected 鈥渋ndent鈥, got "ident font-family"
o bien expected 鈥渋ndent鈥, got 鈥渋dent h鈥 son ambos errores generados por Prepros.

Como dicen en algunos comentarios, se soluciona compilando stylus por consola.

En este link nos dice como hacerlo: https://abalozz.es/tutorial-de-stylus-no-temas-a-la-terminal/

IMPORTANTE: es necesario tener instalado WSL, lo cual se ve en el curso de Prework de la escuela de Desarrollo Web.

Saludos!

Yo lo hice de la siguiente manera

Agregue una condicional al mixin caja en el head.pug

mixin caja(imagen, category, title, summary)
	.caja
		if imagen == ""
		else
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica 

Para seguir hice secciones para videos y noticias en el index.pug

section.contenido
			section.contenido__videos
				+caja("apex.jpg", "Video", "Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")
				+caja("crash.jpg", "Video", "Ya salio la rese帽a de Crash Team Racing Nitro Fueled", "Veinte a帽os despu茅s del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")
				+caja("ff.jpg", "Video", "Final Fantasy XIV recibir谩 una serie live-action en televisi贸n ", "Final Fantasy XIV Online recibir谩 una adaptaci贸n aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")
			section.contenido__noticias
				+caja('', 'noticias', 'pes 2020 obtiene acuerdo con el manchester united', 'Konami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego.')
				+caja('', 'noticias', 'cyberpunk: habr谩 dos juegos m谩s', 'El estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.')
				+caja('', 'noticias', 'Mortal Kombat 11: Filtraci贸n confirma al Joker como DC', 'Usuarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.')

Despu茅s agregue un mixin al global.styl

seccion()
	display: flex
	justify-content: space-evenly
	margin-bottom: 50px

Y para finalizar agregue lo siguiente al archivo cajas.styl

.contenido
  margin-bottom 40px
  flex-direction: column
  contenedor()
  &__videos
    seccion()
    height: 550px
  &__noticias
    seccion()
    height: 300px

Reto logrado

RETO TERMINADO

Lo primero que hice fue crear un mixin en el archivo head.pug
Este mixin no le pase la imagen porque no la 铆bamos a utilizar

mixin noticias(category, title, summary)
	.caja 
		.caja__contenido
			span.caja__categoria=category 
			h3=title 
			p=summary
		+estadistica

Luego en el archivo ejercicio-stylus.pug duplique la section.contenido agreg谩ndole el mixin noticias creado anteriormente, con los datos correspondientes.

section.contenido
	+noticias("noticias", "pes 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego.")
	+noticias("noticias", "cyberpunk: habr谩 dos juegos m谩s", "El estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.")
	+noticias("noticias", "Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC", "Usuarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.")
	

Por ultimo en el archivo cajas.styl , en el selector _.contenido _agregue las propiedades flex-wrap: wrap y row-gap: 20px para que cuando la pantalla sea mas peque帽a los elementos caigan

.contenido 
	margin-bottom: 40px
	justify-content: space-evenly
	flex-wrap: wrap
	row-gap: 20px
	contenedor()

codigo para quitar las imagenes de las noticias


A qui茅n m谩s, la sintaxys para crear loops y condicionales en stylus les recuerda Python?

Reto completado,

  1. Lo que hice fue agregar un if en el mixing de caja y enviar los nuevos elementos con el primer parametro en false:
    mixin caja(imagen, category, title, summary)
.caja
	if imagen
		a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
	.caja__contenido
		span.caja__categoria=category
		h3=title
		p=summary
	+estadistica
  1. No agregue un nuevo section, creo que es muy dificil mantener eso en un futuro, por lo que hice fue modificar el css del contenido para que se creeen rows de 3 columnas, de esta manera es mas facil mantener las columnas. Para ello, Le agregue un flex-wrap y flex-basis 33.333333%
.contenido
	flex-wrap wrap
	justify-content space-evenly
	container()

.caja 
	max-width 430px
	flex-basis 33.333333%
	margin-bottom 40px
	box-shadow()

Y el resultado es el siguiente! 馃槑

excelente bastante simple el hacer condicionales, me gusto stylus pero prefiero SASS

Reto en dark mode 馃槂

reto cumplido

Reutilize el codigo de clase contenido y solo lo valide con un condicional.

Listo!!//Reto Cumplido

//PUG---------------------
mixin caja2(category, title, summary)
	.caja2
		.caja2__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica


html
	include head.pug
	body
		.buscador: form: input(type="text" placeholder="Playstation" class="buscador__input")
		header.encabezado--con-filtros
			h2 20 Resultados para "Playstation"
			.filtros
				span Filtrar Por
				a(href="#" class="fa fa-th-large")
				a(href="#" class="fa fa-bars")
		section.contenido
			+caja("apex.jpg", "Video", "Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")
			+caja("crash.jpg", "Video", "Ya salio la rese帽a de Crash Team Racing Nitro Fueled", "Veinte a帽os despu茅s del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")
			+caja("ff.jpg", "Video", "Final Fantasy XIV recibir谩 una serie live-action en televisi贸n ", "Final Fantasy XIV Online recibir谩 una adaptaci贸n aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")
			+caja2("Noticias", "Pes 2020 obtiene acuerdo con el Manchester United", "Konami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego")
			+caja2("Noticias", "Cyberpunk 2077: Habr谩 dos juegos m谩s", "El estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino tres juegos ubicados en el universo RPG de Cyberpunk.")
			+caja2("Noticias", "Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC", "Usuarios han invesigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos de joker, Terminator.")
//Stylus-------------------
.caja2
	max-width 430px
	margin-top: 100px
	caja-sombra()
	&__contenido
		padding: 20px
		height: 200px
		background-color: color-claro
		span 
			color: color-secundario
			titulos(Fuente2)
		h3 
			font-weight: normal
			titulos(Fuente2)

B - Loop for

Listo 馃槃

Reto cumpido
PlatziGames

mixin box(section, title, description, image)
  .box
    if(image)
      figure
        img(src="../assets/images/"+image, alt=title)
    .box__details
      strong #{section}
      h3 #{title}
      p #{description}
      a(href="#") ver m谩s
    .statistics--box
      +statistic

Agregu茅 condicional en el mixin caja de PUG y listo

Con un condicional en PUG se soluciona (un string vacio 鈥溾 da como resultado false)

mixin caja(imagen, category, title, summary)
	.caja
		if imagen
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica```



section.contenido
+caja("", 鈥淣oticias鈥, 鈥淎qui va la noticia.鈥)
+caja("", 鈥淣oticias鈥, 鈥淎qui va la noticia.鈥)
+caja("", 鈥淣oticias鈥, 鈥淎qui va la noticia.鈥)

La pregunta del millon, podr铆a ser como integrar la parte responsi en los proyectos

Reto cumplido.
Repositorio.

Con este reto sale completamente al descubierto el poder de los preprocesadores.
Observen esas dos lineas de codigo adicionales en cajas.styl, IMPRESIONANTE!!
head.pug:

ejercicio-stylus.pug:

cajas.styl:

Listo reto
Repositorio

Reto completado 馃槃

Repositorio GitHub

reto cumplido!!

Me parece que en sus funciones cuando ha implementado las condicionales no hacen mucho sentido hacer el font-family dentro de los if/else

titulos(fuente)
	if fuente == Fuente1
		font-family: Fuente1
	else
		font-family: Fuente2
		font-weight: 600
		text-transform: uppercase

Pues, sea cual sea la fuente siempre asigna la que llega en su par谩metro.
Quedar铆a mejor si ese font-family est谩 fuera de la condicional

titulos(fuente)
	font-family: fuente
	if fuente == Fuente2
		font-weight:600
		text-transform: uppercase

Reto completado.

Hice un par de cambios para tratar de modularizar un poco:

Mixins

mixin video(imagen, category, title, summary)
	.video
		a(href="#",class="video__imagen"): img(src="../images/"+imagen)
		+caja(category, title, summary)
		+estadistica

mixin noticia(category, title, summary)
	.noticia
		+caja(category, title, summary)
		+estadistica

mixin caja(category, title, summary)
	.caja
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p.caja__summary=summary```

Listo 馃槂

RETO FINALIZADO!

Para este reto realice otra section llamada noticias en el archivo pug adyacente y en globales un estilo para le section noticias llamando al mixin de contenedor() y ocultando el elemento imagen porque no tiene.

Aqui mi reto
![](

ejercicios-stylus.pug

section.contenido
			+caja("","Noticias", "pes 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego.")
			+caja("","noticias", "cyberpunk: habr谩 dos juegos m谩s", "El estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.")
			+caja("","Noticias", "Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC", "Usuarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.")```

head.pug



mixin caja(imagen, category, title, summary)
.caja
if(imagen)
a(href="#",class=鈥渃aja__imagen鈥): img(src="鈥/images/"+imagen)
.caja__contenido
span.caja__categoria=category
h3=title
p=summary
+estadistica```

Pens茅 que ser铆a m谩s largo 馃槷

reto cumplido

Listo ya me quedo:
![](
![](

Este preprocesador, fue el que m谩s me frustr贸 de los tres xD

listo, cajas.styl
agregar

//////////////////////
.noticia
	margin-bottom: 40px
	justify-content: space-evenly
	contenedor()
//////////////////////

en pug ejercicio

section.noticia
			+caja--noticia('noticias', 'pes 2020 obtiene acuerdo con el manchester united', 'Konami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego.')
			+caja--noticia('noticias', 'cyberpunk: habr谩 dos juegos m谩s', 'El estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.')
			+caja--noticia('noticias', 'Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC', 'Usuarios han investigado el m谩s reciente parche de la versin para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.')

y por ultimo en head.pug

mixin caja--noticia( category, title, summary)
	.caja
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

Mi humilde soluci贸n es la siguiente:

  1. Cre茅 una nueva secci贸n para las noticias.
section.news
	+caja("", "Noticias", "Pes 2020 obtiene un acuerdo con el machester united", "Konami ha anunciado que ha firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego")
	+caja("", "Noticias", "Cyberpunk: habr谩 dos juegos m谩s", "El estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.")
	+caja("", "Noticias", "Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC", "Usuarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.")
  1. Reutilic茅 el mixin de caja pero le a帽ad铆 un condicional en caso de que no haya imagen.
mixin caja(imagen, category, title, summary)
	.caja
		if imagen
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica
  1. Por 煤ltimo en stylus solo hice un extend de contenido:
.news
	@extend .contenido

驴Alguna sugerencia para mejorarlo?

Para el reto he a帽adido simplemente un mixin de caja sin imagen (queda mejor con los condicionales como han puesto otros compa帽eros):

mixin caja_sin_imagen(category, title, summary)
	.caja
		a(href="#",class="caja__imagen")
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

Le he puesto adem谩s al h3 dentro de la caja una altura fija de 60px para que los textos de las tres cajas queden a la misma altura independientemente de que unos ocupen 2 l铆neas y otros solo 1.
Aunque esta soluci贸n no sirve para el responsive.

reto terminado

Cumplimos 馃憦

Reto cumplido

Cumplido

Les comparto c贸m hice el reto:

  1. a帽ad铆 en el documento ejercicio-stylus.pug tres cajas m谩s con los datos de las noticias y el campo de la imagen vac铆o.
+caja( '', 'noticias', 'PES 2020 obtiene acuerdo con el manchester united', 'Konami ha anunciado que han firmado...
  1. En el mixin de las cajas a帽ad铆 un condicional, en donde especifica que si no se le pasa una imagen, no ponga la etiqueta img.
	.caja
		if imagen != ''
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)

  1. Ya para darle estilo a las cajas use Flex. En el contenedor
.contenido
  display: flex
  flex-wrap: wrap
  justify-content: space-evenly
  1. Para que las cajas se acomoden bien tuve que cambiar c贸mo se especifica el tama帽o de cada una
.caja
  flex: 0 0 30%
  margin: 20px 0 30px 0
  display: flex
  flex-direction: column
  1. Y por 煤ltimo, para que la caja de las estad铆sticas se vaya al fondo.
.estadistica--articulos
  align-self: flex-end

n

Mi Soluci贸n del Reto
Use el mixing caja del Pug y le a帽ad铆 un condicional para que pueda usar la estructura creada con anterioridad

mixin caja(imagen, category, title, summary)
	if imagen != ""
		.caja
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
			.caja__contenido
				span.caja__categoria=category
				h3=title
				p=summary
			+estadistica
	else
		.caja
			.caja__contenido
				span.caja__categoria=category
				h3=title
				p=summary
			+estadistica

Luego cree la una nueva secci贸n en el pug principal

		section.noticia
			+caja("","noticias", "pes 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol ingl茅s Manchester United para ser incluido en el juego.")
			+caja("","noticias", "cyberpunk: habr谩 dos juegos m谩s", "El estudio polaco de videojuegos CD Projekt est谩 trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.")
			+caja("","noticias", "Mortal Kombat 11: Filtraci贸n confirma al Joker como DLC", "Usuarios han investigado el m谩s reciente parche de la versi贸n para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.")

Y luego a帽adi los estilos de la secci贸n contenido a la nueva seccion

.contenido, .noticia
	margin-bottom: 40px
	justify-content: space-evenly
	contenedor()```

![screencapture-localhost-8848-html-ejercicio-stylus-html-2020-12-31-14_42_45.png](https://static.platzi.com/media/user_upload/screencapture-localhost-8848-html-ejercicio-stylus-html-2020-12-31-14_42_45-c8eab3c1-1bbc-4165-9c49-cd4b5677cd14.jpg)

Link pagina https://codingjairomerea.github.io/preproStylus/

Reto,

Lo solucione duplicando section.contenido en ejercicios-stylus.pug y en el head.pug modifique el mixin existente para que no muestre el img si viene un 0 en dicho parametro, de esta forma me evito 鈥渄uplicar鈥 un mixin.