Freddy Montes Profile picture
Aug 1 17 tweets 6 min read
✅ ¿Quieres practicar #frontend sin quedarte pegado?

✨ Te preparé un ejercicio para hoy ✨

👉🏽 AQUÍ EL CÓDIGO: codepen.io/fmontes/pen/QW…

🧵 Thread con tareas y pasos a realizar para completarlo.

❤️ RT please
La aplicación es un #webapp para crear de facturas que les permite a los usuarios crear facturas agregando y/o eliminando ítems.

Los ítems consisten en

- Descripción
- Precio

La aplicación debe calcular el total a medida que se van agregando o ítems.
Analicemos el diseño.

Es una sola pantalla con dos estados:

🪫 Sin ítems:
1. Formulario: descripción, precio y botón
2. Mensaje de "no hay ítems"

🔋 Con ítems:
1. Formulario: descripción, precio y botón
2. Líneas de la factura con botón para eliminar
☝🏽 Acciones de usuario
1. Usuario ingresa descripción
2. Ingresa precio
3. Hace clic en el botón "Add item"

*Considera que ambos campos (descripción y precio) son requeridos y el precio solo acepta números.
Paréntesis, debido al tamaño y scope de este ejercicio, voy a recomendar usar @codepen o cualquier otro editor en línea de tu preferencia.
✅ Tarea 1: Crear la interfaz

▶ Escribe el HTML del formulario, usa la etiqueta <form> y los types correctos en los inputs.

▶ Crea el estado vacío

▶ Crea la tabla vacía (y escondida) para resultados. Como es una tabla puedes utilizar <table> <thead> y <tbody>.
✅ Tarea 2: Validar el form

▶ Usar las capacidades nativas del navegador con el atributo "required" combinado con "type" para que se valide cuando el usuario intente enviarlo.

Si no es válido, no se envía
✅ Tarea 3: Obtener valores ingresados

🕓 ¿Cuándo? Cuando el formulario sea válido y se envíe.

▶ Escuchar el evento de submit del formulario

▶ En el callback del evento obtén los valores.

Tira un console.log sin miedo aquí para confirmar que tienes lo valores.
✅ Tarea 4: Guardar los valores

▶ Guarda los valores, toma en cuenta que lo que tienes que imprimir es una lista de items.

¿Cuál es la estructura de datos que funciona como lista? Esa misma tienes que utilizar.
✅ Tarea 5: Imprimir la tabla

▶ Borra o esconde el mensaje de "no hay items"

▶ Crea el row con el contenido obtenido del form y no olvides el botón de borrar

▶ Agrega el row a la tabla que tienes escondida

▶ Muestra la tabla
✅ Tarea 6: Calcula el total

▶ En la "lista" donde guardaste el item puedes iterar para sumar el precio
✅ Tarea 7: Imprimir el total

▶ Crea el elemento
▶ Agregale el total
▶ Agregalo al DOM
✅ Tarea 8: Borrar un item

▶ Agregar el evento clic al botón que agregaste dinámicamente

Otra opción sería agregar el evento click solo al padre del botón, ver a cuál botón se le hizo click para saber cuál row borrar.

Sigue...
✅ Tarea 8: Borrar un item

Una combinación de data atributos + event delegation.

▶ Borrar el row del item
▶ Borrar el item de la lista que tienes guardada
▶ Recalcular el total y actualizar el DOM
Y listo, espero que no se me haya pasado nada.

Cualquier feedback es bienvenido.
❤️ Si te gusto este thread dale RT al primer tweet y sígueme para más contenido.

📕 Y tengo un libro gratis de tips de #HTML, #CSS y #JavaScript fmontes.com/99

📸 También hago contenido en instagram.com/fmontes

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Freddy Montes

Freddy Montes Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @fmontes

Jul 28
💰 ¿Se puede ganar dinero mientras aprendes a programar?

@stackuphq es la nueva plataforma donde aprendes a programar mientras te pagan y conectas con una comunidad global de #developers.

Te explico en el hilo 🧵

❤️ Ayudame con RT

#CodeNewbie #100daysofcode
Regístrate GRATIS y aprende 👇🏼

- #HTML
- #Web3
- #Phyton
- #Rust
- #Go

¡Puedes ganar dinero de un fondo común de al menos $30,000 USD por mes!
Para sumarte, solo tienes que hacer esto:

- Entra a: app.stackup.dev
- Regístrate con mi código de acceso temprano: “fmontes”

CLICK AQUI: bit.ly/3Pa4YrP 👈🏼
Read 4 tweets
Jul 26
Pregunta lo que quieras anónimamente:

ngl.link/fmontes

✨ LET'S GO ✨
No, el trabajo remoto ya ganó y las empresas que no se den cuenta de eso la van a pasar muy mal encontrando gente. Nosotros como trabajadores tenemos que ser muy responsables con el trabajo remoto y demostrar que si se puede. Image
Claro que si, hay muchos ejemplo. No pongas tu edad en tus perfiles para evitar que te juzguen mal por eso. Hay mucha experiencia valiosa que solo te dan los años de vida que sirven para la industria de tecnología. Image
Read 14 tweets
Jul 22
✨ ¿Responsive design murió? ✨

Yo creo que ¡SI!

...al menos como lo aprendimos hace algunos años.

🧵 Explico y dejo recursos
Responsive design se trata de "responder" al tamaño de la pantalla.

¿El problema? Millones de pantallas llegaron, con color, paper like y hasta plegables.

Solo media queries no es suficiente... tenemos que maquetar "adaptativamente" o "elásticamente"
El @csswg o como a mí me gusta llamarlo "El estándar" lo notaron así que empezaron a trabajar.

✨ Flexbox ✨

Que ajusta tamaño y posición de cajas en función de su relación con cajas hermanas.

developer.mozilla.org/en-US/docs/Web…
Read 15 tweets
Jul 11
Hace 20 años cuando empece a programar me inventaba mis propios proyectos para practicar y mejorar.

✨ Tú no tienes que hacer eso ✨

Te dejo 10 #sitiosweb para practicar y mejorar tus skills como programador.

❤️ ¿Me ayudas con un RT?
Empecemos con el más conocido, HackerRank.

No solo tiene ejercicios de algoritmos, sino también una sección para prepararte para una entrevista.

Además, tener un buen puntaje en HR te puede sumar puntos cuando estés buscando empleo.

hackerrank.com
Code Wars tiene "kata" que son pequeños ejercicios de código para afianzar tus conocimientos.

Soporta desde #JavaScript hasta #Ruby o #Go o #PHP, lo que quieras.

Los ejercicios comienzan fácil, pero se van poniendo más complicados.

codewars.com
Read 12 tweets
Jul 5
⚡️ ¿Cuál es mi nivel de seniority?

Me hicieron esta pregunta en un conversatorio que me invitaron reciéntente y bueno...

✅ Averigualo tu mismo respondiéndote las siguientes preguntas.

🧵 HILO

❤️ Se agradecen RT
¿Sé cómo identificar y definir problemas?
¿Puedo resolver problemas solo?
¿Puedo crear soluciones?
¿Puedo dar mentoría otros desarrolladores?
¿Estoy en capacidad de ayudar a crecer a otros desarrolladores?
Read 12 tweets
Jun 29
El 90% de la información de la web es texto.

Mejora la usabilidad y diseño de tus proyectos web con un excelente diseño tipográfico.

Te dejo tips y herramientas.

🧵 HILO
Escoge máximo dos fuentes.

1. Una para títulos, subtítulos, botones, etc.
2. Otra para párrafos

Puedes combinar sus pesos y estilos.

🛠 Genera combinaciones de fuentes con: fontjoy.com
Los párrafos máximo deben tener entre 50 y 70 caracteres de ancho.

Más de esto es difícil de leer para el usuario.

Puedes usar la unidad "ch" de #CSS.
Read 9 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(