Projeto de JavaScript para iniciantes - To Do List com JavaScript puro

[@MatheusBattisti]

💡Conheça nosso curso completo de JavaScript: app.horadecodar.com.br/course/curso-de-javascript-completo

[@gersuer]

Oi , Professor! Infelizmente hoje me encontro numa situação que não consigo me inscrever na sua comunidade, mas com certeza na primeira oportunidade que eu tiver irei. Entretanto, queria agradecer, por que eu estou aprendendo e estudando por conta própria. E seu canal está me ajudando de uma maneira que nem sei explicar, em semanas vendo seus vídeos eu aprendi o que eu não tinha entendido em meses de estudo e isso me deu um ânimo grande, por que agora eu consigo fazer vários desafios do Front-end Mentor e outros sites que antes eu não tinha ideia de como fazer. Parabéns pelo seu empenho em ajudar e por ter uma linguagem que se preocupa com a gente que está iniciando nos estudos, agradeço de coração.

[@MatheusBattisti]

opa Gersuer, sem problemas, quando der, aparecer lá =) Sazonalmente rolará umas promoções... E obrigado pelo seu feedback =D

[@rafaeltrigo]

Sou Iniciante e vejo que a pessoa que conseguir concluir esse projeto de cabeça , sem consultar nada já vai ter uma boa noção de html , css , js , eu consigo fazer um bem simples agora quero fazer e refazer com esses eventos mais avançados

[@BrunoFutilidades]

Esse vídeo me fez perceber que sou um simples espermatozoide na área de programação :(

[@MatheusBattisti]

opa Bruno, dá uma olhada na comunidade: www.horadecodar.com.br/comunidade-hora-de-codar/ lá o foco é justamente promover a transformação dos devs =)

[@crowleylyrics]

Não pense "será que vou aprender?" E sim "eu vou aprender, agora em quanto tempo?"

[@tipicogamer7516]

Pra chegar lá você só precisa sempre ser melhor que ontem, hoje você aprende uma funcionalidade, amanhã outra e assim por diante.

[@Elrondbeggins]

Sou formado na graduação LICENCIATURA EM FÍSICA em uma universidade pública,e quando entrei no curso superior, quase me perdi em meio a tantos cálculos, mas consegui estudar muito e ficar entre os melhores alunos da sala. Hoje em dia estou iniciando o curso de JAVASCRIPT para aumentar meus conhecimentos, e vejo que tudo é uma questão de paciência. É melhor vc caminhar devagar e chegar no seu objetivo, do que ir rápido e não aprender nada.

[@ZAMAZ0]

E eu sou só um elétron vagando sem rumo

[@mcpinguabacatbr671]

Já me ganhou, iniciei seu vídeo e vi que você explica bem, outros não tem esse nível de explicação (e olha que já vi muitos canais). Parabéns, já sou inscrito!

[@mateusdev9605]

Gostei muito desse projeto, hoje mais cedo eu tentei fazer um TO DO List, mas me deparei com um problema que não estava conseguindo resolver e com a sua aula consegui entender no que eu estava errando.

[@MatheusBattisti]

boa Mateus!

[@sf-zr3oj]

Incrivel! Estava há 3 dias tentando fazer esse projeto, mas com outros professores e sempre parava no meio pq os outros davam bug, esse foi o único que não deu e estou conseguindo fazer funcionar direitinho. Parabéns, profe

[@moufiu]

eu fiz um to do sozinho para testar minha capacidade html e css foi facil agora o js tive dificuldade conseguir fazer, só quebrei o código varias vezes e ficou bem maior que esse, mas assim vou aprendendo e obrigado pelo conteúdo

[@MatheusBattisti]

⭐ Conheça a Comunidade Hora de Codar: www.horadecodar.com.br/comunidade-hora-de-codar/

[@dre2241]

Meu Deus do céu, Matheus, tu é perfeito! Afff como eu queria um projeto exatamente assim! Brigada!

[@MatheusBattisti]

valeu Dre!!

[@viniciuslino9932]

não conseguir baixar o ngc que ele fala na parte 10:12, sabe em qual video ele fala ?

[@Cookieukw]

muito bom, só senti falta de por a janela do html do lado do vsc já q a utilidade do liver server é justamente alterar o html sem precisar dar f5

[@edgarjk123]

Matheus, por favor não esqueça de nós da uDemy, atualmente só compro cursos seus por gostar da didática, mas não nos abandone.

[@VideosViraisVirais-dc7nx]

Ze cursinho 😂😂😂

[@thuliosoares1812]

Ótima didática, já fiz 3 cursos seu na Udemy e estou fazendo o quarto curso, fiz 3 sobre HTML e CSS e estou fazendo o de JavaScript e estou muito interessado em participar da comunidade

[@MatheusBattisti]

opa Thulio, pode vir que vai ser bem recebido, as coisas estão andando bem lá estou colocando o segundo projeto (pós lançamento) e construindo o nosso discord mês que vem começamos as lives e este mês ainda estarei colocando as aulas do próximo curso, vou produzindo, editando e postando qlqr duvida pode mandar msg, abraço!

[@ticospizzarias]

Boa tarde amigos ! Como faz para participar do grupo ?

[@artemanga431]

Já pegou algum trampo?

[@mbs2488]

Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

[@Archivesish]

Muito bom, fiz aqui assim que lançou e terminei agora haha, esses projetos pequenos são muito bons para manter a pratica.

[@MatheusBattisti]

boa mano, semana que vem tem mais!

[@MatheusBattisti]

⭐Conheça a Formação Front-end (+50 de horas de conteúdo, +20 de projetos) para você se tornar um dev front-end: www.udemy.com/course/formacao-front-end-html-css-javascript-react-e/?couponCode=LANCOUFE

[@victorpeixoto6601]

Muito top a sua didática professor, agradeço muito! Eu estava fazendo um projeto pessoal e estava tendo dificuldades na hora de inserir a tarefa e alguns efeitos que gostaria eram aplicados em todos e seu vídeo me ajudou a encontrar o bug rs. Tenho muita dificuldade em lógica, mas você acendeu a luz.

[@marianacastro7360]

Cara, sensacional! Tua didática é massa

[@MatheusBattisti]

valeuu Mariana! tem mais em: horadecodar.com.br/comunidade-hora-de-codar/ =)

[@thesims915]

No lugar do margin pra separar os elementos também podemos utilizar o gap (dentro do flex).

[@chrody]

TOP 100% MEGA. Ganhei meu dia assistindo isso.

[@eduardojose4105]

26:23 o meu search e o filter nao ficaram lado a lado . Oque poderira estR barrando essa acao ? 😢

[@edijunior7093]

Estava aqui quebrando a cabeça, pensando em como iria adicionar um evento para um elemento que nem existia ainda, decidi procurar outro desenvolvedor realizando a mesma tarefa e a solução era só adicionar o evento no documento inteiro, nossa, valeu!!

[@ronysilva176]

Amei suas dicas graças a primeiramente Deus, segundo meus esforços e a você conseguir executar todas as suas instruções! Obrigado!❤🙏🏽

[@ramonbarth4963]

Muito bom, excelente projeto para adicionar no portfólio ! Parabéns pela sua excelente didática professor !

[@jslima1976]

Gostei muito da aula, nunca tive contato com javascript fui programador há muitos anos atrás e vendo essa aula decidi a voltar a programar por hobby, alguem poderia indicar algum video ou se o professor tiver no canal, algo que de algumas informações de como utilizar essa aula com um banco de dados, vi que se usa sqlite atualmente, alguem sabe onde poderia encontrar, gostaria de reproduzir e poder gravar os dados. Muito obrigado! Parabens a o professor pelo conhecimento e disponibilidade.

[@andreleal7571]

excelente aula Matheus👏🏻👏🏻👏🏻 Gostaria de sugerir, esse mesmo projeto, já no react. Grato pela aula, muitos fundamentos envolvidos.

[@luiznatan6502]

Sua didática é impressionante. E olha q conheço muito cara bom!

[@o0marcio0o]

Parabéns... Já salvo aqui para assistir quando chegar em casa, faz mais vídeos de JS para iniciantes 🥰😍

[@MatheusBattisti]

showww Marcio, semana que vem teremos mais um, mas ele é intermediário, acho que é interessante também a progressão de dificuldade =D

[@joseamaurijunior7310]

@@MatheusBattisti Sim, muito importante a progressão de dificuldade. Esperando a aula!!!

[@MatheusBattisti]

⭐ Conheça a nossa plataforma de cursos: www.horadecodar.com.br/comunidade-hora-de-codar/

[@dropcas8275]

professor, qual é o video que o sr ensina usar os icones?

[@maximillian8]

Que atalho foi esse que foi utilizado para quebrar as linhas de todos os atributos da tag link aos 7:03 ?

[@gustavo3220]

Que massa, o design ficou bem parecido com o meu To Do

[@althi1688]

boa noite. Conteudo incrível. Onde está a continuação para as filtragens e busca?

[@padilhasx7]

é um mistério até hoje

[@holandesvoador5121]

Ola, no minuto 35:00 quando testa pelo console se o formulario esta sendo enviado, aqui no meu da o erro "Cannot read properties of null (reading 'addEventListener')", não sei o que pode ser. Alguem por favor pode ajudar???

[@pilantragames8058]

Boa tarde, esse ocorre porque estamos manipulando eventos na tela, e você precisa colocar o defer quando linka a pagina do html ao js, assim o js carrega depois que o html estiver pronto. segue alterações Scripts JavaScript: Código correto: O seu código:

[@MrCaliga]

Perfeito Matheus, com a sua didática e conhecimento, não tem como aprender a criar projetos show, parabéns!

[@matheusjean148]

Seu curso de node na udemy tá muito top chará! Super recomendo!

[@MatheusBattisti]

valeu Matheus, em breve Node na Comunidade!

[@erenildafreitaa7304]

Quero volta o canais anterior HTML.Esta no TVC não consigo adicionar os canais antes obrigado.

[@mayconrocha8723]

Que projeto top professor, sensacional, Parabéns pela didática.

[@LEKYNH4]

Obrigada professor! Show!

[@MatheusBattisti]

obrigado tb por acompanhar! =)

[@MateusCustódio-j4m]

Muito bom!! projeto muito bom para aprender, e didática melhor ainda.

[@ConhecimentoDev]

eu peguei esse projeto e fiz um sitema de formulario para cadastro e armazenamentos de dados.. valew

[@matheusmoreno3683]

Muito bom, consegui colocar a funçao de pesquisa e filtro. Só preciso aprender a guardar os dados no localStorage

[@DavidLucax]

Onde esta a continuacao desse projeto?

[@matheusmoreno3683]

@@DavidLucax o esse do vídeo eu não sei n, acho que no curso dele

[@andersonmp5415]

​@@DavidLucaxPago 😂😂😂😂

[@kidloko5689]

Como conseguiu mano? Consegue me mandar o repositório?

[@lifeatweb]

Parabéns! tutorial simples e direto! muito didático!

[@gustavosantana4805]

Você explica muito bem professor

[@MatheusBattisti]

valeu Gustavo!!

[@junnyhor]

Conteúdo muito bom. Sempre me ajuda.

[@MatheusBattisti]

valeu Raimundo!

[@Hykarin]

Didática excelente, ganhou um inscrito e um aluno

[@RenataKlein]

Matheus, a sua didática é excelente e objetiva, parabéns, me ajudando pakas!!!!

[@lino1678]

Ótimo vídeo. PS: Parabéns pela plataforma!

[@MatheusBattisti]

obrigado Lino! =)

[@taynarabicalho]

Como projetos práticos são essenciais pra aprender!!!!! Estudo JS a 2 meses, e nunca tinha começado um div "automaticamente" Apenas colocando # e o inserido o nome...assim prencheu tudo sozinho rsrsrsrsrs achei o máximo! 🤣

[@hansleygladberg]

Se for criar uma com classe é só colocar (ponto) --> .nomedadiv Tem vários atalhos nesse estilo que faciliam a nossa vida, como * + o número de vezes que quer um elemento, etc.

[@taynarabicalho]

@@hansleygladberg que bacana, realmente facilita muito!

[@ensinandoparaaprender6553]

parabéns, fera de mais!!!

[@antonioandersonlopes253]

Matheus muito obrigado, assistindo suas aulas eu tirei muitas duvidas, mais ainda estou caminhando

[@victormarques4167]

O meu tá dando erro na parte de adicionar uma nova tarefa , não sei oq fazer 😢

[@antoniomiguel2460]

Bora, sempre a aprender...

[@MatheusBattisti]

bora!

[@mbz5734]

Professor, a titulo de otimização criei um unica função para criar botões de adicionar tarefas (37:19 a 39:14) em termos de manutenção isso é valido ? createAddButton(todo,"button","finish-todo", "fa-check"); createAddButton(todo,"button","edit-todo", "fa-pen"); createAddButton(todo,"button","remove-todo", "fa-xmark"); const createAddButton = (fatherElement,sNameFirst, sNameSec,clsIcon) => { const localBtn = document.createElement(sNameFirst); localBtn.classList.add(sNameSec); localBtn.innerHTML = '' fatherElement.appendChild(localBtn); };

[@Alvaro__Jose10]

Assisti a aula 3 vezes e nao vi quando vc colocou aquele console.log na linha 53, no minuto 54:00, estou tentando resolver um erro que deu no meu codigo mas esta dificil.

[@gabrieljauneribera9931]

Cara to com esse problema de editar, na hora de salvar ele n edita, vc conseguiu resolver?

[@mikaelsilva1792]

@@gabrieljauneribera9931 essa parte é facil, problema é local storage que nao tem continuação

[@Gabriel9993]

Aula show, parabéns

[@MatheusBattisti]

valeu!

[@danilosantana3411]

qual dos cursos da continução a esse projeto?

[@andersonoliveira7177]

Depois que vc entende as etapas e a lógica para cumprir cada uma delas, o céu é o limite. Esse To Do List vira brincadeira de criança e muitos dos princípios que vc aprendeu pode ser reaproveitado em outros tipos de projeto.

[@pernalongak1823]

muito booom tmj matheus

[@MatheusBattisti]

valeu Pernalonga!

[@GilneySouza]

Show, conteúdo TOP!

[@MatheusBattisti]

valeu Gilney!

[@maclaurinrocha2881]

Fala cara tudo bem? Bom vi um curso seu de react ate a maestria , tem uma pergunta em especifica, com o curso eu consigo criar uma tela de login onde um usuário so pode fazer um login por vez ?Digo o mesmo usuario não pode fazer o login em vários aparelhos ou abas diferentes ?

[@maeltralha2062]

pode ultilizar os icones do ionicons?

[@Igor-nd3nf]

Muito bom, parabéns!

[@MatheusBattisti]

valeu Igor!

[@Rafael-fh7js]

no meu const toggleforms ele esconde apenas se tirar o editform, porem some tambem os botoes cancelar...

[@nicpeters3306]

Não tem continuação?

[@alexmedeiros5610]

tens como criar um código em HTML e Java Script aonde contenha um formulário simples com nome, telefone e e-mail, e que esses dados sejam puxados e va para um banco de dados

[@julianaaigueira4563]

Olá Professor Matheus. Quero comprar o curso da continuação do projeto. Entrei na comunidade para conhecer e vi que tem muitos cursos interessantes que já separei aqui pra mim. Mas tbm queria dar continuidade a esse projeto. Obrigada. abraços!

[@MatheusBattisti]

É o formação front end 😀

[@ivymetzker4225]

Fantáastico professor! Obrigada pela aula ✨✨

[@sheecklerlol]

Fala Matheus, engraçado que fiz todo o projeto seguindo o tutorial, mas não consegui fazer a edição do título antigo, mudei algumas o nome de algumas variáveis e classes para fazer mais sentido para mim. mesmo inserindo: editInput.value = todoTitle; oldInputValue = todoTitle; ele já me devolve um erro no console dizendo que não tem como setar as propriedades value, como resolvo? --> scripts.js:83 Uncaught TypeError: Cannot set properties of undefined (setting 'value') at HTMLDocument. (scripts.js:83:28)

[@danilohermannf]

onde eu consulto as classes do font awesome para saber o que tenho disponível para uso?

[@reuelsiIva]

site do font awesome

[@danilohermannf]

@@reuelsiIva eu imaginei mesmo, mas não achei rs

[@rafaelluz1021]

seu conteúdo é muito top

[@hansleygladberg]

Eu só tive um problema que vou tentar resolver, ao editar 2 tarefas com o mesmo nome, ele edita os 2 já que não existe ID. Tem uma forma de criar um ID aleatório para cada item? (a título de estudo)

[@julianomueloschat7149]

Após o cronônometro, agora estou nesse form com localStorage, mais para frente quero ver se acho alguma aula com db.

[@MatheusBattisti]

show Juliano!

[@brunosalgadoti]

Isso ai professor!!!!

[@MatheusBattisti]

Valeu Bruno!

[@lidiajulia3258]

Poderia aproveitar mais o espaço da ide e digitar dez linhas de códigos e depois subir ,isso facilitaria na hora de tirar print ,já que só se consegue tirar print a cada cinco linhas .

[@pedroian4014]

OMG, it really worked. Thank you so much!!

[@gabrielpriston]

Thank you so much Sensei! You are a blessing!

[@lucianofranco5126]

Parabénsssssss

[@rguilhermelins]

Olá metheus, ótimo vídeo, realmente um exercício muito bom :))))) ele vai ter a continuação ?? nesse aqui ele não finaliza todas as funcionalidades... Abraço

[@brenobcsilva]

Valeuu professor!!

[@MatheusBattisti]

de nada Breno!

[@felipemartins4070]

como eu adicionaria um banco de dados nesse processo?

[@rafaelaraujo4610]

Ótima didática

[@MatheusBattisti]

valeu Rafael!

[@brenobcsilva]

Muito bom!!

[@MatheusBattisti]

valeu Breno!

[@tainafarias123]

46:28 edit button

[@kleinpapai]

brabo demais !!!!

[@lenorafael5935]

o meu font-aweasome não vai de forma alguma, aff

[@lyrisnunes3982]

sofro com a mesma coisa kk

[@jaquemoyses2807]

como q ele faz pra digitar e transformar numa div?

[@jhonatanleandro2436]

Ele coloca um "ponto" na frente do que nome da classe dessa div, ex: .exemplo

[@ramonvinicius3498]

Fiz em React. Manipular o DOM diretamente dá muito trabalho.

[@curtiuseucomentario6203]

Realmente, no react é mais simples, mas a proposta é outra kkk

[@rodolforodexrodox]

que extensão é essa que identa e coloca os ; nas linhas quando vc salva?

[@danilohermannf]

é o prettier

[@uendelpimentel]

Poxa... Nao consigo acompanhar a inserção dos códigos, a resolução ta muito ruim....

[@DAlves-hx1px]

Uma boa ideia de projeto seria uma páginação no React

[@Alberico482]

Muito bom.

[@MatheusBattisti]

obrigado Albérico!

[@PessoaseTecnologia]

Não estou conseguindo linkar o css no html!

[@lyrisnunes3982]

professor o seu curso não terá black friday ?

[@MatheusBattisti]

tá rolando sim Lyris, me manda um whats: wa.me/554899876826?text=Tenho%20uma%20d%C3%BAvida%20sobre%20a%20Comunidade

[@TrashCanSystem]

Galera esse projeto é bom mas está incompleto, so pra deixar avisado de antemão mesmo

[@douglasmiguel3014]

cade o resto do video ensinando a salvar e a ferramenta de busca?

[@paulosreis51]

Não vai ter parte 2?

[@sacuLuoS]

Muito bom !

[@_outliermilionario]

Boa noite, estou aprendend. Não consegui carregar a imagem de fundo kkk. Tentei de tudo que é jeito.

[@xoopen]

Mesma coisa por aqui

[@xoopen]

Fazendo fora do "Live Server" funcionou aqui

[@felipep1021]

Muito bom amigo

[@tk-bc1qv]

Tenho uma pequena dúvida, tô começando agr na programação já fiz uma calculadora e uma lista de tarefa simples, será q assistir esses tipos de vídeo do pessoal fazendo as coisas ajuda a evoluir ou é melhor fazer td sozinho.??

[@MatheusBattisti]

ajuda, com toda a certeza, mas crie seus próprios depois