A qualidade dos seus vídeos é absurda, explicação clara e objetiva, sou iniciante e esse aprendizado se torna mil vezes mais fácil com essas explicações, parabéns !!!
Que tutorial incrível, parabéns Felipe. Eu que sou iniciante é tudo bem claro e objetivo. Não entendo tudo de primeira, mas dá para aprender várias coisinhas. Que demais. Obrigada por compartilhar seu conhecimento com a gente.
Também estou no início, foi apresentado vários conceitos novos que não entendi de primeira, mas deu pra entender. Parabéns pelo vídeo, Felipe. Muito obrigado!! :)
Muito obrigado, cara!! Fazia alguns dias que eu estava tentando aplicar o localstorage no meu ToDo List, mas não conseguia de jeito nenhum😅. Seu vídeo foi essencial para a resolução do meu problema. SEU CANAL É INCRÍVEL!!!💥
Parabens pelo conteúdo, eu comecei nessa area a pouco tempo e ja fui logo comprando cursos e em nenhum deles eu aprendi tanto como eu aprendi vendo seus videos... Graças ao seus videos eu consegui evoluir bastante na programação. OBRIGADOOOO
Muito legal o projeto, fiz do meu jeito mas o resultado foi o mesmo, unica diferença foi que escondi a div onde iria ficar as tasks se ela estivesse vazia ou se remove-se todos os elementos... Legal demais!
Muito bom tutorial. Parabéns pela clareza nas palavras e pela didática. Gostaria de deixar uma alternativa que notei em outros tutorias pra quando não há nenhuma tarefa no primeiro uso do todo-list. const tasksFromLocalStorage = JSON.parse(localStorage.getItem('tasks')) ?? []; dessa forma ele cria um array vazio se não existir nenhuma task. Mais uma vez parabéns pelo trabalho.
Sensacional!!! muito bom cara, obrigado pelo conteúdo, muito bem explicado, e o mais importante tu explica a lógica que a gente precisa fazer, que é o que importa, mais legal ainda é quando pauso o video, e tento advinhar qual que é a lógica, antes de tu dar a resposta :) abração!
Fala Felipe.. Cara estava tentando fazer esse projeto que me deram num bootcamp, só que só achei videos mal explicados e a maioria em inglês. Assistindo seu video, consegui finalizar o código que estava travado e coloquei algumas melhorias também. Valeu pelo vídeo e por compartilhar o conhecimento.. #GanhouMaisUmInscrito ;)
Boa tarde, no minuto 47:07 quando eu coloco o const isCompleted = content.classList.contains("completed") Ele me retorna esse erro: Uncaught TypeError: Cannot read properties of null (reading 'classList') Se alguém souber a solução e me falar agradeço hehe
Felipe você é incrível com esses projetos, admiro muito seu trabalho, bom eu sou apenas um estudante neste momento, mas vale a pena copiar códigos de outros programadores?
muito obrigado pelas palavras, Edu! e sim, irmão, vale a pena você copiar código sim, desde que você o DIGITE manualmente, ok? qualquer coisa que faça você escrever código é válida!
o negócio é copiar e entender o que cada linha faz, depois disso tente fazer sozinho sem copiar, para de fato aprender a fazer, outra forma é copiar mas adaptar cores, logos etc para que fique com a tua cara e com isso tu vai evoluindo.
Felipe, achei incrível o seu tutorial, e tive uma questão que testei, mas ainda não consegui implementar. Gostaria de adicionar o evento ao pressionar a tecla Enter, ele também fazer a ação de adicionar a task. Alguém pensou em fazer e conseguiu? Ou você conseguiria auxiliar Felipe?
eae mano, não sei se conseguiu fazer já, mas eu estava aqui tentando fazer isso tbm e cheguei a usar inputElement.addEventListener('keyup', (event) => { if (event.key === 'Enter') { handleAddtask(); } }) dai rodou de boas no meu
Fora isso boa aula gosto do conteúdo que apresentas Vc tem uma base geral do JavaScript ? Já usaste todos o frameworks da linguagem ? usas uma outra linguagem?
Fala Felipe, parabens pela aula cara! Me tira uma dúvida? Como ativa essa linha amarela que fica embaixo da declaração da função e do lado esquerdo, aparentemente representa o escopo da função.
se eu colocar cntent.innerText da erro e esta tudo correto, se eu der console log no content ele me mostra a tag p com os caracteres dentro. mas se coloco content.innerText ja da erro. const updateLocalHitorage = () => { const tasks = taskContainer.childNodes;
acredito que se vc mudar o height do body de 100vh para 100% pode mudar, aí vc tenta colocar no body que o display é flex e o flex direction como column body { height: 100%; display: flex; flex-direction: column; pq quando vc coloca que o height: 100vh; vc está dizendo que a altura vai ser sempre o tamanho da tela, pode imprensar tudo pra encaixar mas não pode mudar a altura da tela, porém se vc colocar: height: 100%; vc está dizendo que a altura vai ser tudo o que os seus elementos ocupam, ou seja se vc for adicionando tasks, a sua página vai crescendo para suprir a nescessidade de espaço. espero que tenha entendido!
Cara, quanto tempo preciso estudar pra saber tudo isso? Eu entrei agora, estou estudando faz 1 mês, (html e css estou estudando faz 1 ano) mas javascript eu sinto que nunca vou aprender..
Muito bom! . Felipe , me tira uma dúvida ? Quando clicamos ' Enter' isso tá ativando a function do Butão 'Adicionar' , porém não escrevemos isso no código . Isso é um padrão do browser ?
Boa noite, estou com um problema com o isSameNode(), esta aparecendo este erro: script.js:84 Uncaught TypeError: Cannot read properties of null (reading 'isSameNode')
Tenta assim: for (const task of tasks) { if(task.firstChild === taskContent) { task.firstChild.classList.toggle("completed") } } É pq o isSameNode não é para todos os navegadores, o meu deu o mesmo erro e usei o ChatGPT pra me ajudar e essa é a solução do problema 👌👌
Alguma alma boa poderia disponibilizar o tempo para me explicar a minha duvida? No for of que ele faz pro IsSameNode, pq precisa ser o firstChild? Esse nao seria o primeiro filho da div? Se a div tiver 5 task, ele so vai deletar a primeira por ser first, nao?
o primeiro elemento é o p, mas nunca ficam mais de um p na mesma div, a div só comporta 1 p e 1 ícone, quando cria uma nova task cria uma nova div tbm, e o for of é justamente pra percorrer todas essas divs
deu erro scripts.js:84 Uncaught TypeError: Cannot read properties of null (reading 'classList') at scripts.js:84:33 at Array.map () at updateLocalStorage (scripts.js:82:40) at handleAddTask (scripts.js:40:3) at HTMLButtonElement. (scripts.js:127:47) consigo adiconar mais nao colocar como feito e remover scripts.js:47 Uncaught TypeError: Cannot read properties of null (reading 'isSameNode') at handleClick (scripts.js:47:55) at HTMLParagraphElement. (scripts.js:23:47) Uncaught TypeError: Cannot read properties of null (reading 'isSameNode') at handleDeleteClick (scripts.js:61:55) at HTMLElement. (scripts.js:30:5) ja recorrie ao codigo no repositorio mas o resultado é o mesmo
Ao invés de fazer um loop em todos os parágrafos, eu simplesmente adicionei um evento de completar a tarefa, logo após criar o paragrafo, e antes de adicioná-lo à div, e pra deletar eu fiz a mesma coisa, adicionando o evento no ícone antes de dar append, um evento que pega o parentElement do ícone e deleta - Também fiz um método que pega todos os elemento filho do task-container e verifica se o length é igual a zero (está vazia), se sim ele adiciona uma classe que esconde aquela faixa branca
Sim kkkkk, inclusive esquecer o que fazer quando acaba de aprender algo . No meu caso eu ja fiz alguns mini projetos e quando vou tentar replicar no dia seguinte nao lembro de nada
A qualidade dos seus vídeos é absurda, explicação clara e objetiva, sou iniciante e esse aprendizado se torna mil vezes mais fácil com essas explicações, parabéns !!!
muito obrigado pelas palavras, irmão!
Que tutorial incrível, parabéns Felipe. Eu que sou iniciante é tudo bem claro e objetivo. Não entendo tudo de primeira, mas dá para aprender várias coisinhas. Que demais. Obrigada por compartilhar seu conhecimento com a gente.
Também estou no início, foi apresentado vários conceitos novos que não entendi de primeira, mas deu pra entender. Parabéns pelo vídeo, Felipe. Muito obrigado!! :)
Seria ótimo ter um botão editar por ser função essencial para um To do list e tmb para já ser uma opção de C.R.U.D. No mais, excelente vídeo.
muito foda, obrigado, ajudou demais. acho que tua página tava toda hora pedindo pra ser traduzida pq tu deixou
Muito obrigado, cara!! Fazia alguns dias que eu estava tentando aplicar o localstorage no meu ToDo List, mas não conseguia de jeito nenhum😅. Seu vídeo foi essencial para a resolução do meu problema. SEU CANAL É INCRÍVEL!!!💥
parabéns pelo conteúdo, passei a tarde inteira estudando e fazendo... tive que fazer algumas alterações, mas o seu vídeo ficou sensacional!!
Que tutorial maravilhoso! Bem completo e claro. Eu sou junior e achei sua didatica extremamente direta e objetiva. Obrigada!!
Parabens pelo conteúdo, eu comecei nessa area a pouco tempo e ja fui logo comprando cursos e em nenhum deles eu aprendi tanto como eu aprendi vendo seus videos...
Graças ao seus videos eu consegui evoluir bastante na programação.
OBRIGADOOOO
Muito legal o projeto, fiz do meu jeito mas o resultado foi o mesmo, unica diferença foi que escondi a div onde iria ficar as tasks se ela estivesse vazia ou se remove-se todos os elementos... Legal demais!
Mano, continua mandando mais vídeos, eles são muito top mesmo. Parabéns...
muito obrigado, Luciano! fico feliz em saber que você gostou. =D
Cara você explica as coisas que faz muito bem, ótimo vídeo.
Fera!!!! Muito obrigado pela disposição para ensinar.
Muito bom tutorial. Parabéns pela clareza nas palavras e pela didática. Gostaria de deixar uma alternativa que notei em outros tutorias pra quando não há nenhuma tarefa no primeiro uso do todo-list.
const tasksFromLocalStorage = JSON.parse(localStorage.getItem('tasks')) ?? [];
dessa forma ele cria um array vazio se não existir nenhuma task.
Mais uma vez parabéns pelo trabalho.
estou começando estudar js e sua didática é fantástica.
Depois desse vídeo fui obrigado a me inscrever!
Muito obrigada por compartilhar esse conhecimento incrível!! Estou aprendendo muito contigo!!
Top demais, traz mais projetos, tô aprendendo muito
vou trazer sim, Wallisson!
Excelente vídeo, me ajudou mto no projeto que estou realizando
Com certeza agrega muito pra gente!
Sensacional!!! muito bom cara, obrigado pelo conteúdo, muito bem explicado, e o mais importante tu explica a lógica que a gente precisa fazer, que é o que importa, mais legal ainda é quando pauso o video, e tento advinhar qual que é a lógica, antes de tu dar a resposta :) abração!
Sensacional cara! Bonito, e de facil entendimento!
Muito bom seu projeto e excelente didática...
Esse formato ficou bacana.
Fala Felipe.. Cara estava tentando fazer esse projeto que me deram num bootcamp, só que só achei videos mal explicados e a maioria em inglês.
Assistindo seu video, consegui finalizar o código que estava travado e coloquei algumas melhorias também.
Valeu pelo vídeo e por compartilhar o conhecimento.. #GanhouMaisUmInscrito ;)
Boa tarde, no minuto 47:07 quando eu coloco o const isCompleted = content.classList.contains("completed")
Ele me retorna esse erro: Uncaught TypeError: Cannot read properties of null (reading 'classList')
Se alguém souber a solução e me falar agradeço hehe
Comigo aconteceu isso também, copiei o código dele no Github e testei, também deu esse mesmo problema.
comigo aconteceu a mesma coisa, tudo esta rodando liso e sem erro, mas nessa parte ta dando esse erro do class-list
Conseguiu resolver o problema?
parabens irmão. ótima aula. recomendo demais. show.
Que tutorial incrível cara! parabéns.
Como sempre muito bom, continue criando vais coisas!!
obrigado, irmão!
Top demais Felipe, obrigado pelo conteúdo
eu que agradeço pela confiança, Lucas!!
cara, na parte do localStorage eu só segurei na sua mão e fui! kkkkk
parabéns pelo excelentíssimo trabalho!!
Massa pra K7. Aprendi com vc a programar.
O monstro voltou 🔥
hahahaha tmj! 🔥
Amei o projeto! parabéns. mais uma inscrita!!
Obrigado por disponibilizar gratuitamente seu conhecimento e tempo de uma forma TÃO CLARA. Aprendi muito aqui nessa aula!! ☺♥
muito bom vo tentar fazer sozinho agora
boaaaa, Jordan!
Felipe você é incrível com esses projetos, admiro muito seu trabalho, bom eu sou apenas um estudante neste momento, mas vale a pena copiar códigos de outros programadores?
muito obrigado pelas palavras, Edu! e sim, irmão, vale a pena você copiar código sim, desde que você o DIGITE manualmente, ok? qualquer coisa que faça você escrever código é válida!
@@dicasparadevs Obrigado Felipe!
o negócio é copiar e entender o que cada linha faz, depois disso tente fazer sozinho sem copiar, para de fato aprender a fazer, outra forma é copiar mas adaptar cores, logos etc para que fique com a tua cara e com isso tu vai evoluindo.
vídeo Incrível consegui aprender tudo! Obg
Felipe, achei incrível o seu tutorial, e tive uma questão que testei, mas ainda não consegui implementar. Gostaria de adicionar o evento ao pressionar a tecla Enter, ele também fazer a ação de adicionar a task. Alguém pensou em fazer e conseguiu? Ou você conseguiria auxiliar Felipe?
eae mano, não sei se conseguiu fazer já, mas eu estava aqui tentando fazer isso tbm e cheguei a usar
inputElement.addEventListener('keyup', (event) => {
if (event.key === 'Enter') {
handleAddtask();
}
})
dai rodou de boas no meu
Gostei muito, faz um vídeo usando banco de dados
Fora isso boa aula gosto do conteúdo que apresentas
Vc tem uma base geral do JavaScript ? Já usaste todos o frameworks da linguagem ? usas uma outra linguagem?
pra função de apagar eu fiz assim e deu certo
E se eu quisesse alterar a tarefa, mas sem excluí-la?
Muito bom! Qual seria a forma mais simples de conectar com um banco de dados como o firebase?
Ótimo conteúdo, muito obrigado por passar esse conhecimento, ajuda muito!
tmj, Antonio! eu que agradeço!
oi felipe, vc pode fazer um vídeo sobre metodologias ágeis?
anotado!
Show!!!!
Thanks, brother!
eu que agradeço, Vini!
Cara muito bom, mas se eu quizesse inserir uma imagem? pegando de uma pasta no meu pc
Para desativar a mensagem se quer traduzir da página é só trocar o lang para pt-br no html =>
Tenho dúvidas sobre como faço para as pessoas ver meu arquivo HTML Java online
Fala Felipe, parabens pela aula cara!
Me tira uma dúvida? Como ativa essa linha amarela que fica embaixo da declaração da função e do lado esquerdo, aparentemente representa o escopo da função.
se eu colocar cntent.innerText da erro e esta tudo correto, se eu der console log no content ele me mostra a tag p com os caracteres dentro. mas se coloco content.innerText ja da erro.
const updateLocalHitorage = () => {
const tasks = taskContainer.childNodes;
const localHitorageTasks = [...tasks].map(task => {
const content = task.firstChild;
return{description: content};
})
localStorage.setItem(tasks, JSON.stringify(localHitorageTasks))
}
por exemplo a pessoa poder trocar a ordem semt er que apagar td e reescrever
O meu no início do css n fica com a cor de fundo!!!! Oque será que pode ser
Terminei o projeto aqui e percebi que quanto mais item adiciono na lista, o input sobe mais na tela, chega um momento que ele some, como resolvo isso?
Eu tentei usar overflow:scroll e position:, mas n funcionou de nenhum jeito.
acredito que se vc mudar o height do body de 100vh para 100% pode mudar, aí vc tenta colocar no body que o display é flex e o flex direction como column
body {
height: 100%;
display: flex;
flex-direction: column;
pq quando vc coloca que o height: 100vh; vc está dizendo que a altura vai ser sempre o tamanho da tela, pode imprensar tudo pra encaixar mas não pode mudar a altura da tela, porém se vc colocar: height: 100%; vc está dizendo que a altura vai ser tudo o que os seus elementos ocupam, ou seja se vc for adicionando tasks, a sua página vai crescendo para suprir a nescessidade de espaço. espero que tenha entendido!
Cara, quanto tempo preciso estudar pra saber tudo isso? Eu entrei agora, estou estudando faz 1 mês, (html e css estou estudando faz 1 ano) mas javascript eu sinto que nunca vou aprender..
@Felipe como eu poderia estar mudando essa lista de tarefa para eu adicionar um título e uma descrição em cada tarefa?
Não tá deletando e nem marcando como concluida. Um problema no IsSameNode
"Cannot read properties of null (reading 'isSameNode')"
Como resolver?
mesma coisa aq tbm
to com esse erro aqui, conseguiu resolver ?
@@Dyoualves, tô com o mesmo erro. Alguém resolveu?
@@lenny5592, tô com o mesmo erro. Alguém resolveu?
Ótimo vídeo!
Muito bom! . Felipe , me tira uma dúvida ? Quando clicamos ' Enter' isso tá ativando a function do Butão 'Adicionar' , porém não escrevemos isso no código . Isso é um padrão do browser ?
consigo criar um Back-End para usar esse front?
assim deu certo e é bem mais simples
cara estou tendo erro com o isSameNode() erro Não é possível ler as propriedades de null (lendo 'isSameNode')
não sei o que é
seria muito legar aprende a trocalos de posição
Boa noite! Alguém poderia ajudar com o erro no isSameNode?Na função de deletar não está funcionando.
Fala, Ruan! Na minha deu o mesmo problema, mas em vez de colocar isSameNode coloca o sinal ===, funciona da mesma forma!
deu erro nessa função dai eu fiz assim e deu certo bem mais simples
Muito bom
Qual extensão você usa para deixar os códigos JavaScript coloridos?
dracula. É um tema bacana, pesquisa la nas extensões
Boa noite, estou com um problema com o isSameNode(), esta aparecendo este erro: script.js:84 Uncaught TypeError: Cannot read properties of null (reading 'isSameNode')
Tenta assim:
for (const task of tasks) {
if(task.firstChild === taskContent) {
task.firstChild.classList.toggle("completed")
}
}
É pq o isSameNode não é para todos os navegadores, o meu deu o mesmo erro e usei o ChatGPT pra me ajudar e essa é a solução do problema 👌👌
Alguma alma boa poderia disponibilizar o tempo para me explicar a minha duvida? No for of que ele faz pro IsSameNode, pq precisa ser o firstChild? Esse nao seria o primeiro filho da div? Se a div tiver 5 task, ele so vai deletar a primeira por ser first, nao?
o primeiro elemento é o p, mas nunca ficam mais de um p na mesma div, a div só comporta 1 p e 1 ícone, quando cria uma nova task cria uma nova div tbm, e o for of é justamente pra percorrer todas essas divs
brabo
deu erro scripts.js:84 Uncaught TypeError: Cannot read properties of null (reading 'classList')
at scripts.js:84:33
at Array.map ()
at updateLocalStorage (scripts.js:82:40)
at handleAddTask (scripts.js:40:3)
at HTMLButtonElement. (scripts.js:127:47)
consigo adiconar mais nao colocar como feito e remover
scripts.js:47 Uncaught TypeError: Cannot read properties of null (reading 'isSameNode')
at handleClick (scripts.js:47:55)
at HTMLParagraphElement. (scripts.js:23:47)
Uncaught TypeError: Cannot read properties of null (reading 'isSameNode')
at handleDeleteClick (scripts.js:61:55)
at HTMLElement. (scripts.js:30:5)
ja recorrie ao codigo no repositorio mas o resultado é o mesmo
Boa noite! Estou fazendo a mesma função para deleção, porém não está funcionando. Alguém poderia ajudar?
Fiz aqui e está funcionando. Pode mandar o erro aqui ?
@@fernando-alb, não estou conseguindo deletar. Aparece que o erro está isSameNode.
Alguém teve problema com aquele kit que ele mostrou ou o site em si?
Quando atualizo a pagina as tarefas some oq fazer?
Ai voce vai precisar entrar com Back-end para manter as informaçoes
Nem precisa de back é só ver a última parte do vídeo sobre integrar localstorage aí é bala
Fala ai Felipe blz amigão!? O meu projeto não ficou centralizado, e nem colorido, o que será que aconteceu???
você importou o arquivo CSS, bro?
Importa o CSS pow, foi só isso. Ou entao verifica se ta salvo na mesma pasta
Ao invés de fazer um loop em todos os parágrafos, eu simplesmente adicionei um evento de completar a tarefa, logo após criar o paragrafo, e antes de adicioná-lo à div, e pra deletar eu fiz a mesma coisa, adicionando o evento no ícone antes de dar append, um evento que pega o parentElement do ícone e deleta
- Também fiz um método que pega todos os elemento filho do task-container e verifica se o length é igual a zero (está vazia), se sim ele adiciona uma classe que esconde aquela faixa branca
ficou assim
tava caindo pop up do tradutor pq a linguage do seu site tava em ingles
verdade hahahaha! fui perceber só depois que já tinha gravado 😂
Ficou da hora, mas a parte do local storage ficou muito verboso e um pouco confuso! Mas parabéns
normal nao entender nada depois dos 20 minutos?
Sim kkkkk, inclusive esquecer o que fazer quando acaba de aprender algo . No meu caso eu ja fiz alguns mini projetos e quando vou tentar replicar no dia seguinte nao lembro de nada
const handleDeletClick = (deletIten, textcontn) => {
const lista = textcontn
const lixo = deletIten
lista.style.display = 'none'
lixo.style.display = 'none'
}