search

HiginioUrbano / practica_dwec_gestor_presupuesto

Práctica de Gestión de Presupuestos para el módulo de Desarrollo Web en Entorno Cliente
GNU General Public License v3.0
0 stars 0 forks source link

Duda mostrarGastoWeb #6

Closed HiginioUrbano closed 2 years ago

HiginioUrbano commented 3 years ago

@pedroprieto

He conseguido que al menos el programa me "pinte" los datos correctos en el html, pero me los pinta todos seguidos y sin limpieza, pero no se como hacer el resto, es todo lo que he podido hacer. Tampoco se como hacer lo del span que pides para las etiquetas, se que se haría más o menos como el div, pero cuando lo intento el programa deja de reconocerme todo.

Tampoco se como debo emplear en la funcion el idElemento, sería como hago en mostrarDato? Si me dieses algo de luz te lo agradecería, porque en cuanto saque esto creo que ya puedo casi terminar la practica...

pedroprieto commented 3 years ago

Tienes que ir creando elementos con https://es.javascript.info/modifying-document#creando-un-elemento. Puedes ir guardándolos en distintas variables, como has hecho aquí: https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L11

Vas creando los textos mediante https://es.javascript.info/modifying-document#metodos-de-insercion

Y vas añadiendo los nodos hijos al nodo padre mediante https://es.javascript.info/modifying-document#metodos-de-insercion también.

Los span se crean igual que los div, cambiando "div" por "span": https://es.javascript.info/modifying-document#creando-un-elemento

El parámetro idElemento de la función mostrarGastoWeb indica el nombre del nodo donde debes crear el div.gasto que crees. En lugar de añadir el div.gasto directamente al documento, como haces aquí: https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L26

Debes añadirlo al elemento indicado con idElemento:

var raiz = document.getElementById(idElemento);
raiz.append(div);

De esta manera, cuando llames a la función mostrarGastoWeb("listado-gastos-completo", gasto) los div que crees se añadirán dentro del div#listado-gastos-completo.

Un saludo!

HiginioUrbano commented 3 years ago

Simplemente cambiando lo de raiz me ha servido, era ese paso el que me faltaba, lo unico que tengo sin hacer ahora es lo de etiquetas que aun tengo la duda, el span se crearlo, lo que no tengo claro es como hacer para incluir esa etiqueta dentro del append, o no es necesario? No se si me estoy explicando bien.

El vie, 5 nov 2021 a las 10:05, Pedro Prieto @.***>) escribió:

Tienes que ir creando elementos con https://es.javascript.info/modifying-document#creando-un-elemento. Puedes ir guardándolos en distintas variables, como has hecho aquí:

https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L11

Vas creando los textos mediante https://es.javascript.info/modifying-document#metodos-de-insercion

Y vas añadiendo los nodos hijos al nodo padre mediante https://es.javascript.info/modifying-document#metodos-de-insercion también.

Los span se crean igual que los div, cambiando "div" por "span": https://es.javascript.info/modifying-document#creando-un-elemento

El parámetro idElemento de la función mostrarGastoWeb indica el nombre del nodo donde debes crear el div.gasto que crees. En lugar de añadir el div.gasto directamente al documento, como haces aquí:

https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L26

Debes añadirlo al elemento indicado con idElemento:

var raiz = document.getElementById(idElemento); raiz.append(div);

De esta manera, cuando llames a la función mostrarGastoWeb("listado-gastos-completo", gasto) los div que crees se añadirán dentro del div#listado-gastos-completo.

Un saludo!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/issues/6#issuecomment-961730289, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUM3WNO4TURZ5ZT4GLTFWG3UKOM5PANCNFSM5HLW4USA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

HiginioUrbano commented 3 years ago

DEntro del append no, queria decir dentro del div

El vie, 5 nov 2021 a las 12:21, HIGINIO URBANO OCHOA (< @.***>) escribió:

Simplemente cambiando lo de raiz me ha servido, era ese paso el que me faltaba, lo unico que tengo sin hacer ahora es lo de etiquetas que aun tengo la duda, el span se crearlo, lo que no tengo claro es como hacer para incluir esa etiqueta dentro del append, o no es necesario? No se si me estoy explicando bien.

El vie, 5 nov 2021 a las 10:05, Pedro Prieto @.***>) escribió:

Tienes que ir creando elementos con https://es.javascript.info/modifying-document#creando-un-elemento. Puedes ir guardándolos en distintas variables, como has hecho aquí:

https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L11

Vas creando los textos mediante https://es.javascript.info/modifying-document#metodos-de-insercion

Y vas añadiendo los nodos hijos al nodo padre mediante https://es.javascript.info/modifying-document#metodos-de-insercion también.

Los span se crean igual que los div, cambiando "div" por "span": https://es.javascript.info/modifying-document#creando-un-elemento

El parámetro idElemento de la función mostrarGastoWeb indica el nombre del nodo donde debes crear el div.gasto que crees. En lugar de añadir el div.gasto directamente al documento, como haces aquí:

https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L26

Debes añadirlo al elemento indicado con idElemento:

var raiz = document.getElementById(idElemento); raiz.append(div);

De esta manera, cuando llames a la función mostrarGastoWeb("listado-gastos-completo", gasto) los div que crees se añadirán dentro del div#listado-gastos-completo.

Un saludo!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/issues/6#issuecomment-961730289, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUM3WNO4TURZ5ZT4GLTFWG3UKOM5PANCNFSM5HLW4USA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

HiginioUrbano commented 3 years ago

Vale ya se cual es mi error, lo que se pretende es que creemos un div con clase gasto otros div con clase gasto descripcion, etc. En cambio yo estoy creando un solo div gasto con todos los datos dentro sin dividirlos, pero no se como crear un div y dentro de ese div volver a crear 6 div mas con sus respectivas clases, porque cuando lo hago como estoy intentando me lo mete todo en el ulitmo div.classname que creo, se puede hacer con append o hay que usar otra?

El vie, 5 nov 2021 a las 12:21, HIGINIO URBANO OCHOA (< @.***>) escribió:

DEntro del append no, queria decir dentro del div

El vie, 5 nov 2021 a las 12:21, HIGINIO URBANO OCHOA (< @.***>) escribió:

Simplemente cambiando lo de raiz me ha servido, era ese paso el que me faltaba, lo unico que tengo sin hacer ahora es lo de etiquetas que aun tengo la duda, el span se crearlo, lo que no tengo claro es como hacer para incluir esa etiqueta dentro del append, o no es necesario? No se si me estoy explicando bien.

El vie, 5 nov 2021 a las 10:05, Pedro Prieto @.***>) escribió:

Tienes que ir creando elementos con https://es.javascript.info/modifying-document#creando-un-elemento. Puedes ir guardándolos en distintas variables, como has hecho aquí:

https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L11

Vas creando los textos mediante https://es.javascript.info/modifying-document#metodos-de-insercion

Y vas añadiendo los nodos hijos al nodo padre mediante https://es.javascript.info/modifying-document#metodos-de-insercion también.

Los span se crean igual que los div, cambiando "div" por "span": https://es.javascript.info/modifying-document#creando-un-elemento

El parámetro idElemento de la función mostrarGastoWeb indica el nombre del nodo donde debes crear el div.gasto que crees. En lugar de añadir el div.gasto directamente al documento, como haces aquí:

https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L26

Debes añadirlo al elemento indicado con idElemento:

var raiz = document.getElementById(idElemento); raiz.append(div);

De esta manera, cuando llames a la función mostrarGastoWeb("listado-gastos-completo", gasto) los div que crees se añadirán dentro del div#listado-gastos-completo.

Un saludo!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/issues/6#issuecomment-961730289, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUM3WNO4TURZ5ZT4GLTFWG3UKOM5PANCNFSM5HLW4USA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

HiginioUrbano commented 3 years ago

Asi serviría, no? En el html me da el resultado esperado:

    let div = document.createElement('div');
    let div1 = document.createElement('div');
    let div2 = document.createElement('div');
    let div3 = document.createElement('div');

    let span = document.createElement('span');
    div.className = "gasto";

    div1.className ="gasto-descripcion";
    div1.append(gasto.descripcion);

    div2.className ="gasto-fecha";
    div1.append(gasto.fecha);

    div3.className ="gasto-valor";
    div3.append(gasto.valor);

    div.append(div1);
    div.append(div2);
    div.append(div3);

El vie, 5 nov 2021 a las 12:43, HIGINIO URBANO OCHOA (< @.***>) escribió:

Vale ya se cual es mi error, lo que se pretende es que creemos un div con clase gasto otros div con clase gasto descripcion, etc. En cambio yo estoy creando un solo div gasto con todos los datos dentro sin dividirlos, pero no se como crear un div y dentro de ese div volver a crear 6 div mas con sus respectivas clases, porque cuando lo hago como estoy intentando me lo mete todo en el ulitmo div.classname que creo, se puede hacer con append o hay que usar otra?

El vie, 5 nov 2021 a las 12:21, HIGINIO URBANO OCHOA (< @.***>) escribió:

DEntro del append no, queria decir dentro del div

El vie, 5 nov 2021 a las 12:21, HIGINIO URBANO OCHOA (< @.***>) escribió:

Simplemente cambiando lo de raiz me ha servido, era ese paso el que me faltaba, lo unico que tengo sin hacer ahora es lo de etiquetas que aun tengo la duda, el span se crearlo, lo que no tengo claro es como hacer para incluir esa etiqueta dentro del append, o no es necesario? No se si me estoy explicando bien.

El vie, 5 nov 2021 a las 10:05, Pedro Prieto @.***>) escribió:

Tienes que ir creando elementos con https://es.javascript.info/modifying-document#creando-un-elemento. Puedes ir guardándolos en distintas variables, como has hecho aquí:

https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L11

Vas creando los textos mediante https://es.javascript.info/modifying-document#metodos-de-insercion

Y vas añadiendo los nodos hijos al nodo padre mediante https://es.javascript.info/modifying-document#metodos-de-insercion también.

Los span se crean igual que los div, cambiando "div" por "span": https://es.javascript.info/modifying-document#creando-un-elemento

El parámetro idElemento de la función mostrarGastoWeb indica el nombre del nodo donde debes crear el div.gasto que crees. En lugar de añadir el div.gasto directamente al documento, como haces aquí:

https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/blob/948b59517b37d2b04cc2343f4b6ad577fbb8be3d/js/gestionPresupuestoWeb.js#L26

Debes añadirlo al elemento indicado con idElemento:

var raiz = document.getElementById(idElemento); raiz.append(div);

De esta manera, cuando llames a la función mostrarGastoWeb("listado-gastos-completo", gasto) los div que crees se añadirán dentro del div#listado-gastos-completo.

Un saludo!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/issues/6#issuecomment-961730289, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUM3WNO4TURZ5ZT4GLTFWG3UKOM5PANCNFSM5HLW4USA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

pedroprieto commented 3 years ago

Puedes utilizar append sobre un elemento:

Por tanto, puedes crear un elemento div que utilizarás como base (gasto); a continuación, crear varios div adicionales (descripción, valor, etc.) y añadirlos a ese primer div base; seguidamente, crear varios elementos span y añadirlos a uno de los div creados anteriormente (el que contenga las etiquetas); y por último, añadir el div base al elemento identificado con id de la función mostrarGasto (que será listado-gastos-completo o los correspondientes de filtrado; previamente lo tienes que haber localizado con getElementById).

pedroprieto commented 3 years ago

div1.append(gasto.fecha);

Sí. Aunque tienes una errata en el segundo.

HiginioUrbano commented 3 years ago

Que errata? Es que ya he conseguido que me pase los test

El vie, 5 nov 2021 a las 12:57, Pedro Prieto @.***>) escribió:

div3.append(gasto.valor);

Sí. Aunque tienes una errata en el segundo.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/issues/6#issuecomment-961835855, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUM3WNLSKZC2YK7N4BFGEGLUKPBDNANCNFSM5HLW4USA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

pedroprieto commented 3 years ago

imagen

HiginioUrbano commented 3 years ago

Tienes razon, pues me estaba pasando los test bien igualmente.

El vie, 5 nov 2021 a las 13:10, Pedro Prieto @.***>) escribió:

[image: imagen] https://user-images.githubusercontent.com/7632447/140508185-60ccc7f5-0e48-4ba0-8be0-c6d3744e578d.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HiginioUrbano/practica_dwec_gestor_presupuesto/issues/6#issuecomment-961843060, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUM3WNL5JUU2YJO2JR27HSTUKPCSHANCNFSM5HLW4USA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.