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

[@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!

[@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

[@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 ?

[@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!

[@MatheusBattisti]

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

[@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

[@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!

[@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

[@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

[@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.

[@mbs2488]

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

[@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 😂😂😂

[@marianacastro7360]

Cara, sensacional! Tua didática é massa

[@MatheusBattisti]

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

[@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

[@aricleciotanaarea5290]

Super aula. Vale 1M likes! 👍

[@andreleal7571]

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

[@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!

[@treinador_de_mentes]

Boa tarde amigos ! Como faz para participar do grupo ?

[@artemanga431]

Já pegou algum trampo?

[@ramonbarth4963]

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

[@gustavo3220]

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

[@luiznatan6502]

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

[@chrody]

TOP 100% MEGA. Ganhei meu dia assistindo isso.

[@ronysilva176]

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

[@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

[@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:

[@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!!!

[@MrCaliga]

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

[@eduardojose4105]

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

[@mayconrocha8723]

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

[@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?

[@lifeatweb]

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

[@RenataKlein]

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

[@MateusCustódio-j4m]

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

[@Hykarin]

Didática excelente, ganhou um inscrito e um aluno

[@matheusjean148]

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

[@MatheusBattisti]

valeu Matheus, em breve Node na Comunidade!

[@antonioandersonlopes253]

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

[@LEKYNH4]

Obrigada professor! Show!

[@MatheusBattisti]

obrigado tb por acompanhar! =)

[@lino1678]

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

[@MatheusBattisti]

obrigado Lino! =)

[@gustavosantana4805]

Você explica muito bem professor

[@MatheusBattisti]

valeu Gustavo!!

[@ensinandoparaaprender6553]

parabéns, fera de mais!!!

[@junnyhor]

Conteúdo muito bom. Sempre me ajuda.

[@MatheusBattisti]

valeu Raimundo!

[@thesims915]

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

[@antoniomiguel2460]

Bora, sempre a aprender...

[@MatheusBattisti]

bora!

[@pernalongak1823]

muito booom tmj matheus

[@MatheusBattisti]

valeu Pernalonga!

[@Gabriel9993]

Aula show, parabéns

[@MatheusBattisti]

valeu!

[@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?

[@GilneySouza]

Show, conteúdo TOP!

[@MatheusBattisti]

valeu Gilney!

[@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!!

[@ivymetzker4225]

Fantáastico professor! Obrigada pela aula ✨✨

[@Igor-nd3nf]

Muito bom, parabéns!

[@MatheusBattisti]

valeu Igor!

[@maximillian8]

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

[@rafaelluz1021]

seu conteúdo é muito top

[@Rafael-fh7js]

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

[@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!

[@lucianofranco5126]

Parabénsssssss

[@ConhecimentoDev]

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

[@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

[@brunosalgadoti]

Isso ai professor!!!!

[@MatheusBattisti]

Valeu Bruno!

[@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.

[@erenildafreitaa7304]

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

[@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); };

[@kleinpapai]

brabo demais !!!!

[@althi1688]

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

[@padilhasx7]

é um mistério até hoje

[@rafaelaraujo4610]

Ótima didática

[@MatheusBattisti]

valeu Rafael!

[@victormarques4167]

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

[@brenobcsilva]

Muito bom!!

[@MatheusBattisti]

valeu Breno!

[@pedroian4014]

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

[@brenobcsilva]

Valeuu professor!!

[@MatheusBattisti]

de nada Breno!

[@gabrielpriston]

Thank you so much Sensei! You are a blessing!

[@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?

[@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

[@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

[@nicpeters3306]

Não tem continuação?

[@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.

[@felipep1021]

Muito bom amigo

[@Alberico482]

Muito bom.

[@MatheusBattisti]

obrigado Albérico!

[@danilosantana3411]

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

[@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 😀

[@sacuLuoS]

Muito bom !

[@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

[@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!

[@DAlves-hx1px]

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

[@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)

[@lenorafael5935]

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

[@lyrisnunes3982]

sofro com a mesma coisa kk

[@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)

[@teteressouza8550]

Boa garoto

[@MatheusBattisti]

valeu!

[@rodolforodexrodox]

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

[@danilohermannf]

é o prettier

[@IrinaldoSoares]

Aqui não abriu a background image.

[@felipemartins4070]

como eu adicionaria um banco de dados nesse processo?

[@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 .

[@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

[@davidbarbosaguitar]

Top top!

[@joaoribeiro880]

Bora rodar as tecnologias fundamentais!!!

[@douglasmiguel3014]

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

[@PessoaseTecnologia]

Não estou conseguindo linkar o css no html!

[@matheusferreira3509]

Muito bom

[@MatheusBattisti]

valeu Matheus!

[@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

[@eudesgrey]

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