Ótima aula! Para quem percebeu que ao deixar o input vazio ele adiciona uma tarefa vazia a lista, basta criar uma condição especificando que se o valor do input for igual a uma string vazia ele emite um alerta e não executa a função criarTagLi. if (inputNovaTarefa.value == "") { alert('Adicione uma tarefa'); } else { let li = criarTagLi(tarefa) listaTarefas.appendChild(li); inputNovaTarefa.value = ""; }
Valeu, cara! Tinha notado isso, mas tava tão corrida que não consegui parar pra pensar nisso. O teu comentário me poupou tempo!! Valeu mesmo! Deus te abençoe 🎉
Parabéns! Muito obrigado por compartilhar ensinamentos. Não tenho pratica em JS, porém seu projeto vai me ajudar bastante em projetos futuros. Muito obrigado.
Gostei muito!! Demorei umas 6 horas pra concluir pq estou começando agora e quero aprender aos poucos...E teve algumas coisas que você adicionou no código e não filmou, então teve momentos que meu código não funcionava conforme deveria e eu ficava pesquisando o motivo ao invés de copiar e colar código. Tirando essa parte o video ficou show!!!
+ 1 inscrito Acabei de assistir todo o projetinho e vou repetir todas as etapas. Muito obrigado!! Vai dar uma acelerada no meu javascript fraquíssimo ♥
É isso aí Gerson, sextou com Javascript o/ Bora estudar e praticar que muito em breve seu javascript vai estar fortíssimo! Fico feliz em contribuir um pouquinho nos seus estudos.
Excelente aula!! @Douglas Horstmann, com sua didática consegui fazer a lista de tarefas. Só curiosidade estava tentando incluir um check nas tarefas como concluídas sem deletá-las, porém não estou conseguindo. tem como adicionar isso?
Obrigado Hércules. Tem sim, uma forma de fazer isso é alterando dentro da função criarTagLI. Nessa função você pode criar o elemento checkbox dinamicamente (igual já acontece com o botão de edição por exemplo), e também poderia criar um novo evento e atribuir ao checkbox para saber quando o checkbox for clicado, caso precise.
Maravilhoso conteúdo meu amigo, parabéns. Só bati um pouco a cabeça pq a class= abrir estava na div =janelaEdicaoFundo, quando ia pra div= janelaEdicao lá não pegava a class, mas com um pouco de atenção resolvi isso. Muito bom para estudar CSS E JS. Obrigado por isso.
Sim, é provável que em algum momento gere repetido. Você poderia implementar essa lógica para verificação, e claro em um cenário mais próximo do mundo real, esse identificador viria da seu código backend e você não faria essa geração no frontend.
Claro, é possível sim. Você pode criar duas novas funções, uma para salvar e outra para recuperar os dados do local storage. E nos métodos que adicionam, editam ou excluem items da lista, pode chamar esses novos métodos criados. Inclusive Matheus tenho um vídeo no canal mostrando o uso do local storage e session storage, você pode conferir aqui se precisar: ruclips.net/video/P8rDMfQfxj8/видео.html
Eai Felipe, para uma descrição você poderia incluir na janela modal uma textarea, que é uma tag de formulário para textos grandes. Com isso você poderia estar modificando a função criarTagLI, para que dentro dessa função também seja incluída a criação de uma tag P, com o texto que você vai recuperar da textarea, deu pra pegar a ideia? Você vai precisar trabalhar melhor a função de editar também, para recuperar o texto da tag P recém criada a partir do HTML e jogar no form de edição dentro da textarea. Depois que você conseguir fazer isso, analise a função criarTagLI novamente, pois ela cria outras tags dentro dela, e isso pode ser separado em mais funções, dessa forma o código fica organizado e cada função com uma responsabilidade. E se você quiser mais um desafio para trabalhar com essa lista de tarefas, você pode fazer uma versão nova salvando as tarefas como objetos em arrays. A manipulação das informações vai ficar diferente, e na minha opinião bem mais legal. Tenho um vídeo aqui no canal de como você consegue fazer isso também: ruclips.net/video/P8rDMfQfxj8/видео.html Bons estudos ai!
Obrigado pelo feedback, posso ter me desatentado na edição. Caso esse parte que notou a falta do passo a passo tenha dificultado seu aprendizado fique a vontade pra postar as dúvidas por aqui ou me adicionar no LinkedIn que conversamos. www.linkedin.com/in/douglas-ahorstman
Cara to desde de a semana passada tentando fazer o id janelaEdicaoBtnFechar funcionar, porem não deu muito pra entender oque tu fez, pq na tua tela aparece de boa só q na minha só aparece quando abro a opção inspecionar e coloco a class abrir, ai da certo porem depois não aparece mais , codigo meio confuso não da pra entender
Olá, essa confusão ai foi devido a um problema de edição do vídeo na época Igor, peço desculpas por isso. Você pode consultar o código original no github, tem na descrição do vídeo o link do repositório e vou deixar aqui também: github.com/douglash93/lista-de-tarefas Nele você encontra todo o código do projeto, podendo inclusive baixar o projeto completinho.
Olá, tem uns comentários mais antigos onde menciono que teve um problema de edição do vídeo. E isso pode ter atrapalhado realmente. Eu não sei se você conhece o github, ele é um repositório de código e o código que fiz na época está hospedado lá, inclusive o link na descrição do vídeo. Então você pode acessar o código, usa-lo para estudo e até mesmo comparar com o seu. Segue o link do repositório do código: github.com/douglash93/lista-de-tarefas
Olá, recomendo que você de uma olhada no repositório do projeto, disponível aqui: github.com/douglash93/lista-de-tarefas. Dessa forma vai conseguir comparar com o seu código e ver o que pode estar de diferente para buscar entender melhor o problema.
Olá, meu palpite é que se trata de um problema de digitação. É necessário ter um cuidado com a diferença das letras minúsculas e maiúsculas, idtarefa é diferente de idTarefa. Se precisar, você pode consultar o código que está no github nesse link github.com/douglash93/lista-de-tarefas Dessa forma vai conseguir identificar o que pode estar diferente mais facilmente. Bons estudos!
Gostaria de entender um probleminha que estou tendo simples no javascript e a mesma coisa ocorre no php, mas estou ficando louco, porque certas variaveis tipo numerica mudam os valores ao apresentar do document.write por exemplo, se eu declarar uma var com esse numero teste=06013000 o numero que retorna é 1578496 e se eu fizer a mesma coisa com um numero 06093003 retorna o numero certo 06093003, eu fiz essa comparação para ver que os numeros sao semelhantes, mas apresenta esse erro, se alguém puder ME AJUDAR POR FAVOR, esse numeros estou usando no CEP, muito obrigado
Olá Guilherme. Experimente tratar o valor do CEP como string e não um inteiro. No seu caso, me parece que ao usar como inteiro, o interpretador do js acaba ignorando o número que começa com zero, ou ainda quando você tenta concatenar o valor, é realizada uma operação matemática ao invés de apenas concatenar.
@@odouglasdev ola meu amigo consegui usando assim: PARSEINT li.setAttribute('onclick','exibirCep('+parseInt(i.cep.replace('-',''))+')'); MUITO OBRIGADO E BOA SEMANA.
@@guilhermegameplay5325 show, o carácter de hífen acabava realizando uma operação matemática. Se você fizesse "cep.toString()" já deveria resolver, mas que bom que deu tudo certo por aí! Abraço.
Ótima aula! Para quem percebeu que ao deixar o input vazio ele adiciona uma tarefa vazia a lista, basta criar uma condição especificando que se o valor do input for igual a uma string vazia ele emite um alerta e não executa a função criarTagLi.
if (inputNovaTarefa.value == "") {
alert('Adicione uma tarefa');
} else {
let li = criarTagLi(tarefa)
listaTarefas.appendChild(li);
inputNovaTarefa.value = "";
}
Valeu, cara! Tinha notado isso, mas tava tão corrida que não consegui parar pra pensar nisso. O teu comentário me poupou tempo!! Valeu mesmo!
Deus te abençoe 🎉
Depois de seu vídeo eu vejo que existe lógica em desenvolvimento FE, muito obrigado, Douglas!
Disponha! Bons estudos!
Parabéns! Muito obrigado por compartilhar ensinamentos. Não tenho pratica em JS, porém seu projeto vai me ajudar bastante em projetos futuros. Muito obrigado.
Boa Rafael, fico muito feliz em ajudar, bons estudos!
Show demais.
Tem como salvar as tarefas em local storage
Boa Douglas
Valeu!
Gostei muito!! Demorei umas 6 horas pra concluir pq estou começando agora e quero aprender aos poucos...E teve algumas coisas que você adicionou no código e não filmou, então teve momentos que meu código não funcionava conforme deveria e eu ficava pesquisando o motivo ao invés de copiar e colar código.
Tirando essa parte o video ficou show!!!
Olá Natany. Legal que conseguiu concluir, parabéns! Peço desculpas pela edição.
Bons estudos!
Mto top esse projeto com certeza vou aproveitar esse conhecimento em mtos outros projetos. Parabens pela didatica
Obrigado Philipe
Douglas boa tarde man. Meu amigo que conteúdo de ótima qualidade muito sucesso parabéns
Obrigado Abel, sucesso para você também!
+ 1 inscrito
Acabei de assistir todo o projetinho e vou repetir todas as etapas. Muito obrigado!!
Vai dar uma acelerada no meu javascript fraquíssimo ♥
É isso aí Gerson, sextou com Javascript o/
Bora estudar e praticar que muito em breve seu javascript vai estar fortíssimo! Fico feliz em contribuir um pouquinho nos seus estudos.
Ja estou inscrito esperando o proximo projeto
Show Dougla, vlw
aprendi bastante, como as aulas obrigado, por compartilhar!!
Excelente aula!! @Douglas Horstmann, com sua didática consegui fazer a lista de tarefas. Só curiosidade estava tentando incluir um check nas tarefas como concluídas sem deletá-las, porém não estou conseguindo. tem como adicionar isso?
Obrigado Hércules. Tem sim, uma forma de fazer isso é alterando dentro da função criarTagLI.
Nessa função você pode criar o elemento checkbox dinamicamente (igual já acontece com o botão de edição por exemplo), e também poderia criar um novo evento e atribuir ao checkbox para saber quando o checkbox for clicado, caso precise.
Maravilhoso conteúdo meu amigo, parabéns. Só bati um pouco a cabeça pq a class= abrir estava na div =janelaEdicaoFundo, quando ia pra div= janelaEdicao lá não pegava a class, mas com um pouco de atenção resolvi isso.
Muito bom para estudar CSS E JS.
Obrigado por isso.
Que bom que foi útil, bons estudos!
cara muito bom, aprendi bem mais do que na faculdade
Obrigado João, fico feliz em ter ajudado nos seus estudos!
Legal, podia ter um método de verificação, porque a função que gera os id aleatório em um momento ela irá retornar um número repetido não?
Sim, é provável que em algum momento gere repetido. Você poderia implementar essa lógica para verificação, e claro em um cenário mais próximo do mundo real, esse identificador viria da seu código backend e você não faria essa geração no frontend.
É possível usar o local storage nesse projeto? Por onde devo começar?
Claro, é possível sim.
Você pode criar duas novas funções, uma para salvar e outra para recuperar os dados do local storage.
E nos métodos que adicionam, editam ou excluem items da lista, pode chamar esses novos métodos criados.
Inclusive Matheus tenho um vídeo no canal mostrando o uso do local storage e session storage, você pode conferir aqui se precisar: ruclips.net/video/P8rDMfQfxj8/видео.html
Douglas como eu poderia estar modificando o conteudo para colocar um titulo e uma descrição em cada tarefa?
Eai Felipe, para uma descrição você poderia incluir na janela modal uma textarea, que é uma tag de formulário para textos grandes.
Com isso você poderia estar modificando a função criarTagLI, para que dentro dessa função também seja incluída a criação de uma tag P, com o texto que você vai recuperar da textarea, deu pra pegar a ideia?
Você vai precisar trabalhar melhor a função de editar também, para recuperar o texto da tag P recém criada a partir do HTML e jogar no form de edição dentro da textarea.
Depois que você conseguir fazer isso, analise a função criarTagLI novamente, pois ela cria outras tags dentro dela, e isso pode ser separado em mais funções, dessa forma o código fica organizado e cada função com uma responsabilidade.
E se você quiser mais um desafio para trabalhar com essa lista de tarefas, você pode fazer uma versão nova salvando as tarefas como objetos em arrays.
A manipulação das informações vai ficar diferente, e na minha opinião bem mais legal.
Tenho um vídeo aqui no canal de como você consegue fazer isso também: ruclips.net/video/P8rDMfQfxj8/видео.html
Bons estudos ai!
teve partes do seu codigo, que vc fez sem mostrar, vi que faltava detahes, e quando mais pra frente, ele estava lá, sem vc mostrar o passo a passo.
Obrigado pelo feedback, posso ter me desatentado na edição. Caso esse parte que notou a falta do passo a passo tenha dificultado seu aprendizado fique a vontade pra postar as dúvidas por aqui ou me adicionar no LinkedIn que conversamos.
www.linkedin.com/in/douglas-ahorstman
Cara to desde de a semana passada tentando fazer o id janelaEdicaoBtnFechar funcionar, porem não deu muito pra entender oque tu fez, pq na tua tela aparece de boa só q na minha só aparece quando abro a opção inspecionar e coloco a class abrir, ai da certo porem depois não aparece mais , codigo meio confuso não da pra entender
Olá, essa confusão ai foi devido a um problema de edição do vídeo na época Igor, peço desculpas por isso.
Você pode consultar o código original no github, tem na descrição do vídeo o link do repositório e vou deixar aqui também: github.com/douglash93/lista-de-tarefas
Nele você encontra todo o código do projeto, podendo inclusive baixar o projeto completinho.
so tem um problema quando eu clico em salvar não fecha porque?
Olá, tem uns comentários mais antigos onde menciono que teve um problema de edição do vídeo. E isso pode ter atrapalhado realmente.
Eu não sei se você conhece o github, ele é um repositório de código e o código que fiz na época está hospedado lá, inclusive o link na descrição do vídeo.
Então você pode acessar o código, usa-lo para estudo e até mesmo comparar com o seu. Segue o link do repositório do código: github.com/douglash93/lista-de-tarefas
Ocorreu um problema no btnAtualizarTarefa.addEventListener
O que fazer ???
Olá, recomendo que você de uma olhada no repositório do projeto, disponível aqui: github.com/douglash93/lista-de-tarefas.
Dessa forma vai conseguir comparar com o seu código e ver o que pode estar de diferente para buscar entender melhor o problema.
me ajuda , esta dizendo que meu idtarefa nao esta definido
Olá, meu palpite é que se trata de um problema de digitação.
É necessário ter um cuidado com a diferença das letras minúsculas e maiúsculas, idtarefa é diferente de idTarefa.
Se precisar, você pode consultar o código que está no github nesse link github.com/douglash93/lista-de-tarefas
Dessa forma vai conseguir identificar o que pode estar diferente mais facilmente.
Bons estudos!
Gostaria de entender um probleminha que estou tendo simples no javascript e a mesma coisa ocorre no php, mas estou ficando louco, porque certas variaveis tipo numerica mudam os valores ao apresentar do document.write por exemplo, se eu declarar uma var com esse numero teste=06013000 o numero que retorna é 1578496 e se eu fizer a mesma coisa com um numero 06093003 retorna o numero certo 06093003, eu fiz essa comparação para ver que os numeros sao semelhantes, mas apresenta esse erro, se alguém puder ME AJUDAR POR FAVOR, esse numeros estou usando no CEP, muito obrigado
Olá Guilherme. Experimente tratar o valor do CEP como string e não um inteiro. No seu caso, me parece que ao usar como inteiro, o interpretador do js acaba ignorando o número que começa com zero, ou ainda quando você tenta concatenar o valor, é realizada uma operação matemática ao invés de apenas concatenar.
@@odouglasdev ola meu amigo consegui usando assim: PARSEINT li.setAttribute('onclick','exibirCep('+parseInt(i.cep.replace('-',''))+')'); MUITO OBRIGADO E BOA SEMANA.
@@guilhermegameplay5325 show, o carácter de hífen acabava realizando uma operação matemática. Se você fizesse "cep.toString()" já deveria resolver, mas que bom que deu tudo certo por aí! Abraço.