Proyecto JavaScript: crea una aplicación de seguimiento de gastos

1. Introducción del proyecto: En este curso, vamos a construir una app de seguimiento de gastos donde puedas hacer un seguimiento de tus gastos y tus ingresos. Y puedes sumar tus gastos, puedes sumar tus ingresos, y este curso contará con un almacenamiento local. Entonces, para agregar un gasto o para agregar ingresos, puede escribir el nombre de la transacción. Ahora voy a escribir cliente porque conseguimos algún pago de gravamen por eso estoy escribiendo a su cliente Obtuvimos $500 de nuestro cliente. Por eso voy a escribir aquí 500. Después voy a hacer clic en este icono más. Ahora puedes ver aquí que tenemos $500 en tu saldo, y luego puedes consultar aquí en nuestro historial, tenemos cliente que nos pagó $500. Ahora en gasto, es cero porque no necesitábamos ningún gasto de este saldo. Pero si haces clic en este ingreso, puedes ver que obtuvimos $500 en nuestros ingresos. Ahora si quieres agregar algún gasto compraste algún alimento de esta cantidad. Déjame escribir pie y luego déjame escribir alguna cantidad, $20 por comida. Si estoy escribiendo algún tipo de gastos, entonces tengo que insertar este símbolo menos. Entonces si hago clic en este ícono más, ahora puedes verificar que nuestro saldo es ahora de $480 Eso significa 500 -20 es $480. Si haces clic en este gasto, puedes ver que estamos obteniendo $20 menos $20 en nuestro gasto. Entonces este es un proyecto que vamos a construir en este curso. Y déjame mostrarte el almacenamiento local en este proyecto. Al igual que si voy a recargar esta página, se puede ver que nuestro gasto está ahí, nuestro ingreso está ahí, nuestro saldo está ahí, y nuestra historia está ahí Eso significa que no se ha actualizado nada porque esto se almacena en el almacenamiento local Y si quieres eliminar cualquier tipo de gasto o ingreso, simplemente puedes hacer clic en este ítem cruzado. Por lo que ahora se quita nuestro gasto, que era de 20 dólares. Y ahora puedes ver que nuestro ingreso es de 500 y nuestro ingreso es de $20. No $20. Nuestro gasto es de $0 y nuestro ingreso es de $500. Entonces, si quieres construir una aplicación de seguimiento de gastos como esta y quieres implementar este almacenamiento local en esta aplicación, puedes consultar Sly este curso y comencemos a construir esta aplicación. 2. Agregar HTML: Ahora vamos a escribir el HTM de nuestro proyecto. Entonces aquí se puede ver en el lado izquierdo, he creado un proyecto de trazador de gastos Y luego dentro de esta carpeta, tenemos tres archivos. El primero es EBD Js y luego index dot html, y luego estilo CSS Así que antes que nada, voy a crear un repetidor de H t para crear un repetitivo, tenemos que simplemente escribir signo de exclamación y dar Nuestro repetible estará listo. Ahora conectaremos este estilo de CSS y EB dot Js. Entonces para vincular este estilo de CSS y EBD Js, onda para escribir el tagnam de Link, y luego dentro de este link, vamos a escribir el HRF de este estilo de Así que ahora hemos conectado este estilo de CSS a nuestro HTML. Ahora conectaremos nuestra web dot js. Para conectar nuestro ab dot js, entraré dentro de este cuerpo, y aquí voy a crear un nombre de etiqueta conocido como script Dentro de este script, voy a escribir SRC significa fuente, y dentro de esta fuente, voy a escribir el nombre de archivo que es Así que ahora hemos conectado JavaScript y CSS con nuestro Htmle Ahora enlazaremos nuestros íconos, y luego vincularemos nuestra fuente. Entonces vamos a nuestro navegador y luego así que aquí adentro, se puede ver que he abierto un sitio web conocido como fondosm.com Y aquí puedes ver que seleccionamos este icono de cruz. Entonces para seleccionar este icono de cruz o para usar este icono de cruz, tenemos que usar este ITAC, y luego dentro de la clase de este Itech escribiremos FasR y luego lejos de Solís luego lejos Entonces copiaremos esto para usar esta web de Crossmr para vincular este fondosom a Entonces para enlazar nuestra fuente dosm, tenemos que ir a este sitio web conocido como CDN En este CDN Js, simplemente puedes buscar tu fuente dosom y luego después de buscar fuente dosom obtendrás este tipo de página donde se escribirá fondosom en simplemente puedes copiar esta copia de enlace tech y entonces podrás venir a tu tabla y debajo de este estilo de CSS, puedes tu tabla y debajo de este estilo de CSS, Así que ahora nuestra fuente dosom es link. Eso significa que podemos usar íconos de fondosom. Entonces ahora lo que voy a hacer, voy a conseguir los fones. Iré a Google Phones y obtendré las fuentes para nuestro sitio web. Entonces vine en este sitio web de teléfonos de Google, phones.google.com. Puedes buscar en esto, y entrarás en este sitio web. Y aquí puedes buscar en la sección de teléfono de búsqueda. Puede buscar en Roboto Mono porque estamos utilizando esta fuente en este proyecto Por eso puedes buscar aquí Roboto Mono. Entonces he seleccionado este Roboto Mono con él 300, y luego simplemente puedes copiar esta URL de entrada Control C, y luego lo pegaré en nuestro CSS. Aquí lo pegaré. Aquí ya he pegado este enlace. Ahora lo que vamos a hacer ahora vamos a crear nuestro HTML. En primer lugar, voy a crear un encabezado dentro del encabezado, vamos a escribir el rastreador de gastos y así, vamos a seguir. Déjame construir encabezado. Dentro de este encabezado, crearemos una H dos y luego dentro de esta H dos, escribiremos un rastreador de gastos. Y aquí crearemos un contenedor Div y dentro este contenedor diff contendremos nuestros ingresos y gastos y nuestro saldo. En primer lugar, voy a crear un dif con la clase de contenedor. Dentro de esto, permítanme crear algo de espacio aquí. Ahora dentro de este continente, lo primero que escribiré es tu saldo. Para escribir tu saldo, tenemos que seleccionar H cuatro. Dentro de este H four, escribiré tu saldo y tu saldo por defecto será 0.0 $0. Para escribir 0.0 $0, seleccionaremos H uno y luego dentro de este H uno, habrá un ID llamado saldo. Así que hemos creado H uno con la idea de equilibrio. Ahora vamos a escribir algún saldo, que será de 0.0 $0. Entonces dólar y luego cero punto doble cero. Entonces este es nuestro saldo por defecto. Entonces ahora voy a crear un dif más y dentro del div contendrá nuestros ingresos y nuestro gasto. Entonces déjame crear una diff y la clase de la D será tinta x o EXP inc. Escribiré EXP en. Y voy a entrar en este div y aquí voy a crear un dif más para nuestros ingresos. Entonces déjame crear un dif en la clase para esta D será retiro de ingresos. Así que déjame escribir tinta eliminar. Quitar RLV en estuche de camello, así que REV quita, y luego escribiré IRE Eso significa que los ingresos quitan, y luego escribiré oculto. Entonces, ¿por qué estamos escribiendo este tipo de clases? Estamos escribiendo este tipo de clases porque queremos agregar CSS y JavaScript a estas clases, así es. Entonces ahora no entenderás por qué estamos escribiendo, cuándo usaremos o cuándo seleccionaremos estas clases, esa vez lo entenderás por qué estamos escribiendo este tipo de clases. Ahora simplemente puedes escribir estas clases. Entonces aquí, voy a escribir oculto. Y luego dentro de este DF, voy a crear un H cuatro, y ese H cuatro contendrá ingresos. Significa dentro de que H cuatro escribirá ingresos y por debajo de esta edad cuatro escribiremos el monto de estos ingresos. Entonces para escribir el monto de este ingreso, onda para escribir P, y luego dentro de la P, tendremos una clase dentro la P. La clase será plus, y luego el saldo será por defecto 0.0 $0, dólar cero punto doble cero. Entonces como puedes ver ahí hemos creado un ingreso di ahora vamos a crear una caída de gastos. Para crear gastos podemos simplemente copiar esto y pegarlo a continuación. Control C y Control V. Y aquí voy a quitar este INC y voy a añadir EXP y luego IRE a ERE, y luego oculto será lo mismo. Ahora voy a cambiar sus ingresos por gastos. Y esta clase será menos. Y pondremos menos delante de esto. Y aquí pondremos un plus frente a esto. Entonces ahora hemos creado un rastreador de gastos de encabezado y un contenedor dentro de ese contenedor, hemos creado un saldo y luego ingresos y gastos. Echemos un vistazo a la mesa. Déjame guardarlo y hacer clic derecho y abrir con el servidor Life. Entonces ahora aquí puedes ver que hemos creado el rastreador de gastos, tu saldo está ahí, entonces nuestro saldo está ahí, que es 0.0 $0, y luego los ingresos y gastos están ahí. Entonces ahora vamos a crear dos entradas. En una entrada, agregamos nombre de la transacción y en otra entrada, agregaremos la cantidad. Entonces déjame crear input para crear nuestro input antes de crear input, tenemos que crear dos botones para esto porque en nuestra app, hemos creado un botón para entrada y un botón para gasto. Permítanme crear dos botones antes de crear esas entradas. Voy a venir por debajo de este diff y aquí voy a crear un botón. Para crear un botón, voy a escribir botón y luego dentro de este botón pasillo escribir, voy a dar alguna clase a este botón La clase será gasto. Voy a copiar este gasto. Lo pegaré aquí, y luego crearé un botón más. Entonces voy a copiar este botón y voy a pegar este botón a continuación. Y aquí voy a teclear ingresos. Y voy a quitar este gasto y luego escribiré ingresos. Ahora podemos comprobar que tenemos dos botones con ingresos y gastos. Entonces, si hacemos clic en gasto, obtendremos el gasto y si hacemos clic en ingresos, entonces obtendremos los ingresos. Vamos a crear entradas aquí, pero antes de crear entradas, voy a escribir el encabezado. El encabezado será agregar nueva transacción, así que son tres y luego dentro de tres, voy a escribir agregar nueva transacción Entonces voy a crear una tecnología de Fm, y luego dentro de esta tecnología de Fm, voy a agregar ID. El nombre de identificación será formulario. Entonces haz clic en Entrar, luego obtendremos un formulario con el formulario de idea. Entonces déjame quitarle este axón. Debajo de este formulario, crearemos un DV y dentro de esta D crearemos una etiqueta, y luego dentro de la etiqueta crearemos. Así que ahora vamos a crear un DV dentro del DV vamos a crear una etiqueta. Entonces en esa etiqueta, vamos a escribir esta etiqueta es para texto. Entonces déjame escribir texto. Y entonces aquí voy a escribir nombre. Y luego voy a crear input. El tipo de entrada será texto y el nombre de la entrada y luego el nombre de la entrada no será nada. No hay uso de ningún nombre, y entonces y luego la idea del nombre será texto. Y luego agregaremos una clase en esta entrada. La clase será nombre de entrada. Entonces déjame escribir entrada. Hay nombre y luego marcador de posición estará allí, así que marcador Y dentro de este marcador de posición, escribimos el nombre de la transacción Así que hemos creado entrada para el nombre de la transacción. Ahora vamos a crear entrada por cantidad. Entonces voy a copiar esta D y pegar este dV aquí y luego cambiaremos el nombre. Cambiaremos el nombre de nombre a cantidad. Y entonces el tipo de la cantidad será número. Número de luz. Y luego ID será monto. En la clase vamos a ingresar cantidad. Y entonces el marcador de posición será cantidad. Así que hemos creado insumos. Ahora vamos a crear nuestra historia. Para crear nuestra historia, vendremos por debajo esta forma y luego aquí escribiré historia. Entonces para escribir historia, seleccionaré H tres y dentro de esta H tres, escribiré historia. Y entonces la historia será Allis, para crear Allis tenemos que crear UL Dentro de esta UL, habrá IA. Pero la identificación de la UL será lista. Déjame escribir la identificación y luego la identificación será lista. Y luego dentro de esta UL, vamos a crear una IA IA luego dentro de esta IA, voy a escribir algunos gastos como pie. Y luego voy a crear un giro dentro de este giro, voy a copiar esta cosa. Entonces copiaremos este icono de fuente. Para copiar esta fuente, simplemente voy a hacer clic en esta fuente y después la pegaré aquí. Así que también hemos copiado esta fuente X Mark. Entonces déjame hacer esto en navegador. Entonces puedes ver que hemos creado un rastreador de gastos con tu saldo ingreso gasto, y hay dos botones con gasto e ingresos y luego hemos creado agregar nueva transacción con dos entradas, entrada de nombre y monto de entrada, y luego hemos creado un historial con Ally of food, y hay un ícono de fuente. Así que hemos escrito el código T para nuestro proyecto. Ahora vamos a escribir código CSS para este proyecto en el siguiente video. 3. Estilizar nuestra aplicación: En este video, vamos a escribir el código CSS para nuestra aplicación para que podamos darle estilo a nuestra aplicación. Entonces quiero decir una cosa más que nos olvidamos de poner este símbolo más en nuestra app en nuestro último video. Entonces déjame mostrarte cómo ponerlo. Entonces aquí así que aquí arriba de este formulario de cierre tech, se puede ver que he creado un botón con la clase de BTNS Entonces he insertado este Itech y dentro de este iTE, la clase es muy sólida y lejos círculo plus y luego lejos demasiado Excel. Para sobresalir significa la fuente más grande. Entonces ahorraré y te mostraré cómo se ve. Para que veas que hemos agregado este ícono más. Así que también puedes ir y agregar este ícono más. Ahora agregaremos CSS a nuestra aplicación. Entonces, para agregar nuestro CSS, lo primero que haremos aquí es seleccionar el selector Universal. Y luego dentro de este selector universal, vamos a escribir el tamaño de la caja Bader Box, así dimensionamiento de la caja Bader Y ahora vamos a venir por debajo de esto y seleccionaremos todo nuestro cuerpo. Entonces déjame seleccionar cuerpo. Y luego dentro de este cuerpo, aplicaremos display flex para que podamos llevar nuestro contenedor al centro. Entonces, para llevar nuestro contenedor al centro, estamos usando Flexbox. Entonces, antes que nada, escribiré display flex. Y luego escribiré flex direction y flex direction sera columna. Así flexiona la dirección de la columna. Y luego escribiré Aleem center, linem center, y luego justificaré content Justificar centro de contenido. Yo escribí Bseline aquí, así que déjame eliminar Bsline escribimos aquí, justificar Ahora agregaremos una altura media en esta altura media, 100 VH, entonces 100 VH. Y luego agregaremos luego agregaremos un color de fondo. Por lo que no se requiere color de fondo porque nuestro color de fondo es el blanco. Ahora agregaremos una familia de fuentes en todo este cuerpo. Para agregar familia de fuentes, simplemente escribiré la familia de fuentes. Y entonces nuestra familia de fuentes me dejará comprobarlo. Nosotros hemos seleccionado esto. Así que nuestra familia de fuentes será este robotomano. Déjame copiar esta familia de fuentes y la voy a pegar aquí. Control V. Control V. Déjame eliminar esta familia de fuentes. Así que hemos probado nuestra familia de fuentes Roboto mono aquí. Entonces ahora nuestro cuerpo está listo, déjame guardar y mostrarte cómo se ve. Entonces vayamos a este navegador y abramos esto. Entonces sí, se puede ver que nuestro contenedor está en el centro y todo está en el centro. Significa que hemos alineado todo en el centro. Ahora lo que vamos a hacer, ahora agregaremos estilo en contenedor. Entonces dentro del continuer, agregaremos color de fondo y muchas cosas Entonces déjame seleccionar este contenedor. Dentro de este contenedor, escribiremos margin auto, no margin auto, daremos algún margen. El margen será de 30 píxeles y luego automático. Y luego escribiré ancho. Por lo que el ancho de esta app será de 550 píxeles. Es como una app estrecha, así que por eso estoy escribiendo 550 píxeles. Y luego escribiremos nuestro color de fondo. Entonces nuestro color de fondo estaba en lineal radiante. Entonces, si quieres agregar radiante lineal en tu proyecto, así que si quieres agregar radiante lineal, tienes que seleccionar imagen de fondo , no color de fondo. Así que déjame seleccionar imagen de fondo imagen de fondo. Y dentro de esta imagen de fondo, escribiremos lineal radiante y nuestro radiante lineal será -90 grados coma, nuestro nombre de color será tiene A uno C cuatro Esta es nuestra primera colonia Ahora agregaremos un color más. Déjame agregar una C, c2e, y luego nueve FB Por lo que hemos agregado otro color también con 90 grados. Entonces déjame guardarlo y te lo mostraré en el navegador. Puedes ver que hemos agregado nuestro color a esta aplicación de rastreador de gastos, y ahora agregaremos algunos radios de borde aquí y agregaremos box do. Entonces, para agregar radio de borde y caja Edo, ¿qué haremos? En primer lugar, voy a añadir box do aquí. Entonces para agregar caja Edo, he creado una caja do aquí. Se puede ver que he creado una caja Edo con la ayuda de ustedes puede ver esto a continuación. He creado esta caja do con la ayuda de Figma. ¿Y qué puedo hacer? Simplemente puedo activar este modo desarrollador. Y dentro de este modo desarrollador, puedo entrar dentro de este inspeccionar y dentro de este inspeccionar. Entonces seleccionaré esta casilla y luego entraré en este modo desarrollador. Así que en cuanto enciendo este modo de desarrollador, puedo ver todo el código y puedo obtener todo el código CSS. Así que aquí puedo conseguir esta caja Edo. Así que déjame copiar esta caja hacer. O ya he copiado. Entonces lo que voy a hacer es que vendré en este JavaScript porque he agregado nuestro cuadro do aquí. Entonces voy a copiar esto. Voy a quitar esto de aquí. Y luego voy a pegar esa caja Edo aquí, Control V, y luego Así hemos agregado nuestro box do a nuestra página web. Déjame ver y ver cómo se ve. Para que veas que hemos agregado una caja do alrededor de esta caja alrededor de este contenedor. Ahora agregaremos este radio de borde, y luego agregaremos un poco de relleno aquí. Permítanme primero agregar radio de borde. Para agregar radio de borde, vendré por debajo esto y aquí escribiré radio de borde. radio del borde en nuestro radio fronterizo será de dos carnero Y luego vamos a agregar algo de relleno izquierda porque déjame guardar y déjame mostrarte porque todo nuestro texto va hacia la izquierda. Entonces, si añadimos relleno a la izquierda, entonces nuestro contenido estará un poco a nuestro lado derecho. Entonces puedes ver aquí que nuestro contenido está hacia el lado izquierdo. Entonces, si añades relleno a la izquierda, estará bien. Así que déjame agregar este acolchado a la izquierda, PAW DIN G padding left. Y el relleno a la izquierda será de cinco carnero. Déjame guardarlo. Entonces aquí puedes ver que nuestro contenido está en un poquito del lado derecho. Antes estaba completamente en izquierda ahora mismo está en lado derecho. Ahora vamos a darle estilo a estos botones. Entonces, para darle estilo a estos botones, seleccionaré botón. Directamente, seleccionaré este botón. Y dentro de este botón, escribiré padding si agrego padding dentro de este botón, nuestro botón se volverá un poco más grande. Entonces déjame agregar 0.6 n en este relleno. Déjame guardarlo, y te lo mostraré. Puedes ver que nuestro botón se vuelve un poco más grande. Ahora le agregaremos color de fondo, color de fondo y el color de fondo será blanco. Y luego agregaremos frontera porque algún borde está ahí en nuestro botón, así que por eso tenemos que quitar el borde. Para quitar el borde del botón, escribiremos border none. Y luego agregaremos algún radio de borde a nuestro botón, así que el radio del borde, y luego el radio del borde será de cinco ram. Déjame guardarlo voy a ver. Puedes ver que nuestro botón se volvió de color blanco y ha agregado algún radio de borde a nuestro botón. Ahora agregaremos estilo a nuestras entradas. Entonces, para agregar estilo a nuestras entradas, seleccionaré directamente la entrada aquí. Y dentro de esta entrada, voy a añadir relleno para hacer la entrada más grande. Acolchado PA DANG acolchado y el acolchado será 0.4 ram. Y después voy a añadir frontera. Déjame afeitarme y te voy a mostrar lo que. Para que veas que la frontera está ahí en nuestra entrada Y si haces clic en esto, obtendremos una frontera más. Entonces tenemos que eliminar este borde clic también y luego este borde también. Entonces déjame quitar la frontera. En primer lugar, frontera, la frontera no será ninguna. Un contorno significa borde de contorno. Entonces, para eliminar el borde del contorno, tenemos que seleccionar simplemente contorno y ninguno. Entonces si guardo esto y si te muestro, puedes ver que aquí no hay frontera. Pero se puede ver que estos dos se fusionan. Entonces, si queremos algún margen aquí, agregaremos algo de margen. Tenemos que agregar una BR ahí porque agregaremos este nombre encima de esta entrada y esta cantidad por encima de esta cantidad. Entonces, para agregar este BR, iremos a nuestra mesa y agregaremos BR aquí. Entonces debajo de esta etiqueta, voy a poner B BR, y luego aquí, voy a poner una BR. Entonces voy a guardar esto y te voy a mostrar en navegador. Entonces aquí puedes ver que nuestro aporte está bien. Ahora agregaremos estilo a este ícono más. Entonces, para agregar estilo a este ícono más, hemos seleccionado estos BTs. Entonces hemos escrito una clase de ts en este icono. Entonces déjame seleccionar este Bt, BTNS no BTs. Y luego voy a darle estilo a este control de puntos ts. Y simplemente voy a quitar el fondo de ese botón. Entonces fondo, ninguno. Voy a guardar esto y te voy a mostrar en el navegador. Se puede ver que aquí se ha quitado todo el fondo. Ahora selecciono este icono por separado para poder agregar algo de relleno a este icono o algún margen a este icono. Para seleccionar este icono, escribiré far des circle, des plus, y agregaré un margin top margin top and margin top will be 25 pixel, then phone size will be ten pixel, phone size ten pixel. Déjame guardar déjame mostrarte en estos ahora puedes ver que tenemos algún margen adecuado en este icono. Entonces puedes ver aquí que estamos a punto de terminar nuestro diseño. Lo único que queda es que tenemos que sumar esta historia. Significa que tenemos que darle estilo a esta historia. Entonces lo que voy a hacer, voy a quitar este punto de aquí significa que voy a quitar esta viñeta de aquí, y voy a quitar el relleno que tiene esta comida. Entonces déjame seleccionar esta UL. Y dentro de esto, antes que nada, voy a quitar las viñetas. Entonces para quitar las viñetas, vamos a escribir les dottyLett no punto es estilo D tipo, y esto será ninguno Y luego agregaremos nuestro relleno a cero. Relleno geo Controladores. Ahora te voy a mostrar. Ahora puedes ver que nuestra historia también está debidamente estilizada. 4. Funcionalidad de botones: Entonces esta es nuestra aplicación actual, y en esta aplicación, agregaremos esta funcionalidad de gastos e ingresos. Entonces para agregar esta funcionalidad, tenemos que usar JavaScript. Así que voy a entrar en este archivo app dot Java Script. Y aquí, voy a seleccionar este ingreso y gasto. En primer lugar, seleccionaré esto y seleccionaré esto, y luego seleccionaré este botón y luego seleccionaré este botón. Entonces para seleccionar esto, usaré selector de consultas. Déjame construir una variable llamada ink remove Voy a escribir tinta, eliminar. Gané escribir E, y luego voy a dar iguales a N luego lo seleccionaré con la ayuda del selector de consultas. Así selector de consulta de punto de documento. Y luego seleccionaré esto en eliminar. Déjame ir a este HTML, y voy a copiar esto y lo pegaré aquí, control con punto, Control V. Ahora voy a copiar esto y voy a pegar esto abajo, Control V. Y en vez de tinta, escribiré EXP o EX simplemente escribiré. Y luego voy a agregar esta clase a aquí, esta EXP eliminar. Déjame copiar esto y luego pegarlo aquí. Control V. Así que hemos seleccionado nuestros ingresos y gastos. Ahora seleccionaremos el botón Ingresos y el botón de gastos. Entonces nuevamente, podemos copiar esto y podemos pegarlo aquí, Control V y ControLV Entonces voy a escribir botón de Tinta. Botón IMC, BTN y luego EX BTN. Y aquí seleccionaré ingresos ingresos, y luego aquí seleccionaré gasto. Gasto E es capital, puedes consultarlo aquí. Escribió esta E mayúscula, así que déjame escribirla en pequeño poco y luego voy a guardar esto y escribiré esta E en camada pequeña y gastos EX PE y SE. Voy a guardar y agregaré JavaScript a los selectores. Entonces, antes que nada, crearé un oyente de eventos para este botón Inc y el botón X Gasto Significa que cada vez que un usuario haga clic en esto, ese oyente de eventos se ejecutará Y luego la función dentro del oyente par, lo que sea que agreguemos dentro de esa función, esa función se ejecutará cada vez que un usuario haga clic este botón inc o botón X significa botón de ingresos o botón de gasto Entonces déjame agregar este oyente par en esta tinta incuton BTN, y voy a dejar que eso agregue incluso oyente, y el oyente par hará clic, entonces CLI c clic y voy a dejar que eso agregue incluso oyente, y el oyente par hará clic, entonces CLI c clic. Y después voy a añadir una función. El nombre de la función será ICs, y luego crearé un oyente más par donde agrego este oyente par en el botón Gasto Entonces voy a quitar este INC y voy a añadir X. Y en lugar de estas tintas, voy a añadir algunos otros nombres como XP ahora voy a crear una función Is y luego voy a crear una función EXP. Entonces para crear una función Is, voy a escribir una variable nombre const, y luego escribiré Is NC entonces voy a dar iguales a En estos parámetros de funciones, pasaremos E E significa parámetro de evento. Y ahora aquí estoy usando la función de flecha. Puedes usar la función regular, pero estoy usando arrow functon porque estoy más acostumbrado a Y voy a dar este símbolo de flecha y luego voy a dar estos discos rizados. Dentro de los corchetes, lo que vamos a hacer. Siempre que el usuario haga clic en este botón, agregaremos una clase oculta o eliminaremos una clase oculta de los ingresos, y agregaremos la clase oculta en gasto. Entonces, lo que estoy haciendo, déjame mostrarte. Seleccionaré esta tinta y seleccionaré tinta eliminar. Este REOV luego seleccionaré esto, y luego eliminaré clase oculta de esta función Siempre que el usuario haga clic en, eso significa que cada vez que el usuario hace clic en el botón de ingresos, entonces quiero eliminar la clase conocida como hidden porque en esa clase oculta, agregaremos una monja display Entonces déjame antes que nada, agregar clase oculta, así que es una D y oculta. Y dentro de este oculto, escribiremos monja de exhibición. Así que no exhiba ninguno. Entonces ahora lo que esta pantalla ninguno hará es, siempre que un usuario haga clic en este botón de ingresos, entonces eliminaremos la clase oculta de este botón de ingresos. Eso significa que cada vez que eliminemos esta clase oculta de este botón de ingresos, nuestra monja de visualización será eliminada, y luego agregaremos esta clase oculta en este botón de gastos. Entonces déjame mostrarte. Selecciono este ingreso remove y luego dot class list, y luego queremos eliminar oculto de este ingreso, por lo que agregaremos dot remove. Si quieres agregar, agregaremos punto t y si quieres eliminar, agregaremos dot remove. Después voy a añadir el nombre de la clase que está oculto HID oculto. Y es HI. Entonces voy a copiar esto y lo pegaré aquí. Y en vez de tinta, escribiré x. Y luego agregaré esta clase a esta, y luego agregaré la clase aquí, A voy a agregar. Ahora voy a copiar esto, y haré lo contrario con este botón de gastos. En primer lugar, te mostraré con los controles del botón Ingresos, y te mostraré en el navegador. Ahora aquí, si haces clic en Gasto, no pasará nada porque no hemos agregado ningún gasto de cribado de Java. Pero si haces clic en Ingresos, puedes ver que vienen los ingresos y cada vez que estamos haciendo clic en Gasto, no pasa nada. Entonces, permítanme agregar este opuesto a esto. Tenemos que añadir opuesto a esto al gasto. Voy a copiar esto y lo pegaré debajo de Control V. Y en vez de tintas, pondré EXP, entonces EXP. Dentro de esto, agregaré Ex aquí, y agregaré ENC aquí. Entonces ahora lo que esto está haciendo es, esto es eliminar el elemento gasto, o esto es eliminar la caída de gastos. Déjame mostrarte ese div Dentro de este gasto, este div está ahí, derecho. Esta D con etiqueta de párrafo. Entonces cada vez que estamos haciendo clic en eso, esto está quitando esto así que déjame mostrarte correctamente. Entonces cada vez que estamos haciendo clic en este gasto, estamos quitando oculto. Eso significa que estamos quitando display none de aquí. Eso significa que este gasto se mostrará en nuestro navegador y estamos agregando oculto a nuestros ingresos. Por lo que los ingresos se ocultarán cuando hagamos clic en Gasto y cuándo haremos clic y cuando hagamos clic en ingresos se ocultará el gasto. Entonces supongo que entendiste este punto. Entonces déjame guardar esto y déjame mostrarte en el navegador. Ahora, si haces clic en Gasto, nuestros ingresos se ocultarán y cuando hagamos clic en ingresos, nuestro gasto se ocultará. Entonces esa es la lógica básica detrás de esto. Y esto es en este video, nos encontraremos en otro video y en otro video, agregaremos este saldo o agregaremos estas transacciones.