Projeto JavaScript: crie um aplicativo de rastreamento de despesas

1. Introdução do projeto: Neste curso, vamos criar um aplicativo rastreador de despesas onde você pode acompanhar suas despesas e sua renda E você pode adicionar suas despesas, você pode adicionar sua renda, e este curso terá um armazenamento local. Portanto, para adicionar uma despesa ou aumentar a renda, você pode escrever o nome da transação. Agora vou escrever para o cliente porque recebemos algum pagamento da garantia, é por isso que estou escrevendo para seu cliente Recebemos $500 do nosso cliente. É por isso que vou escrever aqui 500. Em seguida, clicarei nesse ícone de adição. Agora você pode ver aqui que temos $500 em seu saldo, e então você pode verificar aqui em nosso histórico, temos um cliente que nos pagou $500 Agora, em despesa, é zero porque não precisávamos de nenhuma despesa desse saldo. Mas se você clicar nessa receita, verá que recebemos $500 em nossa receita Agora, se você quiser adicionar alguma despesa comprou algum alimento desse valor. Deixe-me escrever o pé e depois deixe-me escrever uma quantia, $20 por comida Se eu estiver escrevendo algum tipo de despesa , tenho que inserir esse símbolo de menos Então, se eu clicar nesse ícone de adição, agora você pode verificar se nosso saldo agora é de $480 Isso significa que 500 -20 é $480. Se você clicar nessa despesa, verá que estamos recebendo $20 menos $20 em nossas Portanto, este é um projeto que vamos construir neste curso. E deixe-me mostrar o armazenamento local neste projeto. se eu recarregar esta página, você pode ver que nossas despesas estão lá, nossa renda está lá, nosso saldo está lá e nossa história está lá Isso significa que nada foi atualizado porque está armazenado no armazenamento local E se você quiser remover qualquer tipo de despesa ou receita, basta clicar neste item cruzado. Então, agora nossa despesa foi removida, que foi de $20. E agora você pode ver que nossa renda é de 500 e nossa renda é de $20. Não $20 Nossa despesa é de $0 e nossa renda é de $500. Então, se você quiser criar um aplicativo rastreador de despesas como esse e implementar esse armazenamento local neste aplicativo, confira este curso com o Sly e vamos começar a criar esse 2. Como adicionar HTML: Agora vamos escrever o HTML do nosso projeto. Então, aqui você pode ver, no lado esquerdo, que eu criei um projeto de rastreamento de despesas E então, dentro dessa pasta, temos três arquivos. O primeiro é EBD Js e , em seguida, index dot html e, em seguida, estilize CSS Então, primeiro de tudo, vou criar um clichê de H t para criar um clichê, basta digitar o ponto de exclamação e clicar Nosso boilerplate estará pronto. Agora vamos conectar esse estilo de CSS e EB dot Js. Então, para vincular esse estilo de CSS e EBD Js, acene para escrever o tagnam de Link e, dentro desse link, digitaremos o HRF desse estilo de Então, agora conectamos esse estilo de CSS ao nosso HTML. Agora vamos conectar nosso web dot js. Para conectar nosso ab dot js, entrarei neste corpo e aqui criarei um nome de tag conhecido como script Dentro desse script, digitarei SRC significa fonte e, dentro dessa fonte, escreverei do arquivo que é AbdTjs Então, agora conectamos o JavaScript e o CSS ao nosso Htmle Agora, vincularemos nossos ícones e, em seguida, vincularemos nossa fonte. Então, vamos ao nosso navegador e, em seguida, aqui, você pode ver que eu abri um site conhecido como fondosm.com E aqui você pode ver que selecionamos esse ícone de cruz. Então, para selecionar esse ícone de cruz ou usar esse ícone de cruz, temos que usar esse ITAC e, dentro da classe desse Itech, escreveremos FasR e depois far de Solis e depois far XMr Então, copiaremos isso para usar esta web Crossmr para vincular esse fondosom à Então, para vincular nossa fonte dosm, precisamos acessar este site conhecido como CDN Js Neste CDN Js, você pode simplesmente pesquisar sua fonte dosom e, depois de pesquisar a fonte dosom você obterá esse tipo de página em fondosom será escrito. Você pode simplesmente copiar essa tecnologia de link de cópia e, em seguida, chegar à sua tabela e, abaixo desse estilo de CSS, Então, agora nosso dosom de fonte é link. Isso significa que podemos usar ícones de fondosom. Então, agora o que vou fazer, vou pegar os telefones. Vou ao Google Phones e pego as fontes do nosso site. Então eu entrei neste site de telefones do Google, phones.google.com Você pode pesquisar isso e entrará neste site. E aqui você pode pesquisar na seção de pesquisa por telefone. Você pode pesquisar Roboto Mono porque estamos usando essa fonte neste projeto É por isso que você pode pesquisar aqui Roboto Mono. Então, eu selecionei este Roboto Mono com ele 300, e então você pode simplesmente copiar esse URL de entrada Controle C e, em seguida, eu o colarei em nosso CSS. Aqui eu vou colar. Aqui eu já colei esse link. Agora, o que faremos agora, criaremos nosso HTML. Em primeiro lugar, criarei um cabeçalho dentro do cabeçalho, escreveremos o rastreador de despesas e, assim, continuaremos Deixe-me criar o cabeçalho. Dentro desse cabeçalho, criaremos um H dois e, dentro desse H dois, escreveremos o rastreador de despesas E aqui criaremos um Div de contêiner e, dentro desse diferencial de contêiner, conteremos nossas receitas e despesas e nosso Primeiro de tudo, vou criar um dif com a classe de contêiner Dentro disso, deixe-me criar algum espaço aqui. Agora, dentro deste continente, a primeira coisa que vou escrever é seu balanço. Para escrever seu saldo, temos que selecionar H quatro. Dentro desse H quatro, escreverei seu saldo e, por padrão, seu saldo será 0,0 $0 Para escrever 0,0 $0, selecionaremos H um e , dentro desse H, haverá um ID chamado balance Então, criamos H one com a ideia de equilíbrio. Agora vamos digitar um saldo, que será de 0,0 $0 Então, dólar e depois zero ponto, duplo zero. Portanto, esse é o nosso saldo padrão. Então, agora vou criar mais um dif e dentro do div conterá nossa renda e nossa despesa Então, deixe-me criar uma diferença e a classe do D será ink x ou EXP inc. Vou escrever EXP em. E eu vou entrar nesse div e aqui vou criar mais um dif para nossa renda Então, deixe-me criar uma diferença na classe para que D seja remoção de renda Então, deixe-me escrever e remover a tinta. Remova o RLV em camel case, então remova o REV, e então eu escreverei IRE Isso significa remover a renda, e então eu escreverei escondido. Então, por que estamos escrevendo esse tipo de aula? Estamos escrevendo esse tipo de classe porque queremos adicionar CSS e JavaScript a essas classes, isso mesmo. Então, agora você não entenderá por que estamos escrevendo, quando usaremos ou quando selecionaremos essas classes, dessa vez você entenderá por que estamos escrevendo esse tipo de classe. Agora, simplesmente, você pode escrever essas classes. Então, aqui, vou escrever escondido. E então, dentro desse DF, criarei um H quatro, e esse H quatro conterá renda Significa que H quatro escreverá a renda e abaixo desses quatro anos escreveremos o valor dessa renda. Então, para escrever o valor dessa renda, acene para escrever P e , dentro do P, teremos uma classe dentro do P. A classe será mais, e então o saldo será, por padrão, 0,0 $0, dólar zero ponto duplo zero Então, como você pode ver, criamos uma lista de renda , agora vamos criar uma redução de despesas Para criar uma despesa, podemos simplesmente copiá-la e colá-la abaixo. Controle C e Controle V. E aqui eu removerei esse INC e adicionarei EXP e depois IRE ao ERE, e então oculto será o mesmo Agora vou transformar sua renda em despesa. E essa aula será negativa. E vamos colocar menos na frente disso. E aqui vamos colocar uma vantagem na frente disso. Então, agora criamos um rastreador de despesas principais e um contêiner dentro desse contêiner, criamos um saldo e, em seguida, receitas e despesas Vamos dar uma olhada na tabela. Deixe-me salvá-lo e clicar com o botão direito do mouse e abrir com o servidor Life. Então, agora aqui você pode ver que criamos o rastreador de despesas, seu saldo está lá, então nosso saldo está lá, que é 0,0 $0, e então a receita e a despesa Então, agora vamos criar duas entradas. Em uma entrada, adicionamos nome da transação e, em outra, adicionamos o valor. Então, deixe-me criar uma entrada para criar nossa entrada antes de criar uma entrada, temos que criar dois botões para isso porque em nosso aplicativo, criamos um botão para entrada e um botão para despesas. Deixe-me criar dois botões antes de criar essas entradas. Vou ficar abaixo dessa diferença e aqui vou criar um botão. Para criar um botão, escreverei botão e, dentro desse corredor de botões, escreverei, darei alguma classe a esse botão A aula será uma despesa. Vou copiar essa despesa. Vou colar aqui e depois criar mais um botão. Então, copiarei esse botão e colarei esse botão abaixo. E aqui vou digitar renda. E eu removerei essa despesa e depois escreverei a renda. Agora podemos verificar se temos dois botões com receita e despesa. Então, se clicarmos em despesa, obteremos a despesa e, se clicarmos em receita , obteremos a receita. Vamos criar entradas aqui, mas antes de criar entradas, vou digitar o título O título será adicionar nova transação, então são três e , dentro de três, escreverei adicionar nova transação Então, criarei uma tecnologia Fm e, dentro dessa tecnologia Fm, adicionarei ID. O nome do ID será formulário. Então, clique em Enter e obteremos um formulário com o formulário da ideia. Então deixe-me remover esse axônio. Abaixo desse formulário, criaremos um DV e, dentro desse D, criaremos um rótulo e, dentro do rótulo, criaremos Então, agora vamos criar um DV dentro do DV, vamos criar um rótulo Então, nesse rótulo, escreveremos que esse rótulo é para texto. Então, deixe-me escrever um texto. E então aqui vou escrever o nome. E então eu vou criar uma entrada. O tipo da entrada será texto e o nome da entrada e, em seguida, o nome da entrada não será nada. Não há uso de nenhum nome e, de vez em quando, a ideia do nome será texto. E então adicionaremos uma classe nessa entrada. A classe será o nome de entrada. Então, deixe-me escrever a entrada. Há um nome e, em seguida, espaço reservado estará lá, então espaço reservado E dentro desse espaço reservado, escrevemos o nome da transação Então, criamos uma entrada para o nome da transação. Agora, criaremos uma entrada para o valor. Então, copiarei esse D e colarei esse dV aqui e depois mudaremos o nome Mudaremos o nome de nome para valor. E então o tipo do valor será o número. Número da luz. E então o ID será o valor. Na aula, inseriremos o valor. E então o espaço reservado será o valor. Então, criamos entradas. Agora vamos criar nossa história. Para criar nossa história, viremos abaixo deste formulário e, em seguida, aqui vou escrever a história. Então, para escrever a história, selecionarei H três e, dentro desse H três, escreverei a história. E então a história será Allis, para criar Allis, temos que criar a UL Dentro dessa UL, haverá IA. Mas o ID do UL será listado. Deixe-me escrever o ID e , em seguida, o ID será listado. E então, dentro dessa UL, criaremos uma IA de IA e, dentro dessa IA, escreverei algumas despesas, como pés. E então eu vou criar um giro dentro desse giro, vou copiar essa coisa. Então, copiaremos esse ícone de fonte. Para copiar essa fonte, basta clicar nessa fonte e depois colá-la aqui. Então, também copiamos essa fonte X Mark. Então, deixe-me fazer isso no navegador. Assim, você pode ver que criamos um rastreador de despesas com seu saldo de despesas de renda, e há dois botões com despesas e receitas e, em seguida, criamos adicionar uma nova transação com duas entradas, entrada de nome e valor de entrada, e então criamos um histórico com o Ally of food, e há um ícone de fonte Então, escrevemos o código T para nosso projeto. Agora, escreveremos o código CSS para esse projeto no próximo vídeo. 3. Como criar nosso aplicativo: Neste vídeo, vamos escrever o código CSS do nosso aplicativo para que possamos estilizá-lo. Então, quero dizer mais uma coisa: esquecemos de colocar esse símbolo de adição em nosso aplicativo em nosso último vídeo Então, deixe-me mostrar como colocar isso. Então, aqui, acima dessa tecnologia de formulário de fechamento, você pode ver que eu criei um botão com a classe BTNS Então eu inseri esse Itech e, dentro desse ITe, a classe é muito sólida e distante, mais um círculo distante e, em seguida, o Excel demais. Excelência significa a maior fonte. Então, agora vou economizar e mostrar como está. Então você pode ver que adicionamos esse ícone de adição. Então você também pode adicionar esse ícone de adição. Agora vamos adicionar CSS ao nosso aplicativo. Então, para adicionar nosso CSS, a primeira coisa que faremos aqui é selecionar o seletor Universal E então, dentro desse seletor universal, digitaremos o tamanho da caixa Bader Box, então o tamanho da caixa Bader Box E agora chegaremos abaixo disso e selecionaremos nosso corpo inteiro. Então, deixe-me selecionar o corpo. E então, dentro desse corpo, aplicaremos o display flex para que possamos colocar nosso contêiner no centro Então, para trazer nosso contêiner para o centro, estamos usando o Flexbox Então, primeiro de tudo, vou escrever display flex. E então eu escreverei a direção flexível e a direção flexível será Então, flexione a coluna de direção. E então vou escrever Aleem center, linem center e depois justificar Justifique o centro de conteúdo. Eu escrevi o Bseline aqui, então deixe-me remover o Bsline que escrevemos aqui, justifique Agora vamos adicionar uma altura média nessa altura média, 100 VH, então 100 VH E então vamos adicionar, em seguida, vamos adicionar uma cor de fundo. Portanto, a cor de fundo não é necessária porque nossa cor de fundo é branca. Agora vamos adicionar uma família de fontes em todo o corpo. Para adicionar a família de fontes, simplesmente escreverei a família de fontes. E então nossa família de fontes me deixará verificar. Nós selecionamos isso. Então, nossa família de fontes será essa robotomano. Deixe-me copiar essa família de fontes e eu a colarei aqui. Control V. Control V. Let me remove esta família de fontes. Por isso, testamos nossa família de fontes mono Roboto aqui. Então, agora nosso corpo está pronto, deixe-me economizar e mostrar como está. Então, vamos até esse navegador e abra isso. Então, sim, você pode ver que nosso contêiner está no centro e tudo está no centro. Significa que alinhamos tudo no centro. Agora, o que faremos, agora adicionaremos estilo ao contêiner Então, dentro do continuador, adicionaremos cores de fundo e muitas coisas Então, deixe-me selecionar esse contêiner. Dentro desse contêiner, escreveremos margem automática, não margem automática, daremos alguma margem. A margem será de 30 pixels e depois automática. E então eu escreverei a largura. Portanto, a largura deste aplicativo será de 550 pixels. É como um aplicativo estreito, então é por isso que estou escrevendo 550 pixels. E então escreveremos nossa cor de fundo. Portanto, nossa cor de fundo estava em um radiante linear. Portanto, se você quiser adicionar radiante linear em seu projeto, se quiser adicionar radiante linear, precisará selecionar a imagem de fundo, não a cor do plano de fundo Então, deixe-me selecionar a imagem de fundo da imagem de fundo. E dentro dessa imagem de fundo, escreveremos radiante linear e nosso radiante linear será vírgula de -90 graus, nosso nome de cor será A um Esta é nossa primeira colônia. Agora vamos adicionar mais uma cor. Deixe-me adicionar um C, c2e e depois nove Então, adicionamos outra cor também com 90 graus. Então, deixe-me salvá-lo e eu vou te mostrar no navegador. Você pode ver que adicionamos nossa cor a esse aplicativo de rastreamento de despesas e agora adicionaremos um raio de borda aqui e adicionaremos a caixa Então, para adicionar o raio da borda e a caixa Edo, o que faremos? Em primeiro lugar, vou adicionar box do aqui. Então, para adicionar a caixa Edo, eu criei uma caixa do aqui Você pode ver que eu criei uma caixa Edo com a ajuda de você pode ver isso abaixo Eu criei esta caixa com a ajuda da Figma. E o que eu posso fazer? Eu posso simplesmente ativar esse modo de desenvolvedor. E dentro desse modo de desenvolvedor, eu posso entrar nessa inspeção e dentro dessa inspeção Então, selecionarei essa caixa e entrarei no modo de desenvolvedor. Então, assim que eu ativo esse modo de desenvolvedor, posso ver todo o código e obter todo o código CSS. Então aqui eu posso pegar essa caixa Edo. Então, deixe-me copiar esta caixa para fazer. Ou eu já copiei. Então, o que vou fazer é inserir esse JavaScript porque adicionei nossa caixa do aqui. Então, vou copiar isso. Vou remover isso daqui. E então eu vou colar essa caixa Edo aqui, Control V, e então adicionamos nossa caixa do ao nosso site Deixe-me ver e ver como está. Então você pode ver que adicionamos uma caixa ao redor dessa caixa ao redor desse contêiner. Agora adicionaremos esse raio de borda e, em seguida, adicionaremos um pouco de preenchimento Deixe-me primeiro adicionar o raio da borda. Para adicionar o raio da borda, vou ficar abaixo disso e aqui vou digitar o raio da borda raio da borda em nosso raio de borda será de dois ram Em seguida, adicionaremos um pouco de preenchimento à esquerda, pois deixe-me salvar e mostrarei porque todo o nosso texto está indo para Portanto, se adicionarmos preenchimento à esquerda , nosso conteúdo ficará um pouco para o lado direito Então você pode ver aqui que nosso conteúdo está no lado esquerdo. Portanto, se você adicionar preenchimento à esquerda, tudo ficará bem. Então, deixe-me adicionar esse preenchimento à esquerda, preenchimento PAW DIN G E o acolchoamento esquerdo será de cinco carneiros. Deixe-me salvá-lo. Então, aqui você pode ver que nosso conteúdo está um pouco do lado certo. Antes estava completamente à esquerda agora está no lado direito. Agora vamos estilizar esses botões. Então, para estilizar esses botões, selecionarei o botão. Diretamente, selecionarei esse botão. E dentro desse botão, vou digitar preenchimento. Se eu adicionar preenchimento dentro desse botão, nosso botão ficará um pouco maior Então, deixe-me adicionar 0,6 n neste preenchimento. Deixe-me salvá-lo e eu vou te mostrar. Você pode ver nosso botão ficar um pouco maior. Agora vamos adicionar a cor de fundo, a cor fundo e a cor do plano de fundo será branca. E então adicionaremos uma borda porque há alguma borda em nosso botão, então é por isso que temos que remover a borda. Para remover a borda do botão, escreveremos borda nenhuma. Em seguida, adicionaremos um raio de borda ao nosso botão, então o raio da borda e, em seguida, o raio da borda serão cinco ram Deixe-me salvá-lo, eu vou ver. Você pode ver que nosso botão ficou branco e algum raio de borda foi adicionado ao nosso botão Agora vamos adicionar estilo às nossas entradas. Então, para adicionar estilo às nossas entradas, selecionarei diretamente a entrada E dentro dessa entrada, adicionarei preenchimento para aumentar a entrada Preenchimento PA DANG e o preenchimento será de 0,4 ram. E então vou adicionar uma borda. Deixe-me me barbear e eu vou te mostrar o que eu sou. Então você pode ver que a borda está lá em nossa entrada E se você clicar aqui, obteremos mais uma borda. Portanto, temos que remover essa borda de clique também e, em seguida, essa borda também. Então, deixe-me remover a borda. Em primeiro lugar, fronteira, a fronteira não será nenhuma. Um contorno significa borda do contorno. Portanto, para remover a borda do contorno, basta selecionar o contorno e nenhum Então, se eu salvar isso e mostrar a você, você pode ver que não há fronteira aqui. Mas você pode ver que esses dois estão mesclados. Então, se quisermos alguma margem aqui, adicionaremos alguma margem. Temos que adicionar um BR lá porque adicionaremos esse nome acima dessa entrada e esse valor acima desse valor. Então, para adicionar esse BR, iremos para nossa tabela e adicionaremos BR aqui. Então, abaixo desse rótulo, eu vou colocar B BR, e aqui, eu vou colocar um BR. Então, eu vou salvar isso e vou te mostrar no navegador. Então, aqui você pode ver que nossa entrada está correta. Agora vamos adicionar estilo a esse ícone de adição. Então, para adicionar estilo a esse ícone de adição, selecionamos esses BTs Então, escrevemos uma classe de ts neste ícone. Então, deixe-me selecionar esse Bt, BTNS e não BTs. E então eu vou estilizar esse controle ts dot. E eu simplesmente removerei o plano de fundo desse botão. Então, antecedentes, nenhum. Vou salvar isso e vou te mostrar no navegador. Você pode ver que todo o plano de fundo foi removido daqui. Agora, seleciono esse ícone separadamente para poder adicionar um pouco de preenchimento a esse ícone ou alguma margem a esse ícone Para selecionar esse ícone, escreverei far des circle, des plus e adicionarei uma margem superior, a margem superior e a margem superior serão 25 pixels, então o tamanho do telefone será de dez pixels, tamanho do telefone de dez pixels. Deixe-me salvar, deixe-me mostrar nelas. Agora você pode ver que temos uma margem adequada neste ícone. Então você pode ver aqui que estamos prestes a terminar nosso projeto. A única coisa que resta é que temos que adicionar essa história. Significa que temos que estilizar essa história. Então, o que vou fazer, remover esse ponto daqui significa que removerei esse marcador daqui e removerei o acolchoamento que essa comida Então, deixe-me selecionar esse UL. E dentro disso, primeiro de tudo, removerei os marcadores Então, para remover os marcadores, escreveremos les dottyLett não dot, é do tipo D, e isso E então adicionaremos nosso preenchimento a zero. Controladores geográficos acolchoados. Agora eu vou te mostrar. Agora você pode ver que nossa história também está devidamente estilizada. 4. Funcionalidade de botão: Portanto, este é o nosso aplicativo atual e, neste aplicativo, adicionaremos essa funcionalidade de despesas e receitas. Então, para adicionar essa funcionalidade, precisamos usar JavaScript. Então, vou entrar neste aplicativo de arquivo dot Java Script. E aqui, selecionarei essa renda e despesa. Primeiro de tudo, selecionarei isso e selecionarei isso, depois selecionarei esse botão e, em seguida, selecionarei esse botão. Então, para selecionar isso, vou usar o seletor de consultas. Deixe-me criar uma variável chamada ink remove Vou escrever tinta, remover. Eu ganhei a escrita E, em seguida, darei iguais a N e depois selecionarei com a ajuda do seletor de consultas Portanto, documente o seletor de consulta de pontos. E então eu vou selecionar isso em remover. Deixe-me ir para este HTML, e eu copiarei isso e colarei aqui, controle com ponto, Controle V. Agora vou copiar isso e colar isso abaixo, Controle V. E em vez de tinta, vou escrever EXP ou EX, vou escrever de forma simples E então vou adicionar essa classe aqui, essa remoção de EXP. Deixe-me copiar isso e depois colar aqui. Controle V. Então, selecionamos nossas receitas e despesas. Agora vamos selecionar o botão Renda e o botão Despesa. Então, novamente, podemos copiar isso e colar aqui, Control V e ControlV Então, vou escrever o botão de tinta. Botão IMC, BTN e, em seguida, EX BTN. E aqui vou selecionar a renda e, em seguida, aqui vou selecionar a despesa. A despesa E é capital, você pode conferir aqui. Escrevi esse E maiúsculo, então deixe-me escrever em minúsculas e depois guardarei isso e escreverei esse E em letras pequenas e com despesas EX PE e SE Vou salvar e adicionar JavaScript aos seletores. Então, primeiro de tudo, vou criar um ouvinte de eventos para este botão Inc e o botão X Expense Significa que sempre que um usuário clicar aqui, esse ouvinte de eventos será executado E então a função dentro do ouvinte par, que quer que adicionemos dentro dessa função, essa função será executada sempre que um usuário clicar nesse botão inc ou no botão X significa botão de renda ou botão de despesa Então, deixe-me adicionar esse ouvinte uniforme nesta tinta incuton BTN, e vou deixar que adicione até mesmo ouvinte, e o ouvinte par clicará, então CLI c clique e vou deixar que adicione até mesmo ouvinte, e o ouvinte par clicará, então CLI c clique. E então vou adicionar uma função. O nome da função será iCS e, em seguida, criarei mais um ouvinte uniforme, onde adicionarei esse ouvinte uniforme no botão Despesas Então, removerei esse INC e adicionarei X. E, em vez dessas tintas, adicionarei outros nomes como XP, agora criarei uma função Is e depois criarei uma função EXP Então, para criar uma função Is, escreverei um nome de variável const e, em seguida, escreverei Is NCs e darei igual a. Neste parâmetro de funções, passaremos E E significa parâmetro de evento. E agora aqui estou usando a função de seta. Você pode usar a função normal, mas eu estou usando a função de seta porque estou mais acostumado E eu darei esse símbolo de seta e depois darei esses discos encaracolados Dentro dos colchetes encaracolados, o que faremos. Sempre que o usuário clicar nesse botão, adicionaremos uma classe oculta ou removeremos uma classe oculta da renda e adicionaremos a classe oculta em despesa Então, o que estou fazendo, deixe-me mostrar a você. Selecionarei essa tinta e selecionarei remover tinta. Neste REOV, selecionarei isso e, em seguida, removerei a classe oculta dessa função Sempre que o usuário clica, isso significa que sempre que o usuário clica no botão de renda , eu quero remover a classe conhecida como oculta, porque nessa classe oculta, adicionaremos uma freira de exibição Então, deixe-me primeiro adicionar uma classe oculta, então é um D e oculta. E dentro desse oculto, escreveremos display nun. Portanto, não exiba nenhum. Então, agora o que essa tela não fará é, sempre que um usuário clicar nesse botão de renda , removeremos a classe oculta desse botão de renda. Isso significa que sempre que removermos essa classe oculta desse botão de renda, nossa freira de exibição será removida e, em seguida, adicionaremos essa classe oculta esse botão de despesas. Então, deixe-me te mostrar. Eu seleciono essa remoção de renda e, em seguida, lista de classes de pontos, e então queremos remover ocultos dessa renda, então adicionaremos remoção de pontos. Se você quiser adicionar, adicionaremos ponto t e, se você quiser remover, adicionaremos ponto remover. Em seguida, adicionarei o nome da classe que está oculta HID oculta E é OI. Então eu copiarei isso e colarei aqui. E em vez de tinta, escreverei x. E depois adicionarei essa classe a isso, e depois adicionarei a classe aqui, adicionarei A. Agora vou copiar isso e vou fazer o oposto com esse botão de despesas. Em primeiro lugar, mostrarei os controles do botão Renda e mostrarei no navegador. Agora, aqui, se você clicar em Despesa, nada acontecerá porque não adicionamos nenhuma despesa de triagem de Java. Mas se você clicar em Renda, poderá ver que a receita está chegando e sempre que clicarmos em Despesa, nada está acontecendo. Então, deixe-me adicionar o oposto disso. Temos que adicionar o oposto disso às despesas. Vou copiar isso e colar abaixo do Control V. E em vez de tintas, vou colocar EXP, então EXP Dentro disso, adicionarei Ex aqui e adicionarei ENC aqui Então, agora o que isso está fazendo é remover o elemento de despesa, ou isso está removendo a redução de despesas Deixe-me te mostrar aquela divisão. Dentro dessa despesa, essa divisão está lá, certo Este D com uma tag de parágrafo. Então, sempre que clicamos nisso, isso está removendo isso, então deixe-me mostrar corretamente. Portanto, sempre que clicamos nessa despesa, estamos removendo a oculta. Isso significa que estamos removendo o display none daqui. Isso significa que essa despesa será mostrada em nosso navegador e estamos adicionando itens ocultos à nossa receita. Portanto, a renda ficará oculta quando clicarmos em Despesa e quando clicarmos e quando clicarmos na receita, a despesa ficará oculta. Então eu acho que você entendeu. Então, deixe-me salvar isso e mostrar no navegador. Agora, se você clicar em Despesa, nossa receita ficará oculta e, quando clicarmos em Receita, nossa despesa ficará oculta. Então essa é a lógica básica por trás disso. E isso é neste vídeo, nos encontraremos em outro vídeo e em outro vídeo, adicionaremos esse saldo ou adicionaremos essas transações.