Projeto JavaScript para iniciantes - Aprenda como criar um To Do List com HTML, CSS e JavaScript

Поділитися
Вставка
  • Опубліковано 26 сер 2024
  • Vou te ajudar com Programação: bit.ly/3TsEZ2O
    Aprenda a fazer um todo list com JavaScript, HTML e CSS.
    Faça esse projeto para adicionar ao seu portfólio e conseguir seu primeiro emprego como Programador.
    Código e Imagens: github.com/rod...
    Curso de HTML: www.youtube.co...
    Curso de CSS: www.youtube.co...
    Curso de JavaScript:www.youtube.co...
    VsCode: • DOMINE O VSCODE E AUME...
    💰 - Quanto ganha um programador?
    • QUANTO GANHA UM PROGRA...
    🚀- Aprenda a fazer um formulário simples com HTML + CSS e monetize isso
    • QUANTO GANHA UM PROGRA...
    Inscreva-se no Canal: bit.ly/3h1xtJ5
    ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
    Meus Links 👇👇
    🔥 Todos os meus Links: rodolfomori.co...
    🔴 Live toda Terça: go.rodolfomori...
    📸 Insta: @rodolfomorii / rodolfomorii
    🚀 Receba Dicas de Programação: go.rodolfomori...
    ‎‍👥 Fale com nossa equipe: go.rodolfomori...
    ‎‍🎓 Meu curso de Programação: rodolfomori.co...
    📚 E-book gratuito - Aprenda Programação do ZERO: go.rodolfomori...
    Criei este canal para ajudar você que quer sair do ZERO, iniciar sua jornada e se tornar um programador!
    Se já é um programador e quer evoluir na carreira de programação, também está no lugar certo, aqui você vai encontrar conteúdos relevantes que vão te ajudar!
  • Наука та технологія

КОМЕНТАРІ • 193

  • @canaldevclub
    @canaldevclub  Рік тому +2

    PARTICIPE DO EVENTO: go.rodolfomori.com.br/evento

  • @KaahAg
    @KaahAg 3 місяці тому +5

    Eu to chocada na qualidade desse vídeo, você foi gigante em passar esse conteúdo detalhadamente. Parabéns!!

  • @trabalhoonline-cb9ll
    @trabalhoonline-cb9ll 23 дні тому +1

    Primeira aula que realmente consegui fazer e deu certo o codigo. Obg foi incrível!!!!

  • @mateusgabriel7601
    @mateusgabriel7601 14 днів тому +1

    Muito bom o video melhor didática que já vi

  • @pedrocfreitas
    @pedrocfreitas Рік тому +11

    em nome de Jesus dessa vez quero entender.... já assisti 4 tutor de to do list e cada um faz um samba do piolho diferente. Eu já to endoidando tentando entender a lógica desse povo todo... E AGORA vamos lá pra mais esse tutor.

  • @carolfreitas7701
    @carolfreitas7701 Рік тому +12

    Melhor tutorial de To Do List que já vi. Parabéns pela didática!!!

  • @rafaelflores5181
    @rafaelflores5181 Місяць тому +2

    Muito bacana. Parabéns.

  • @antoniocammartins
    @antoniocammartins Місяць тому +1

    Consegui fazer tudo certo, mas vou assistir ao video mais umas veses. Obrigada

  • @debrinha5647
    @debrinha5647 Рік тому +6

    Esse vídeo me ajudou tanto que não faz nem ideia. Consegui ver na prática MUITAAAS coisas que já tinha visto na faculdade porém fiquei boiando, entendia os conceitos porém não conseguia visualizar como utilizar na prática. Além disso, foi o meu primeiro projeto com começo, meio e fim e estou muito feliz por ter conseguido, mesmo que seguindo seus passos!! Tentava criar algo do zero sozinha, mas sempre empacava. Parabéns pela didática e pelo projeto, foi o melhor ToDo List que eu já vi 🙏

    • @canaldevclub
      @canaldevclub  11 місяців тому +1

      Vamos pra cima, vai dar bom

  • @matheusrocha8037
    @matheusrocha8037 3 місяці тому +2

    Um dos melhores vídeos que já vi aqui no UA-cam. Parabéns, pela didática e pela dedicação pra fazer um conteúdo tão bem feito.
    No seu canal tem algum vídeo ensinando como posso fazer pra deixar o site disponível para qualquer pessoa?
    Parabéns de novo! ganhou mais um inscrito!

  • @johnatanchagas8243
    @johnatanchagas8243 Рік тому +6

    Que aula meus amigos, muito boaaa, enxurrada de conteúdo JavaScript e com didática incrível! Parabéns prof. Rodolfo Mori

  • @marlonprogamation
    @marlonprogamation 6 місяців тому +5

    para adicionarem o Alerta de Tarefa Vazia, faça o seguinte. NA FUNÇÃO JÁ CRIADA (adicionarNovaTarefa), FAÇA AS SEGUINTES ALTERAÇÕES:
    function adicionarNovaTarefa(){
    // Verificar se o campo de entrada está vazio
    if (input.value.trim() === ' ') {
    alert("Por favor, insira uma tarefa antes de adicionar!");
    return; // Retorna para evitar adicionar uma tarefa vazia à lista
    }
    // Adicionar a nova tarefa à lista
    minhaListaDeItens.push({
    tarefa: input.value,
    concluida: false
    });
    input.value = ''; // Limpar o campo de entrada
    mostrarTarefas(); // Atualizar a exibição das tarefas na lista
    }

  • @Rodskt
    @Rodskt 9 місяців тому +2

    Muito obrigado, gostei da metodologia, bem descomplicada! :) Aguardo mais tutoriais de aplicações como esta!!!

  • @jacksonrodrigues1090
    @jacksonrodrigues1090 Рік тому +4

    Sempre com uma didática impecável! sou fã demais!

  • @Jmarcia724
    @Jmarcia724 9 місяців тому +1

    Vídeo muito bommmm e prático, para quem não tem noção de certos conceitos com os exemplos e explicação dada consegue perceber a funcionalidade. 🙌🔥🔥 Melhor tutorial de to do list que já vi 👋👋👋👋

  • @gabmitnick7718
    @gabmitnick7718 3 місяці тому +1

    Vídeo sensacional! Têm muita gente que ver a duração do vídeo e acaba não assistindo tudo, mas cara.. é tanta informação legal que você aprende, a princípio aprendi algo no JavaScript aqui que nem em cursos que fiz foi ensinado! Parabéns pelo conteúdo.

  • @keliapriscila
    @keliapriscila 8 місяців тому +1

    Boa tarde, tudo bem! Gostei bastante da aula e conseguir ir até o final. Muito obrigada pelo ensinamento! Que Deus te abençoe muito!

    • @canaldevclub
      @canaldevclub  7 місяців тому

      Fico feliz em saber man! Tmjj

  • @rodrigoazevedo430
    @rodrigoazevedo430 6 місяців тому +1

    Excelente aula, aprendi muito com sua aula, vou consegui fazer muita coisa com base nesse conhecimento, parabéns pela excelente didática!

    • @canaldevclub
      @canaldevclub  6 місяців тому

      Fico feliz em saber man! Tmjjj

  • @user-rx1hh2uq4x
    @user-rx1hh2uq4x 4 місяці тому +1

    Gostei muito. Assim é que se explica fácil de entender. Muito obrigado, um grande abraço de Portugal

  • @carlosfarias5386
    @carlosfarias5386 Рік тому +2

    Fala meu querido, Rodolfo, Parabens pelo aulão, da primeira não consegui, mais dessa vez deu tudo certo

  • @_lucasdecarvalho
    @_lucasdecarvalho Рік тому +2

    Mano, essa aula explodiu minha mente, parabéns, ganhou mais um inscrito e um like 👏👏

  • @renatafreitas6174
    @renatafreitas6174 8 місяців тому +1

    Rodrigo, conteúdo muito bom! Muito obrigada por compartilhar seu conhecimento. Entendi muita coisa com você! Parabéns pela didática.

  • @gustavoevangelista-sy7vn
    @gustavoevangelista-sy7vn 3 місяці тому +1

    Ótima aula. Primeiro tutorial que consigo realmente seguir e fazer.

  • @StudyDev-if4mf
    @StudyDev-if4mf 9 місяців тому +1

    Muito bom esse video, Rodolfo. Você é fera, Parabéns! Só gratidão pelo conteúdo.

  • @joiltonbandgroupsantos8385
    @joiltonbandgroupsantos8385 Рік тому +1

    que aula show de bola muito boa 👏👏👏👏👏👏didática maravilhosa bem explicada ! top ✍

  • @matheusfuriatto5925
    @matheusfuriatto5925 2 місяці тому +1

    adorei a didática !

  • @professorwagnerlobo1467
    @professorwagnerlobo1467 Рік тому +1

    Mestre… tu é muito bom. Muito. Sério. Assisti teu vídeo agora e nunca vi uma didática tão fod@. Parabéns, meu nobre! Você tem o dom. Digo isso porque sou professor há mais de 15 anos. Parabéns
    Mais um inscrito e seguidor

    • @canaldevclub
      @canaldevclub  Рік тому

      Opa, valeu Professor. Ganhei meu dia com seu comentário!

  • @Sino12397
    @Sino12397 Рік тому +1

    Melhor video sobre to do list que ja vi até hj, parabéns pelo conteudo exelente! Aprendi muita coisa

  • @ProfJorgeNavarro
    @ProfJorgeNavarro 10 місяців тому +4

    Cara fui jogado para uma disciplina no final do ano nem sabia o que fazer com os alunos, teu video foi foda parabéns

  • @sergiodev8119
    @sergiodev8119 Рік тому

    @rodolfomori te admiro muito e lhe acompanho a algum tempo pois graças a você decidi mudar de carreira e venho aprendendo muito com suas lives Deus o abençoe sempre e um parabéns pra sua equipe que faz toda diferença

  • @mayconrocha8723
    @mayconrocha8723 3 місяці тому +1

    Sensacional!

  • @allanleite1986
    @allanleite1986 8 місяців тому +1

    No futuro eu espero conseguir criar meus próprios projetos sozinho... Muita boa a aula! Parabéns!!!

    • @canaldevclub
      @canaldevclub  8 місяців тому

      Booa man, vai conseguir sim. Bora pra cima 🚀

  • @iagooliveiramadara6931
    @iagooliveiramadara6931 Рік тому +1

    que vídeo incrível, vc é o melhor... fiz esse programa e implementei outras coisas tambem, muito obrigado.

  • @nilsonsantos518
    @nilsonsantos518 Рік тому +3

    Muito bom... parabéns professor.👏👏👏

  • @cryptosbrazil
    @cryptosbrazil Рік тому +2

    Muito bem explicado, parabéns estou acompanhando

  • @joelson091
    @joelson091 11 місяців тому +1

    Excelente explicação
    Fiz a aplicação do início ao fim, foi um grande aprendizado pra mim. Muito obrigado

  • @emanuelgomes7939
    @emanuelgomes7939 9 місяців тому +1

    tive um professor num curso que eu fiz que ele possuía a melhor didática que eu já vi e encontrando teu canal hoje você me fez relembrar ele. Parabéns, mano!

  • @RobertoTadeuBalilla
    @RobertoTadeuBalilla Рік тому

    Consegui fazer!! Confesso que precisei de ajuda do suporte em determinado momento, mas valeu cada segundo essa aula!! Muito obrigado!

  • @tenditudo6455
    @tenditudo6455 5 місяців тому +1

    Algum tempo atrás assisti uns 2 videos seu e nao curti.... sempre pulava quando o youtube recomendava. E hoje iniciou automático esse video, E POSSO DIZER: QUE VIDEO PERFEITO. Parabéns ganhou um seguidor e um like. 🎉🎉

  • @vitorpaes5439
    @vitorpaes5439 Рік тому +1

    Parabéns pela didática!
    Aprendi muito nesse vídeo.

  • @marsoliver6782
    @marsoliver6782 9 місяців тому +1

    show de bola! Demais mesmo! Valeu Rodolfão! 👍👍👍

  • @Anotaaibobao
    @Anotaaibobao 11 місяців тому +2

    Que canal bommmm

  • @brayanramonepunko
    @brayanramonepunko 8 місяців тому +1

    Aula muito boa! Aconteceu 2 dias antes do meu aniversário, queria poder ter a sabedoria pra voltar a estudar programação naquela época, assim talvez não teria acontecido uma coisa ruim que aconteceu na minha vida e que hoje têm me atrapalhado demais nos estudos.
    Mas enfim, aula boa e fiz ao mesmo tempo, ainda não consigo fazer sozinho, pensar direito, resolver os problemas, fico muito perdido, mesmo sendo do Dev Club, devo estar fazendo algo errado, parece que dou 1 passo pra frente e 2 pra trás.

  • @TioValler
    @TioValler Рік тому +1

    Meu video favorito a partir de agora, obrigado meu querido !

  • @lukassauro
    @lukassauro Рік тому +1

    Amando esse vídeo, e essa música de fundo perfeita!! Amo estudar escutando lofi

  • @jakenictor
    @jakenictor 3 місяці тому +1

    Incrível demais! Muito obrigado!

  • @adrianoborg
    @adrianoborg Рік тому

    Parabéns, Foi uma aula muito Boa. Obrigado por compartilhar esse conhecimento.

    • @canaldevclub
      @canaldevclub  11 місяців тому

      Valeu man, fico feliz em ajudar

  • @vivianezzt
    @vivianezzt 11 місяців тому

    poxa que didática excelente!

  • @SPFC-TRICOLOR633
    @SPFC-TRICOLOR633 7 місяців тому +1

    Excelente aula, muito bem explicado, parabéns!!!

  • @Everaldobass
    @Everaldobass Рік тому +1

    Excelente conteúdo, obrigado por compartilhar.

  • @wevertoncosta4883
    @wevertoncosta4883 Рік тому +1

    Adorei o resultado. Dicas valiosas nessa aula!!

  • @quizitocristiano1526
    @quizitocristiano1526 Рік тому

    Rodolfo você é um ótimo professor eu aprendi muitas coisas com você eu acho isso muito incrível

  • @JulioCesar-kp3sx
    @JulioCesar-kp3sx 11 місяців тому +1

    MUITO BOM CARA, PARABÉNS PELO CONTEÚDO !

  • @trindade8314
    @trindade8314 10 місяців тому +1

    Aula sensacional Rodolfo, obrigado!

  • @rogermaciel9076
    @rogermaciel9076 Рік тому +1

    Muito bem explicado! Parabéns!

  • @atrativapropaganda8183
    @atrativapropaganda8183 Рік тому

    Professor, que top... Adorei o tutorial... Na verdade, oq eu estava atrás mesmo, era de uma forma de editar o cabeçalho e o rodapé do site uma única vez, e essa edição atualizar automáticamente em todas as páginas do site... Essa video aula me abriu muito a mente pra isso... Obg

  • @gabrielssimao
    @gabrielssimao 9 місяців тому +1

    Graça a voce ja estou asquirindo mais conhecimento eu decidir me tornar um full stack pelo jeito escolhido certo a linguagem javascript eu desde pequeno mexo com pc estava endividar entre full stack ou desenvolvedor mobile

    • @canaldevclub
      @canaldevclub  9 місяців тому +1

      Fico feliz em saber man, tmjjj

  • @ivoabdoralgomesjunior9690
    @ivoabdoralgomesjunior9690 9 місяців тому +1

    Muito bem explanado. Parabéns!

  • @gabrielangelo6891
    @gabrielangelo6891 Рік тому +3

    Você faz programação ficar fácil kkkk bom dmais seu conteúdo

  • @leandrolemes3342
    @leandrolemes3342 8 місяців тому +1

    muito bom, parabéns, ótima didática

  • @williammartins4248
    @williammartins4248 19 днів тому +1

    top rodolfão

  • @JanaTannus
    @JanaTannus 9 місяців тому +1

    Muito boa didática!Parabéns!

  • @josielmaia9762
    @josielmaia9762 Рік тому +2

    Vamos lá

  • @camilamaximo1367
    @camilamaximo1367 8 місяців тому +1

    MUITO BOM ! conteúdo massa.

  • @raimundomartins7234
    @raimundomartins7234 Рік тому

    muito bom ainda adicionei um if para o input não ir vazio e um contador de caracteres para limitar a quantidade para nao quebrar e o contador mostrando quantos caracteres foi digitado e quantos ainda falta show😀👍

  • @erlonbarbosasena121
    @erlonbarbosasena121 Рік тому +1

    Fera demais parabens!

  • @Talis080
    @Talis080 Рік тому

    Parabéns! prof.Rodolfo pela explicação bem detalhada de cada linha de código e oque ela faz, aula bem didática e facil de aprender. Se possivel gostaria de ver esse mesmo projeto só que agora com React, desde já agradeço. Vlw!

    • @canaldevclub
      @canaldevclub  Рік тому +1

      Obrigado pelo elogio. Valeu man! Anotado a dica!

  • @cleverssonhames1867
    @cleverssonhames1867 10 місяців тому +1

    Tutorial super clarooo e muito bacana

  • @Rafael11piraju
    @Rafael11piraju Рік тому +1

    top demais vou participar do evento :D

  • @erikacristina2864
    @erikacristina2864 Рік тому

    Rodolfo do céu, agora vi o quanto sou crua na programação. demorei pakas, isso porque estava seguindo o vídeo. JS deu uma bugada na minha mente. Mas como prometi para mim mesma, não vou desistir.
    Antes de ir para o módulo carreira, queria me aprofundar um pouco mais. Fazendo esses projetos dá pra praticar bem os conceitos.
    Valeu!

    • @canaldevclub
      @canaldevclub  Рік тому +1

      Essa semana ta chegando módulo novo de JS pra vcs s2

  • @Mach4dao
    @Mach4dao Рік тому +1

    Ficou é massa, peguei a referencia como faz e fiz o meu kkkkk ta ficando top

  • @josileychiara8964
    @josileychiara8964 Рік тому +1

    Show...que aplicação linda

  • @investindoemativos8690
    @investindoemativos8690 2 місяці тому +1

    Em busca de transição de carreira e voltar ao mercado de trabalho!

    • @canaldevclub
      @canaldevclub  2 місяці тому

      Booa, isso ai. Aproveita e ja se inscreve rodolfomori.typeform.com/devclub-espera

  • @rafaelalavarenga7043
    @rafaelalavarenga7043 Рік тому

    Achei o o maximo, consegui ir até o final, excelente ditatica, só me deixou com a pulga atras da orelha no final pra tirar o adicionar vazio rs

  • @andersonmp5415
    @andersonmp5415 9 місяців тому +1

    Esse código me deu um norte... estou usando e modificando kkkkk mudei o input pra textarea, mudei as imagens para ícones.
    O que eu quero fazer é colocar valores de orçamentos prontos para enviar por Whatsapp. Quando clicar, quero que copie, pra poder colar no Whatsapp.
    Seria interessante vc fazer um vídeo também como criar categorias.

  • @verdadetalks
    @verdadetalks Рік тому +1

    Mano, muito boa a aula, aprendi muito 😊

  • @douglasalves9239
    @douglasalves9239 Рік тому

    top mano! Parabéns pelo video

  • @frangofrito9806
    @frangofrito9806 Рік тому +2

    Faz um projeto com orientação a objetos

  • @welligthonpaluchowski
    @welligthonpaluchowski 10 місяців тому

    muito bom

  • @igorluyz_
    @igorluyz_ Рік тому

    Brabo demais!!!!

  • @carloseduardograh5951
    @carloseduardograh5951 3 місяці тому +1

    Estou começando agora e por causa de uma " eu fiquei 40 min mechendo no js pra conseguir fazer aparecer o verde do botao check kkkkkkk :(

  • @kelver3158
    @kelver3158 Рік тому +1

    Top🎉

  • @Roquitos
    @Roquitos 11 місяців тому +1

    Salve mestre, consegui fazer o desafio de adicionar um if para verificar se o input está vazio

  • @edilsonjunior2328
    @edilsonjunior2328 Рік тому

    Simplesmente a melhor To Do List que já vi, parabéns pelo conteúdo! Rodolfo, como seria para colocar um alert e impedir que uma tarefa seja adicionada, caso esteja vazia? Confesso que tentei, mas travei nessa parte rsrs...fazendo isso o App vai ficar completo!!! Próximo passo vou tentar criar um botão para reiniciar toda a listagem. Obrigado pelo conteúdo F#d@ :D

  • @kira_San
    @kira_San Рік тому +2

    Que tal um jogo da velha para uma próxima aula ?

  • @Striker-ES
    @Striker-ES 8 місяців тому +1

    top demais

  • @th0m4sk4v1
    @th0m4sk4v1 7 місяців тому +1

    Mano, assisti uma hora de video que pareceram 15 minutos de tão prazeroso que é assistir na pratica kkkkkkk

    • @canaldevclub
      @canaldevclub  7 місяців тому +1

      Fico feliz em saber man!! Tmjj

  • @arnobiomata
    @arnobiomata 10 місяців тому

    excelente!!! Caso eu criasse outra lista de itens como faria pra poder clicar num item e conseguir arrastar pra mover para a outra lista ? tipo um quadro do trello

    • @canaldevclub
      @canaldevclub  10 місяців тому

      Ai é mais complexo rsrs vou anotar pra fazer um vídeo sobre isso!

  • @SuzianeCostadeSouza
    @SuzianeCostadeSouza 10 місяців тому

    Oi Rodolfo, obrigada pelo tutorial do projeto. Muito didático! Mesmo sem saber de alguns assuntos consegui fazer. Funcionou. Entretanto, ao digitar qualquer coisa na caixa "o que tenho que fazer", ele só aparece UNDEFINED, não grava a opção escrita. Poderia dar um help? Não encontrei como poderia fazer...

    • @canaldevclub
      @canaldevclub  9 місяців тому

      Oi, me chama no insta, me manda um print por favor!

  • @victorhugomartins2193
    @victorhugomartins2193 Рік тому

    mano, muito obrigado, esse video ficou muito bom
    bem explicado passo a passo e com direito a coach motivacional... amei
    eu tava querendo fazer a mesma coisa so que com um BD, como eu faria isso? pra usar por exemplo como um site com dominio pra 2 ou 3 pessoas usarem em conjunto?

    • @canaldevclub
      @canaldevclub  11 місяців тому

      Eu que agradeço. Com um DB seria um pouco mais complicado, mas aqui no canal tem vídeos de MongoDB e Node que podem te ajudar!

  • @Thiago-v5e
    @Thiago-v5e 6 днів тому

    algeuem sabe onde estao as imagem

  • @M4rtim_Gamer
    @M4rtim_Gamer 11 місяців тому +1

    ta incrivel mas como eu fasso as minhas tarefas aparecerem para todo mundo

  • @codigodeev
    @codigodeev Рік тому +1

    Top

  • @fabiolindeza17
    @fabiolindeza17 8 місяців тому +1

    Rodolfo, tenho uma pergunta, no meu computador com o liveserver funciona tudo bem tudo perfeito. Quando dou up para o meu hosting e tento pôr a funcionar via internet já não funciona. Alguma ajuda por favor? Obrigado

    • @will1555
      @will1555 4 місяці тому

      Seria bom se você disser o que não funciona, tipo, se o programa nem abre, se não funciona só o armazenamento no localstorage, etc.

  • @sergiodev8119
    @sergiodev8119 Рік тому

    top como sempre mas tenho uma duvida e no responsivo eu tenho que refazer no midia

    • @canaldevclub
      @canaldevclub  Рік тому

      Isso, no media. Aqui no canal tem um vídeo ensinando a fazer resposivo!

  • @eullerdiniz8597
    @eullerdiniz8597 Рік тому +2

    E aprender lógica de programação é uma boa ideia?

    • @canaldevclub
      @canaldevclub  Рік тому +1

      Com certeza. Inclusive tem vídeo no canal ajudando com isso!

  • @umprogramador2022
    @umprogramador2022 Рік тому +1

    const ShowDeBola = (BemDidaticoExplicativo);
    console.log(EstouAprendendoMuito);

  • @app2028
    @app2028 Рік тому +1

    Na hora que faz uma nova tarefa a nova tarefa ela não pega as imagens

  • @marcalinvest
    @marcalinvest 3 місяці тому +1

    COMO DEIXA O VS CODEEM PT???

    • @canaldevclub
      @canaldevclub  3 місяці тому

      Tem uma extensão chamada pt-br. Só instala-la!

  • @Henry_Nunez
    @Henry_Nunez Рік тому

    👍👍🔔