30 dias de projetos em JavaScript | Day1: crie um aplicativo de lista de tarefas com HTML, CSS e JavaScript

1. Introdução: Olá, pessoal, e bem-vindos a esta nova lição do nosso curso. Nesta lição, vamos criar uma lista simples de fazer usando HTML, CSS e JavaScript. Você pode ver aqui que temos um campo de entrada que diz adicionar sua tarefa, um botão para adicionar a tarefa. Então, se eu for aqui e disser, leia um livro e clique no botão. Você pode ver que a tarefa foi adicionada aqui com essa borda inferior e esse ícone de lixeira à direita E se adicionarmos outra tarefa, digamos, ir à academia, você pode ver que ela foi adicionada aqui abaixo da primeira tarefa. Tudo bem, digamos que terminamos a primeira tarefa aqui lendo um livro Podemos ir aqui e clicar nele e, como você pode ver, ele tem essa linha de traçado indicando que a tarefa foi concluída. E se quisermos excluir completamente a tarefa, podemos clicar no ícone da lixeira aqui E você pode ver que desapareceu completamente. Este curso é ideal para estudantes que aprenderam os fundamentos do Javascript e desejam aplicar seus conhecimentos de forma prática Ao criar um aplicativo de lista de tarefas simples, mas envolvente, os alunos ganharão experiência prática, aprofundarão sua compreensão dos principais conceitos de Javascript e aumentarão sua confiança no desenvolvimento de projetos do mundo real Para aproveitar ao máximo este curso, os alunos são incentivados a criar o projeto por conta própria e enviar o trabalho concluído como um arquivo zip para a galeria do projeto. 2. Para fazer o design de lista da interface do usuário: Ok, vamos começar a criar esse aplicativo. Vou começar aqui no meu HTML e, em uma div, atribuir a ele uma classe de contêiner Então, dentro dele, adicionarei outro div com uma classe de nova tarefa Portanto, esse novo div de tarefas conterá a entrada de texto na qual escreveremos nossa tarefa e o botão responsável por adicioná-la Tudo bem, vamos ao nosso CSS e começar visando o corpo Em seguida, adicione altura, 100 VH e, em seguida, fundo, gradiente linear para a direita Portanto, sua direção será da esquerda para a direita. Em seguida, adicionarei essas três cores bonitas. E como você pode ver, o corpo agora tem esse gradiente frio como plano de fundo Ok, agora vou focar no div do contêiner. E adicione largura, 40% do corpo, depois largura mínima, 450 pixels. Portanto, em telas menores, a largura não diminuirá abaixo de 450 pixels, mas em telas maiores , ocupará 40% da largura do corpo. Então, para vê-lo, adicionarei uma borda, dois pixels, sólida, branca. Também adicionarei preenchimento, 30 pixels da parte superior e inferior e 40 pixels da esquerda e da direita E você pode ver aqui que temos nosso div de contêiner no canto superior esquerdo Mas queremos centralizá-lo horizontal e verticalmente em nossa página da Assim, podemos ir até aqui dentro de seu contêiner, o corpo, e adicionar display flex, justificar o conteúdo, centralizar para centralizá-lo verticalmente e alinhar os itens de centro a centralizá-lo horizontalmente, o corpo, e adicionar display flex, justificar o conteúdo, centralizar para centralizá-lo verticalmente e alinhar os itens de centro a centralizá-lo horizontalmente, exatamente como você vê aqui. Tudo bem. Agora, vamos direcionar o div com a classe New task, que conterá a entrada de texto e o botão e adicionará a cor de fundo Preenchimento branco de 30 pixels da parte superior e inferior e 20 pixels da esquerda e da direita Em seguida, raio da borda, cinco pixels para ter algumas curvas no canto, depois sombra da caixa, zero como deslocamento horizontal, 15 pixels como deslocamento vertical e 30 pixels como Então essa cor preta semitransparente. Como você pode ver aqui, a nova divisão de tarefas está muito melhor Vamos voltar ao nosso HTML para adicionar os elementos dentro dessa div Vou adicionar uma entrada com um tipo de texto e, em seguida, um espaço reservado para adicionar sua tarefa Portanto, esse será o texto do espaço reservado dentro da entrada, como você pode ver aqui Então, abaixo disso, adicionarei um botão com uma classe de BTN. Então eu vou dizer Add. Você pode ver que temos um botão ao lado da entrada. Em seguida, vou para o meu CSS e direciono a entrada dentro do novo DIV da tarefa Em seguida, adicionarei a largura, 70% da largura da nova divisão da tarefa e, em seguida, a altura, 45 pixels Em seguida, para aumentar um pouco o tamanho da fonte do texto, adicionaremos o tamanho da fonte 15 pixels e, seguida, a borda, dois pixels , sólida, essa cor cinza claro. Também vou adicionar preenchimento, 12 pixels e colorir essa cor Em seguida, a espessura da fonte, 500 e, finalmente, raio da borda de cinco pixels E agora você pode ver que a entrada parece muito melhor. E ao escrever dentro dele, você pode ver que o texto parece muito bom. Mas queremos mudar essa cor preta feia quando focamos na entrada Vamos voltar aqui e direcionar a entrada novamente. E ao focar nisso, adicionaremos a cor da borda, essa bela cor do gradiente do corpo Também adicionarei um esboço. Nenhuma. E agora, quando eu vou me concentrar na entrada, você pode ver que temos essa bela borda. Vamos estilizar esse botão aqui. Eu vou voltar e mirar nele. Em seguida, adicione inteligência, 20%, altura, 45 pixels. Raio da borda, cinco pixels. Peso da fonte, 500. Tamanho da fonte, 16 pixels. Cor de fundo, nossa cor favorita, depois borda. Nenhum, ponteiro de cursor colorido branco. E, finalmente, esboço, nenhum. Agora, como você pode ver, o botão parece muito melhor. Agora, queremos apertar o botão até o final da nova div de tarefas para que tenhamos algum espaçamento no centro Podemos fazer isso usando o Flexbox. Então, vou aqui na nova div de tarefas e adicionarei display flex e, em seguida, justificarei o espaço entre o conteúdo para que o espaço fique entre a entrada e o botão, como você Ok, agora vamos criar a parte em que exibiremos as tarefas adicionadas. Vou voltar ao meu HTML, ir abaixo da nova div de tarefas e adicionar uma nova div com uma classe de Em seguida, voltarei ao meu CSS para estilizar essa div. Eu vou mirar nele. Em seguida, adicione largura, 100% da largura do contêiner. Em seguida, cor de fundo, branco, preenchimento, 30 pixels da superior e inferior e 20 pixels da esquerda e da direita Em seguida, coloque a margem superior a 50 pixels. E agora você pode ver que temos esse fundo branco na parte inferior, no qual podemos inserir nossas tarefas. Vamos adicionar um pouco do raio da borda. dez pixels, depois sombra da caixa zero, 15 pixels, 30 pixels e essa cor semitransparente E agora terminamos de estilizar nosso aplicativo de lista de tarefas e, na próxima lição, continuaremos trabalhando com JavaScript. Então, nos vemos lá. 3. Como adicionar tarefas usando JavaScript: Bem-vindos de volta, pessoal. Nesta lição, continuaremos trabalhando em nossa lista de tarefas. Na última lição, concluímos o HTML e o CSS da nossa lista de tarefas e, nesta lição, continuaremos a construí-la usando JavaScript. Então, vamos ao nosso arquivo JavaScript e começar. Primeiro de tudo, vamos segmentar alguns elementos HTML e armazená-los dentro de variáveis JavaScript. Vou criar uma nova variável, chame-a de botão Adicionar tarefa. Então, queremos selecionar esse botão aqui. Então, adicionarei o seletor de consulta de pontos do documento e adicionarei o botão de classe aqui Em seguida, vou duplicar isso e alterar o nome da variável para entrada de tarefas Portanto, essa variável conterá a entrada de texto aqui. Então, vou mudar o botão aqui para o div com a classe da nova tarefa e, em seguida, adicionar uma entrada para direcionar a entrada dentro dela Também queremos ter como alvo o espaço reservado div que conterá nossas tarefas adicionadas, esta aqui Então, vou duplicar isso mais uma vez, alterar o nome da variável para contêiner de tarefas E direcione o div com a classe de tarefas. Agora, vamos implementar a lógica desse aplicativo. O que queremos fazer é que a tarefa que adicionamos aqui seja exibida neste div na parte inferior Mas se não escrevermos nada e clicarmos no botão, queremos que alguma ação nos impeça de fazer isso e uma mensagem de exibição para que o usuário nos diga que você deve inserir uma tarefa. Então, vamos configurar isso rapidamente como nossa primeira etapa. Eu vou aqui e digo add taskbtondot AD Event Em seguida, ouvirei o evento de clique e adicionarei uma função de retorno Então, o que acabamos de fazer, pessoal, adicionar o botão Adicionar tarefa e queremos responder ao clicar nesse botão. Então, adicionamos add event listener para permitir que fizéssemos exatamente isso Em seguida, ouvimos o evento de clique aqui, ou seja, sempre que clicamos no botão, queríamos fazer alguma coisa e podemos dizer ao navegador o que fazer aqui nesta função de retorno de chamada Então, vou entrar aqui dentro desta função e dizer: eu tarefas: valor do ponto de entrada. O comprimento do ponto é igual Vou adicionar um alerta e dentro dele, direi: Por favor, insira uma tarefa. Então, aqui acabamos de verificar usando a condição I. Dissemos ao navegador se o valor que atribuímos à entrada das tarefas aqui tem um comprimento zero ou, em outras palavras, um número de caracteres igual a zero, e isso significa que nada está escrito ainda. Queremos mostrar esse alerta ao usuário e pedir que ele insira uma tarefa. Tudo bem, vamos voltar e tentar isso. Você pode ver quando eu clico no botão sem inserir nenhum texto, esse alerta aparece para mim e diz: Por favor, insira uma tarefa Agora eu posso clicar em OK e, em seguida, começar a inserir a tarefa e adicioná-la usando esse botão. Mas vamos continuar nosso trabalho em Javascript. Vou aqui e, no caso de o usuário inserir uma tarefa, podemos traduzi-la no código adicionando outra. Então, basicamente, queremos pegar qualquer valor que o usuário adicionou aqui dentro da entrada e exibi-lo neste espaço reservado div na parte inferior E, claro, tudo isso deve acontecer quando clicamos no botão do anúncio. É por isso que todo o nosso código está dentro dessa função de retorno Então, vou adicionar um contêiner de tarefas. E como queremos inserir as tarefas dentro desse contêiner envoltas em alguns elementos HTML para estilizá-las, adicionarei um HTML interno com pontos e o definirei como igual a, depois adicionarei literais de modelo e, dentro dele, adicionarei um HTML normal Como você vê aqui, acabei adicionar um div com uma classe de tarefa e, dentro dele, adicionei um intervalo que deve conter a tarefa Então, queremos pegar o valor de entrada que adicionamos e inseri-lo dentro do intervalo aqui. Podemos fazer isso facilmente acessando aqui e dizendo tasks input dot VLU Tudo bem. Vamos tentar isso. Vou aqui e adicionarei uma tarefa. Digamos que leia um livro. Em seguida, clique em Adicionar e agora você pode ver que a tarefa foi adicionada aqui. Mas quando eu adicionar outra tarefa, enfrentaremos um novo problema. Vamos tentar isso e adicionar um novo. Então, ao clicar no botão Adicionar, você pode ver que a nova tarefa foi adicionada, mas a antiga foi removida. Mas queremos manter o primeiro e exibir o segundo abaixo dele Então, vamos entender por que isso está acontecendo em primeiro lugar. Quando olhamos aqui, você pode ver que definimos o conteúdo HTML do contêiner de tarefas para ser igual a esse conteúdo aqui. E isso deve acontecer ao clicar no botão. Então, cada vez que clicarmos no botão, esse código aqui será executado e o conteúdo HTML será atualizado basicamente do zero e conterá o valor da entrada É por isso que isso muda a cada nova tarefa que adicionamos. Mas podemos corrigir isso com um truque simples, que é adicionar um sinal de mais aqui na frente do sinal de igual. Então, será mais igual a esse valor. E isso basicamente diz ao navegador que adicione o novo conteúdo enquanto mantém o conteúdo antigo em seu lugar. E agora, quando eu volto e tento adicionar algumas tarefas, você pode ver que as novas tarefas são adicionadas abaixo das antigas, mas agora é hora de adicionar alguns estilos à div da tarefa e ao lado do span Vou para o meu CSS e direciono o div da tarefa e, em seguida, adiciono altura, 50 pixels, preenchimento, cinco pixels da parte superior e inferior e dez pixels da esquerda e da direita Em seguida, marque os dez pixels superiores para que tenhamos algum espaçamento entre as tarefas Também queremos adicionar uma borda na parte inferior para separar as tarefas. Então, vou adicionar borda inferior, dois pixels, sólida nessa cor cinza claro. Então, finalmente, adicionarei o ponteiro do cursor. E agora, quando tento adicionar tarefas, você pode ver que as tarefas são exibidas aqui de uma maneira muito melhor. Tudo bem, agora vamos estilizar a extensão dentro da tarefa Div. Eu vou mirar. E adicione tamanho da fonte, 15 pixels, espessura da fonte, 400. E, desse jeito, as tarefas estão exatamente do jeito que queremos. Vamos continuar. Queremos adicionar um ícone de lixeira em cada tarefa para que possamos removê-la sempre que quisermos Então, vou voltar ao nosso arquivo JavaScript, entrar aqui dentro do tastiv e abaixo do intervalo e adicionar um botão Com uma classe de delete Em seguida, dentro desse botão, adicionaremos o ícone da lixeira e adicionaremos esse ícone usando o site Font Awesome E para incluir ícones do Font Awesome em nosso projeto, procuraremos o CDN do Font Awesome Em seguida, copiaremos esse primeiro código aqui. Volte para o nosso HTML e cole-o aqui acima da folha de estilo. Em seguida, vou pesquisar por Font Awesome. Vá para os ícones. Em seguida, pesquise por Lixeira. Clique neste ícone aqui e copie o código. Vá até meu editor de código e cole aqui dentro do botão com a classe delete. Agora, quando eu adiciono uma tarefa, você pode ver que temos esse ícone de lixeira aqui, mas vamos adicionar alguns estilos a ele Vou voltar ao meu CSS e selecionar o botão que contém o ícone. Em seguida, adicionarei altura, 100% da largura div da tarefa 40 pixels, cor de fundo, nossa cor vermelha, cor, raio da borda branca, cinco pixels, borda nenhuma Esboço, nenhum e, finalmente, ponteiro do cursor. E agora você pode ver que parece muito melhor. Finalmente, queremos movê-lo para o final da divisão de tarefas aqui, e podemos fazer isso usando o Flexbox indo aqui dentro div de tarefas e adicionando display flex, alinhe itens, centralize para alinhá-los verticalmente dentro da div de tarefas e, centralize para alinhá-los verticalmente dentro em seguida, justifique o conteúdo e o espaço entre eles para que ele seja empurrado até o final da div de tarefas, como até o final da Ok, pessoal, isso é tudo para esta lição. Vamos recapitular rapidamente o que fizemos. Aqui em nosso JavaScript, dissemos ao navegador que, quando clicamos no botão do anúncio, queremos executar algum código, e o código a ser executado será adicionado dentro dessa função de retorno de chamada Em seguida, dentro da função de retorno de chamada, verificamos se o campo de entrada está vazio E como resposta a isso, adicionamos esse alerta que diz ao usuário para adicionar uma tarefa. Então, abaixo disso, basta pegar o valor da entrada adicionada pelo usuário, adicioná-lo dentro de um intervalo e um div e, em seguida, inseri-lo dentro do div de tarefas na Também adicionamos um ícone de lixeira ao lado dele usando o site Font Awesome para que possamos remover a tarefa assim que ela for concluída Ok, na próxima lição, aprenderemos como podemos remover ou marcar as tarefas como concluídas. Usaremos algumas funções interessantes de JavaScript para fazer isso, então nos vemos lá. 4. Finalizando e excluindo tarefas usando JavaScript: Oi, todo mundo. Bem-vindo de volta à parte final da criação desse aplicativo de lista de tarefas usando HTML, CSS e JavaScript. Depois de exibir nossas tarefas aqui, queremos ter a opção excluí-las assim que as concluirmos, e faremos isso usando esse ícone de lixeira que adicionamos aqui Então, vamos fazer isso em nosso JavaScript. Em primeiro lugar, quero direcionar os botões aqui à direita, então vou criar uma nova variável, chame-a de botões de remoção. Então eu vou dizer documento. E como eles podem ser mais de um botão no caso de adicionar várias tarefas, assim como aqui, direi o seletor de consulta por pontos e direcioná-los por sua classe, exclua o que adicionamos acima aqui em nosso HTML inserido Então, ao fazer isso, essa variável aqui conterá todos os botões das tarefas em uma lista de nós. E para ouvir o evento de clique de cada botão, precisaremos percorrer os botões primeiro depois ouvir o evento de clique de cada um. Então, vamos fazer isso. Eu direi para remover botões, e nós os percorreremos usando cada método. Então, vou dizer ponto para cada um. Em seguida, adicionarei uma função de retorno de chamada dentro do loop. Portanto, essa função será executada em todos os botões dentro da lista de nós de remoção de botões. Em seguida, precisamos passar aqui um parâmetro que represente cada botão. Então, vou adicionar o botão. Então, dentro da função que será executada em cada botão, queremos ouvir o evento de clique de cada botão para que possamos excluir sua tarefa. Então, vou adicionar o botão, que acabamos de passar como parâmetro aqui. Não adicione o Event Listener. Em seguida, queremos ouvir o evento de cliques. Em seguida, adicionarei uma função de retorno de chamada que será executada sempre que o botão for clicado Então, dentro dessa função, queremos remover a tarefa em relação ao botão em que clicamos Se subirmos até aqui, você verá que cada tarefa é representada por essa div aqui que tem a classe da tarefa e contém as tarefas adicionadas e o botão de exclusão Portanto, precisaremos remover todo esse div ao clicar nesse botão E se você notar, o div que queremos remover é o pai do botão de exclusão Então, vou até aqui e digo botão, ponto, nó pai. Remova o ponto. Então, como você pode ver, eu tenho alvo o nó pai do botão, que é o div com a classe de tarefa usando esse nó pai aqui Em seguida, eu o removi, e tudo isso deve acontecer quando eu clicar no botão remover. Então, vamos tentar isso. Vou aqui e adicionarei algumas tarefas. Então, digamos que eu queira remover uma tarefa específica. Posso ir aqui e clicar no botão da lixeira e, como você pode ver, ele foi removido E também posso remover completamente as outras tarefas. Tudo bem. Agora, ao finalizar uma tarefa, queremos ter a capacidade de marcá-la como concluída. E faremos isso simplesmente adicionando uma linha cruzada na tarefa ao clicar na própria tarefa. Então, para fazer isso, percorreremos as tarefas e, ao clicar em qualquer tarefa, adicionaremos essa linha. Isso é muito parecido com o que fizemos aqui. Então, primeiro de tudo, queremos selecionar as tarefas adicionadas. Então, vou criar uma nova variável, nomeá-la como tarefas adicionadas. E vou definir isso igual ao seletor de consulta de pontos do documento all E vou focar em todos os divs que têm uma classe de tarefa, que é essa divisão acima Então, podemos facilmente ir aqui e copiar essa lógica daqui. Cole e mude o que queremos fazer. Em primeiro lugar, substituirei os botões de remoção por tarefas adicionadas, portanto, examinaremos a tarefa adicionada em si desta vez. Em seguida, vou mudar o botão aqui para tarefa, que representa cada tarefa individual. Em seguida, também mudaremos o botão aqui para tarefa , para que possamos ouvir o evento de clique de cada tarefa. Em seguida, removerei esse código aqui porque claramente não queremos remover o pai da tarefa ao clicar nela. Mas, na verdade, queremos adicionar uma linha simples na tarefa e podemos fazer isso usando CSS. Então eu vou dizer task ClassLT dot Toggle. E eu vou alternar a classe chamada concluída. Então, o que isso fará é que cada vez que clicarmos em uma tarefa, uma classe chamada Don será adicionada ao div com uma classe de tarefa E se clicarmos novamente, a classe será removida. Então, vamos tentar isso. Vou adicionar uma tarefa e depois inspecioná-la. E eu quero que você dê uma olhada mais aqui no div com a classe da tarefa Você pode ver que, ao clicar na tarefa, uma classe chamada D é adicionada. E ao clicar novamente, essa classe D é removida. E isso está acontecendo devido ao método de alternância que adicionamos aqui Tudo bem. Usaremos essa classe De para estilizar a tarefa ao clicar nela. Então, vou para o meu CSS e direciono a tarefa div. E quando ela tiver outra classe chamada concluída, adicionarei decoração de texto, linha a linha Então vá aqui e clique nele. Você pode ver que a linha foi adicionada para indicar que concluímos essa tarefa e essa linha foi adicionada por causa da classe De. E ao clicar novamente, ela é removida e podemos remover completamente a tarefa clicando no botão da lixeira Ok, agora temos mais uma coisa. Você pode ver que a tarefa na entrada ainda está lá depois de adicionar a tarefa, mas queremos removê-la assim que adicionarmos a tarefa. Em outras palavras, queremos esvaziar a entrada para que ela esteja pronta para a próxima tarefa a ser adicionada. Dessa forma, não precisaremos remover o texto da tarefa anterior manualmente. Podemos fazer isso facilmente acessando nosso arquivo JavaScript e, na parte inferior, direi a entrada da tarefa. Que é, lembre-se, a entrada de texto que selecionamos aqui. Em seguida, adicionarei o valor do ponto e definirei e esvaziarei as strings como um valor E lembre-se, isso acontecerá ao clicar no botão Adicionar tarefa. Então, vamos tentar isso. Vou adicionar uma nova tarefa e agora você pode ver que a entrada fica vazia quando adicionamos a tarefa. E ao adicionar outra tarefa, ela fica vazia novamente e podemos marcar essa tarefa como concluída. Também podemos remover essa tarefa. E com isso, pessoal, terminamos de criar esse projeto. Espero que você tenha gostado e tenha tirado proveito disso, e nos vemos em outro projeto de JavaScript.