Code Weekend #4 - Acordión con transiciones

Hola comunidad de EDteam, sean bienvenidos nuevamente al Code Weekend 💻, donde cada viernes estaremos poniendo a prueba (y premiando) tus conocimientos en HTML, CSS y JS con diversos retos de código.

El reto en esta ocasión será crear un sistema de acordiones con vanilla JS, el cual debe tener una transición al momento de mostrar el contenido. Se evaluará ingenio en la solución y principalmente buenas prácticas.

Para participar debes compartir el link de tu código en los comentarios, acompañado de una captura de pantalla de éste mismo como imagen (para evitar modificaciones). Puedes usar plataformas como Codepen o Code Sandbox. La fecha límite para entregar será el domingo hasta media noche de Perú/Colombia.

El premio en esta ocasión será una semana de suscripción premium en EDteam. El ganador será anunciado en esta publicación el lunes por la mañana.

¡Feliz coding! #NoTeDetengas #CodeWeekendEDteam

1:30 p. m. · 5 mar. 2021

A M

@jopzik

Code Weekend #4 - Acordión con transiciones

Hola comunidad de EDteam, sean bienvenidos nuevamente al Code Weekend 💻, donde cada viernes estaremos poniendo a prueba (y premiando) tus conocimientos en HTML, CSS y JS con diversos retos de código.

El reto en esta ocasión será crear un sistema de acordiones con vanilla JS, el cual debe tener una transición al momento de mostrar el contenido. Se evaluará ingenio en la solución y principalmente buenas prácticas.

Para participar debes compartir el link de tu código en los comentarios, acompañado de una captura de pantalla de éste mismo como imagen (para evitar modificaciones). Puedes usar plataformas como Codepen o Code Sandbox. La fecha límite para entregar será el domingo hasta media noche de Perú/Colombia.

El premio en esta ocasión será una semana de suscripción premium en EDteam. El ganador será anunciado en esta publicación el lunes por la mañana.

¡Feliz coding! #NoTeDetengas #CodeWeekendEDteam

1:30 p. m. · 5 mar. 2021

A M

@jopzik

Code Weekend #4 - Acordión con transiciones

Hola comunidad de EDteam, sean bienvenidos nuevamente al Code Weekend 💻, donde cada viernes estaremos poniendo a prueba (y premiando) tus conocimientos en HTML, CSS y JS con diversos retos de código.

El reto en esta ocasión será crear un sistema de acordiones con vanilla JS, el cual debe tener una transición al momento de mostrar el contenido. Se evaluará ingenio en la solución y principalmente buenas prácticas.

Para participar debes compartir el link de tu código en los comentarios, acompañado de una captura de pantalla de éste mismo como imagen (para evitar modificaciones). Puedes usar plataformas como Codepen o Code Sandbox. La fecha límite para entregar será el domingo hasta media noche de Perú/Colombia.

El premio en esta ocasión será una semana de suscripción premium en EDteam. El ganador será anunciado en esta publicación el lunes por la mañana.

¡Feliz coding! #NoTeDetengas #CodeWeekendEDteam

1:30 p. m. · 5 mar. 2021

A M

@jopzik

Code Weekend #4 - Acordión con transiciones

Hola comunidad de EDteam, sean bienvenidos nuevamente al Code Weekend 💻, donde cada viernes estaremos poniendo a prueba (y premiando) tus conocimientos en HTML, CSS y JS con diversos retos de código.

El reto en esta ocasión será crear un sistema de acordiones con vanilla JS, el cual debe tener una transición al momento de mostrar el contenido. Se evaluará ingenio en la solución y principalmente buenas prácticas.

Para participar debes compartir el link de tu código en los comentarios, acompañado de una captura de pantalla de éste mismo como imagen (para evitar modificaciones). Puedes usar plataformas como Codepen o Code Sandbox. La fecha límite para entregar será el domingo hasta media noche de Perú/Colombia.

El premio en esta ocasión será una semana de suscripción premium en EDteam. El ganador será anunciado en esta publicación el lunes por la mañana.

¡Feliz coding! #NoTeDetengas #CodeWeekendEDteam

1:30 p. m. · 5 mar. 2021

A M

@jopzik

Code Weekend #4 - Acordión con transiciones

Hola comunidad de EDteam, sean bienvenidos nuevamente al Code Weekend 💻, donde cada viernes estaremos poniendo a prueba (y premiando) tus conocimientos en HTML, CSS y JS con diversos retos de código.

El reto en esta ocasión será crear un sistema de acordiones con vanilla JS, el cual debe tener una transición al momento de mostrar el contenido. Se evaluará ingenio en la solución y principalmente buenas prácticas.

Para participar debes compartir el link de tu código en los comentarios, acompañado de una captura de pantalla de éste mismo como imagen (para evitar modificaciones). Puedes usar plataformas como Codepen o Code Sandbox. La fecha límite para entregar será el domingo hasta media noche de Perú/Colombia.

El premio en esta ocasión será una semana de suscripción premium en EDteam. El ganador será anunciado en esta publicación el lunes por la mañana.

¡Feliz coding! #NoTeDetengas #CodeWeekendEDteam

1:30 p. m. · 5 mar. 2021

A M

@jopzik

Code Weekend #4 - Acordión con transiciones

Hola comunidad de EDteam, sean bienvenidos nuevamente al Code Weekend 💻, donde cada viernes estaremos poniendo a prueba (y premiando) tus conocimientos en HTML, CSS y JS con diversos retos de código.

El reto en esta ocasión será crear un sistema de acordiones con vanilla JS, el cual debe tener una transición al momento de mostrar el contenido. Se evaluará ingenio en la solución y principalmente buenas prácticas.

Para participar debes compartir el link de tu código en los comentarios, acompañado de una captura de pantalla de éste mismo como imagen (para evitar modificaciones). Puedes usar plataformas como Codepen o Code Sandbox. La fecha límite para entregar será el domingo hasta media noche de Perú/Colombia.

El premio en esta ocasión será una semana de suscripción premium en EDteam. El ganador será anunciado en esta publicación el lunes por la mañana.

¡Feliz coding! #NoTeDetengas #CodeWeekendEDteam

1:30 p. m. · 5 mar. 2021

A M @jopzik5 mar

Acá les dejo un pequeño prototipo para que se den una idea:

https://www.figma.com/proto/iZDatXEJCnk7M6wX3ZasFH/Acorde%C3%B3n?node-id=7%3A82&scaling=min-zoom

Leonardo Manuel @leonardomanuelalvarez5 mar

hice mi mayor esfuerzo espero que ese premio sea para mi, por que lo necesito.

https://codepen.io/leonardo06leo/pen/rNWZVEw

Gerson Vladimir Borja Alvarez @gersonborja5 mar

Ahi esta el mio... hize lo mejor que pude :c por favor espero ser el premiado...

https://codesandbox.io/s/autumn-smoke-hutft?file=/index.html

suerte aa todos.......

Carlos Córdova @carloscdev5 mar

Estuvo complicado pero se logró 💙

Espero poder ganar para poder llevar cursos de React Js y Node Js

Demo: https://carloscdev.github.io/RetoEdTeam4/

CodeSandBox : https://codesandbox.io/s/reto-edteam-hpb08?file=/main.js

Repositorio GitHub: https://github.com/carloscdev/RetoEdTeam4

Xavier Gaspata @xaviergaspata6 mar

Finalice el código estuvo muy chévere realizar este reto.

Gracias EDTeam por la oportunidad!.

https://codesandbox.io/s/determined-voice-li48n?file=/index.html

Alfredo Mendoza @alfredomendoza6 mar

🦾i did it!!! Me puse a prueba a mi mismo y use un concepto en JS llamado Bubble events, gracias a eso pude reducir el costo del DOM, ya que me evito hacer un recorrido (un for) por todos los elementos para asignarles el evento, y si agregues por ejemplo 100 items al acordion "DONT WORRY" porque en temas de performance estamos OK :). Espero que a alguien le sirva mi codigo como referencia y tambien ganar la suscripción 😁.

Codepen: https://codepen.io/kick1930/pen/yLVxyPG

Oscar Moises @oscarmoisesalvarengamendoza6 mar

https://codepen.io/moises19/pen/XWNPbxR

German Ordoñez @gaordonezh6 mar

Reto completado. Espero obtener un buen resultado.

DEMO: https://codesandbox.io/s/retoedteam-e17vl

REPO: https://github.com/gaordonezh/retoEDTeam-Accordion

JC

Juan Carlos Cruz Jiménez @juancarloscruzjimenez6 mar

Y aquí mi solución utilizando vanillaJS :), Es responsive, traté de hacerlo muy estructurado para poder ser utilizado como una mini-librería e intenté utilizar la cascada lo mejor que pude, espero les gusté y suerte a todos por esa semana de EDPremium :D

https://codepen.io/juanchoj/pen/eYBLyRx

Anthony Adrian @anthonyagelvis7 mar

Buenas aquí les dejo mi Accordion Responsive espero que le guste.

url: https://codepen.io/anthony14/pen/GRNYgmj

A M @jopzik8 mar

Damas y caballeros, tenemos al ganador del Code Weekend #4 en EDteam: https://ed.team/comunidad/ganador-code-weekend-4-acordion-con-transiciones

Gracias por participar y esperamos verlos el siguiente viernes con un nuevo reto 💪

A M @jopzik5 mar

Acá les dejo un pequeño prototipo para que se den una idea:

https://www.figma.com/proto/iZDatXEJCnk7M6wX3ZasFH/Acorde%C3%B3n?node-id=7%3A82&scaling=min-zoom

Leonardo Manuel @leonardomanuelalvarez5 mar

hice mi mayor esfuerzo espero que ese premio sea para mi, por que lo necesito.

https://codepen.io/leonardo06leo/pen/rNWZVEw

Gerson Vladimir Borja Alvarez @gersonborja5 mar

Ahi esta el mio... hize lo mejor que pude :c por favor espero ser el premiado...

https://codesandbox.io/s/autumn-smoke-hutft?file=/index.html

suerte aa todos.......

Carlos Córdova @carloscdev5 mar

Estuvo complicado pero se logró 💙

Espero poder ganar para poder llevar cursos de React Js y Node Js

Demo: https://carloscdev.github.io/RetoEdTeam4/

CodeSandBox : https://codesandbox.io/s/reto-edteam-hpb08?file=/main.js

Repositorio GitHub: https://github.com/carloscdev/RetoEdTeam4

Xavier Gaspata @xaviergaspata6 mar

Finalice el código estuvo muy chévere realizar este reto.

Gracias EDTeam por la oportunidad!.

https://codesandbox.io/s/determined-voice-li48n?file=/index.html

Alfredo Mendoza @alfredomendoza6 mar

🦾i did it!!! Me puse a prueba a mi mismo y use un concepto en JS llamado Bubble events, gracias a eso pude reducir el costo del DOM, ya que me evito hacer un recorrido (un for) por todos los elementos para asignarles el evento, y si agregues por ejemplo 100 items al acordion "DONT WORRY" porque en temas de performance estamos OK :). Espero que a alguien le sirva mi codigo como referencia y tambien ganar la suscripción 😁.

Codepen: https://codepen.io/kick1930/pen/yLVxyPG

Oscar Moises @oscarmoisesalvarengamendoza6 mar

https://codepen.io/moises19/pen/XWNPbxR

German Ordoñez @gaordonezh6 mar

Reto completado. Espero obtener un buen resultado.

DEMO: https://codesandbox.io/s/retoedteam-e17vl

REPO: https://github.com/gaordonezh/retoEDTeam-Accordion

JC

Juan Carlos Cruz Jiménez @juancarloscruzjimenez6 mar

Y aquí mi solución utilizando vanillaJS :), Es responsive, traté de hacerlo muy estructurado para poder ser utilizado como una mini-librería e intenté utilizar la cascada lo mejor que pude, espero les gusté y suerte a todos por esa semana de EDPremium :D

https://codepen.io/juanchoj/pen/eYBLyRx

Anthony Adrian @anthonyagelvis7 mar

Buenas aquí les dejo mi Accordion Responsive espero que le guste.

url: https://codepen.io/anthony14/pen/GRNYgmj

A M @jopzik8 mar

Damas y caballeros, tenemos al ganador del Code Weekend #4 en EDteam: https://ed.team/comunidad/ganador-code-weekend-4-acordion-con-transiciones

Gracias por participar y esperamos verlos el siguiente viernes con un nuevo reto 💪

A M @jopzik5 mar

Acá les dejo un pequeño prototipo para que se den una idea:

https://www.figma.com/proto/iZDatXEJCnk7M6wX3ZasFH/Acorde%C3%B3n?node-id=7%3A82&scaling=min-zoom

Leonardo Manuel @leonardomanuelalvarez5 mar

hice mi mayor esfuerzo espero que ese premio sea para mi, por que lo necesito.

https://codepen.io/leonardo06leo/pen/rNWZVEw

Gerson Vladimir Borja Alvarez @gersonborja5 mar

Ahi esta el mio... hize lo mejor que pude :c por favor espero ser el premiado...

https://codesandbox.io/s/autumn-smoke-hutft?file=/index.html

suerte aa todos.......

Carlos Córdova @carloscdev5 mar

Estuvo complicado pero se logró 💙

Espero poder ganar para poder llevar cursos de React Js y Node Js

Demo: https://carloscdev.github.io/RetoEdTeam4/

CodeSandBox : https://codesandbox.io/s/reto-edteam-hpb08?file=/main.js

Repositorio GitHub: https://github.com/carloscdev/RetoEdTeam4

Xavier Gaspata @xaviergaspata6 mar

Finalice el código estuvo muy chévere realizar este reto.

Gracias EDTeam por la oportunidad!.

https://codesandbox.io/s/determined-voice-li48n?file=/index.html

Alfredo Mendoza @alfredomendoza6 mar

🦾i did it!!! Me puse a prueba a mi mismo y use un concepto en JS llamado Bubble events, gracias a eso pude reducir el costo del DOM, ya que me evito hacer un recorrido (un for) por todos los elementos para asignarles el evento, y si agregues por ejemplo 100 items al acordion "DONT WORRY" porque en temas de performance estamos OK :). Espero que a alguien le sirva mi codigo como referencia y tambien ganar la suscripción 😁.

Codepen: https://codepen.io/kick1930/pen/yLVxyPG

Oscar Moises @oscarmoisesalvarengamendoza6 mar

https://codepen.io/moises19/pen/XWNPbxR

German Ordoñez @gaordonezh6 mar

Reto completado. Espero obtener un buen resultado.

DEMO: https://codesandbox.io/s/retoedteam-e17vl

REPO: https://github.com/gaordonezh/retoEDTeam-Accordion

JC

Juan Carlos Cruz Jiménez @juancarloscruzjimenez6 mar

Y aquí mi solución utilizando vanillaJS :), Es responsive, traté de hacerlo muy estructurado para poder ser utilizado como una mini-librería e intenté utilizar la cascada lo mejor que pude, espero les gusté y suerte a todos por esa semana de EDPremium :D

https://codepen.io/juanchoj/pen/eYBLyRx

Anthony Adrian @anthonyagelvis7 mar

Buenas aquí les dejo mi Accordion Responsive espero que le guste.

url: https://codepen.io/anthony14/pen/GRNYgmj

A M @jopzik8 mar

Damas y caballeros, tenemos al ganador del Code Weekend #4 en EDteam: https://ed.team/comunidad/ganador-code-weekend-4-acordion-con-transiciones

Gracias por participar y esperamos verlos el siguiente viernes con un nuevo reto 💪

A M @jopzik5 mar

Acá les dejo un pequeño prototipo para que se den una idea:

https://www.figma.com/proto/iZDatXEJCnk7M6wX3ZasFH/Acorde%C3%B3n?node-id=7%3A82&scaling=min-zoom

Leonardo Manuel @leonardomanuelalvarez5 mar

hice mi mayor esfuerzo espero que ese premio sea para mi, por que lo necesito.

https://codepen.io/leonardo06leo/pen/rNWZVEw

Gerson Vladimir Borja Alvarez @gersonborja5 mar

Ahi esta el mio... hize lo mejor que pude :c por favor espero ser el premiado...

https://codesandbox.io/s/autumn-smoke-hutft?file=/index.html

suerte aa todos.......

Carlos Córdova @carloscdev5 mar

Estuvo complicado pero se logró 💙

Espero poder ganar para poder llevar cursos de React Js y Node Js

Demo: https://carloscdev.github.io/RetoEdTeam4/

CodeSandBox : https://codesandbox.io/s/reto-edteam-hpb08?file=/main.js

Repositorio GitHub: https://github.com/carloscdev/RetoEdTeam4

Xavier Gaspata @xaviergaspata6 mar

Finalice el código estuvo muy chévere realizar este reto.

Gracias EDTeam por la oportunidad!.

https://codesandbox.io/s/determined-voice-li48n?file=/index.html

Alfredo Mendoza @alfredomendoza6 mar

🦾i did it!!! Me puse a prueba a mi mismo y use un concepto en JS llamado Bubble events, gracias a eso pude reducir el costo del DOM, ya que me evito hacer un recorrido (un for) por todos los elementos para asignarles el evento, y si agregues por ejemplo 100 items al acordion "DONT WORRY" porque en temas de performance estamos OK :). Espero que a alguien le sirva mi codigo como referencia y tambien ganar la suscripción 😁.

Codepen: https://codepen.io/kick1930/pen/yLVxyPG

Oscar Moises @oscarmoisesalvarengamendoza6 mar

https://codepen.io/moises19/pen/XWNPbxR

German Ordoñez @gaordonezh6 mar

Reto completado. Espero obtener un buen resultado.

DEMO: https://codesandbox.io/s/retoedteam-e17vl

REPO: https://github.com/gaordonezh/retoEDTeam-Accordion

JC

Juan Carlos Cruz Jiménez @juancarloscruzjimenez6 mar

Y aquí mi solución utilizando vanillaJS :), Es responsive, traté de hacerlo muy estructurado para poder ser utilizado como una mini-librería e intenté utilizar la cascada lo mejor que pude, espero les gusté y suerte a todos por esa semana de EDPremium :D

https://codepen.io/juanchoj/pen/eYBLyRx

Anthony Adrian @anthonyagelvis7 mar

Buenas aquí les dejo mi Accordion Responsive espero que le guste.

url: https://codepen.io/anthony14/pen/GRNYgmj

A M @jopzik8 mar

Damas y caballeros, tenemos al ganador del Code Weekend #4 en EDteam: https://ed.team/comunidad/ganador-code-weekend-4-acordion-con-transiciones

Gracias por participar y esperamos verlos el siguiente viernes con un nuevo reto 💪

A M @jopzik5 mar

Acá les dejo un pequeño prototipo para que se den una idea:

https://www.figma.com/proto/iZDatXEJCnk7M6wX3ZasFH/Acorde%C3%B3n?node-id=7%3A82&scaling=min-zoom

Leonardo Manuel @leonardomanuelalvarez5 mar

hice mi mayor esfuerzo espero que ese premio sea para mi, por que lo necesito.

https://codepen.io/leonardo06leo/pen/rNWZVEw

Gerson Vladimir Borja Alvarez @gersonborja5 mar

Ahi esta el mio... hize lo mejor que pude :c por favor espero ser el premiado...

https://codesandbox.io/s/autumn-smoke-hutft?file=/index.html

suerte aa todos.......

Carlos Córdova @carloscdev5 mar

Estuvo complicado pero se logró 💙

Espero poder ganar para poder llevar cursos de React Js y Node Js

Demo: https://carloscdev.github.io/RetoEdTeam4/

CodeSandBox : https://codesandbox.io/s/reto-edteam-hpb08?file=/main.js

Repositorio GitHub: https://github.com/carloscdev/RetoEdTeam4

Xavier Gaspata @xaviergaspata6 mar

Finalice el código estuvo muy chévere realizar este reto.

Gracias EDTeam por la oportunidad!.

https://codesandbox.io/s/determined-voice-li48n?file=/index.html

Alfredo Mendoza @alfredomendoza6 mar

🦾i did it!!! Me puse a prueba a mi mismo y use un concepto en JS llamado Bubble events, gracias a eso pude reducir el costo del DOM, ya que me evito hacer un recorrido (un for) por todos los elementos para asignarles el evento, y si agregues por ejemplo 100 items al acordion "DONT WORRY" porque en temas de performance estamos OK :). Espero que a alguien le sirva mi codigo como referencia y tambien ganar la suscripción 😁.

Codepen: https://codepen.io/kick1930/pen/yLVxyPG

Oscar Moises @oscarmoisesalvarengamendoza6 mar

https://codepen.io/moises19/pen/XWNPbxR

German Ordoñez @gaordonezh6 mar

Reto completado. Espero obtener un buen resultado.

DEMO: https://codesandbox.io/s/retoedteam-e17vl

REPO: https://github.com/gaordonezh/retoEDTeam-Accordion

JC

Juan Carlos Cruz Jiménez @juancarloscruzjimenez6 mar

Y aquí mi solución utilizando vanillaJS :), Es responsive, traté de hacerlo muy estructurado para poder ser utilizado como una mini-librería e intenté utilizar la cascada lo mejor que pude, espero les gusté y suerte a todos por esa semana de EDPremium :D

https://codepen.io/juanchoj/pen/eYBLyRx

Anthony Adrian @anthonyagelvis7 mar

Buenas aquí les dejo mi Accordion Responsive espero que le guste.

url: https://codepen.io/anthony14/pen/GRNYgmj

A M @jopzik8 mar

Damas y caballeros, tenemos al ganador del Code Weekend #4 en EDteam: https://ed.team/comunidad/ganador-code-weekend-4-acordion-con-transiciones

Gracias por participar y esperamos verlos el siguiente viernes con un nuevo reto 💪

A M @jopzik5 mar

Acá les dejo un pequeño prototipo para que se den una idea:

https://www.figma.com/proto/iZDatXEJCnk7M6wX3ZasFH/Acorde%C3%B3n?node-id=7%3A82&scaling=min-zoom

Leonardo Manuel @leonardomanuelalvarez5 mar

hice mi mayor esfuerzo espero que ese premio sea para mi, por que lo necesito.

https://codepen.io/leonardo06leo/pen/rNWZVEw

Gerson Vladimir Borja Alvarez @gersonborja5 mar

Ahi esta el mio... hize lo mejor que pude :c por favor espero ser el premiado...

https://codesandbox.io/s/autumn-smoke-hutft?file=/index.html

suerte aa todos.......

Carlos Córdova @carloscdev5 mar

Estuvo complicado pero se logró 💙

Espero poder ganar para poder llevar cursos de React Js y Node Js

Demo: https://carloscdev.github.io/RetoEdTeam4/

CodeSandBox : https://codesandbox.io/s/reto-edteam-hpb08?file=/main.js

Repositorio GitHub: https://github.com/carloscdev/RetoEdTeam4

Xavier Gaspata @xaviergaspata6 mar

Finalice el código estuvo muy chévere realizar este reto.

Gracias EDTeam por la oportunidad!.

https://codesandbox.io/s/determined-voice-li48n?file=/index.html

Alfredo Mendoza @alfredomendoza6 mar

🦾i did it!!! Me puse a prueba a mi mismo y use un concepto en JS llamado Bubble events, gracias a eso pude reducir el costo del DOM, ya que me evito hacer un recorrido (un for) por todos los elementos para asignarles el evento, y si agregues por ejemplo 100 items al acordion "DONT WORRY" porque en temas de performance estamos OK :). Espero que a alguien le sirva mi codigo como referencia y tambien ganar la suscripción 😁.

Codepen: https://codepen.io/kick1930/pen/yLVxyPG

Oscar Moises @oscarmoisesalvarengamendoza6 mar

https://codepen.io/moises19/pen/XWNPbxR

German Ordoñez @gaordonezh6 mar

Reto completado. Espero obtener un buen resultado.

DEMO: https://codesandbox.io/s/retoedteam-e17vl

REPO: https://github.com/gaordonezh/retoEDTeam-Accordion

JC

Juan Carlos Cruz Jiménez @juancarloscruzjimenez6 mar

Y aquí mi solución utilizando vanillaJS :), Es responsive, traté de hacerlo muy estructurado para poder ser utilizado como una mini-librería e intenté utilizar la cascada lo mejor que pude, espero les gusté y suerte a todos por esa semana de EDPremium :D

https://codepen.io/juanchoj/pen/eYBLyRx