No video

Quadro de Tarefas - Arrasta e Solta com JavaScript (Drag and Drop)

  Рет қаралды 4,044

Manual do Dev

Manual do Dev

2 ай бұрын

Nesse vídeo vamos criar um quadro de tarefas estilo o Trello, onde a gente vai poder criar, arrastar e soltar tarefas em colunas! Tudo isso feito com HTML, CSS e JavaScript puro!
Espero que vocês gostem!
Repositório do Projeto:
github.com/man...
Projeto online:
manualdodev.gi...
#javascript #html #css

Пікірлер: 49
@ManualdoDev
@ManualdoDev 2 ай бұрын
Dá uma olhada em como ficou o projeto online: manualdodev.github.io/quadro-de-tarefas/
@gatao2791
@gatao2791 2 ай бұрын
Muito bom!! Gostaria de deixar como sugestão de projeto para próximos vídeos um sistema de autenticação (back e frontend)
@ManualdoDev
@ManualdoDev 2 ай бұрын
Esse é show! Já deveria ter feito…
@cesaraugusto8085
@cesaraugusto8085 Ай бұрын
Nunca aprendi tanto sobre DOM quanto agora. Eu coloquei um evento de doubleclick no card pra abrir edição de texto novamente, e adicionei um evento "contextmenu" pra apagar um card criado com o botão direito do mouse.
@aostc
@aostc 2 ай бұрын
Muito bom! Simples, explicativo e de fácil entendimento
@coutoff1327
@coutoff1327 2 ай бұрын
como esse cara não tem milhões de inscritos, que conteúdo valioso!!
@ManualdoDev
@ManualdoDev 2 ай бұрын
Muito obrigado pelo apoio, amigo! Tamo junto!
@coutoff1327
@coutoff1327 2 ай бұрын
@@ManualdoDev foque mais no canal e não nos deixe aqui sem conteúdo, você está sendo muito importante, principalmente pra mim
@JBPaizz
@JBPaizz 2 ай бұрын
Ficou bem legal 👏🏻👏🏻👏🏻
@ManualdoDev
@ManualdoDev 2 ай бұрын
Valeeeu, Jean! Tamo junto!
@Arthur-bq5uk
@Arthur-bq5uk 2 ай бұрын
Excelente vídeo! Uma das melhores didáticas que já vi no KZfaq. Sugestão de projeto: criar uma roleta que simule a experiência real. O usuário poderia clicar e arrastar para girá-la, com a rotação variando conforme a velocidade do movimento do mouse. Além disso, a roleta se adaptaria sempre ao número de itens dentro dela.
@ManualdoDev
@ManualdoDev 2 ай бұрын
Gostei da ideia em, Arthur! Bem desafiador… acho que num sei fazer isso não kkkk Mas vamo tentar!
@Arthur-bq5uk
@Arthur-bq5uk Ай бұрын
@@ManualdoDev Confiamos no seu potencial, haha
@cristianganzer2057
@cristianganzer2057 2 ай бұрын
Parabéns pelo conteúdo, muito legal!
@ManualdoDev
@ManualdoDev 2 ай бұрын
Valeeu, Cristian!!
@lucasmatos8239
@lucasmatos8239 2 ай бұрын
O conteúdo do seu canal é muito criativo e de alta qualidade! Se possível grava alguns conteúdos nesse estilo usando tailwind!
@ManualdoDev
@ManualdoDev 2 ай бұрын
Boa, Lucas! Tailwind é legal demais!
@vangarti7888
@vangarti7888 2 ай бұрын
"show demais" eu AMO Parabens pelos vídeos!!! Sucesso
@ManualdoDev
@ManualdoDev 2 ай бұрын
Muito obrigado pelo apoio, amigo! Tamo junto!
@fabricio.damasceno
@fabricio.damasceno 2 ай бұрын
Gostei da proposta. Ganhou um inscrito. Legal mesmo seria evoluir o projeto com login e persistencia de dados no banco de dados.
@ManualdoDev
@ManualdoDev 2 ай бұрын
Boa ideia, em!
@geraldocoelho2392
@geraldocoelho2392 2 ай бұрын
@ManualdoDev que bom, voltando a ativa. Vídeo sempre é nota 10, like antes.
@ManualdoDev
@ManualdoDev 2 ай бұрын
Vaaleeeeu! Tamo junto!
@FelipeSchner
@FelipeSchner 2 ай бұрын
Muito legal!! baita aprendizado! Muito bom!!👏👏
@ManualdoDev
@ManualdoDev 2 ай бұрын
Que bom que gostou, Felipe! Valeeu demais pelo apoio! Tamo junto!
@dener.criarbr
@dener.criarbr 2 ай бұрын
Suas aulas são top parabéns e gostei do novo logo ficou bonitão
@ManualdoDev
@ManualdoDev 2 ай бұрын
Valeu demais, meu amigo!
@wlr6210
@wlr6210 2 ай бұрын
Show, a um tempo fiz em React, mas não consegui adaptar o drag drop no mobile, teria alguma dica ?
@herbertcarvalho4806
@herbertcarvalho4806 2 ай бұрын
top! tava precisando desse vídeo
@N0TZ3R0
@N0TZ3R0 2 ай бұрын
Fantástico 👏
@super_resultados
@super_resultados 2 ай бұрын
faz das aplicaçoes de nós de ligaçao estilo flowchart Por favor
@ManualdoDev
@ManualdoDev 2 ай бұрын
Esse parece bom, em!
@dpescador
@dpescador Ай бұрын
Muito bom, ganhou um inscrito. Poderia ter um timer ou data de validade, se o card estiver vencido a legenda ou fica vermelho, se estiver finalizado fica azul e depois de um tempo oculta o card.
@ManualdoDev
@ManualdoDev Ай бұрын
Boa ideia em! Ficaria show
@AgemGames
@AgemGames 2 ай бұрын
Muito top
@Madmax_trader
@Madmax_trader 2 ай бұрын
Poderia fazer vídeo de um curso apenas de javascript puro, as vezes muitos tem um pouco de dificuldade para pegar assim como eu, eu peguei HTML e CSS bem, mais estou com bastante de dificuldade par pegar o JAVASCRIPT, como estou aprendendo por conta, talvez sua didática devia ajudar muito tanto eu como muitas outras pessoas... desde já agradeço 😄
@ManualdoDev
@ManualdoDev 2 ай бұрын
O curso de javascript já está quase todo escrito em! Em breve início as gravações! Vai ser legal demais
@lucianosiqueira4709
@lucianosiqueira4709 2 ай бұрын
Tem que mandar um projeto de node puro tbm sem framework,vanila top
@carlosalex7885
@carlosalex7885 2 ай бұрын
Muito obrigado pelo ótimo video, seria perfeito se vc implementasse a funcionalidade de criar as tarefas e salvar já diretamente em um banco e mesmo atualizando a page ou movendo elas para outra aba elas continuariam onde fossem deixadas, tentei fazer desse jeito uma vez e não consegui.
@ManualdoDev
@ManualdoDev 2 ай бұрын
É um desafio legal, em! Vou dá uma olhada!
@carlosalex7885
@carlosalex7885 2 ай бұрын
@@ManualdoDev seria muito da hora ver a lógica kk eu já tinha feito utilizando o firebase, mas não consegui fazer para deixar salvo quando mover de uma aba para outra.
@sorinhaaa
@sorinhaaa 16 күн бұрын
boa tarde Manual do Dev, sou iniciante e gosto de ver e analisar seus video e eu tenho uma pergunta, caso eu quisesse publicar esse site, nao para de fato ser um site apenas para ter acesso mais facil ou para outra pessoa usar, e eu fosse fazer um sistema de login para armazenar as tarefas que o usuário escreveu , eu teria que aprender e aplicar alguma linguagem de banco de dados né, que dai ja entraria um pouco no backend, como mysql por exemplo (pfv me corrija caso eu esteja errado) Obrigado pela atenção
@ManualdoDev
@ManualdoDev 16 күн бұрын
É isso mesmo! Você está certo. Aqui no canal tem um projeto full stack onde a gente faz um app de lista de tarefas, front e back com banco de dados e tudo, caso você queira dá uma olhada. Se você quiser melhorar um pouco também o projeto, poderia salvar as tarefas no local storage. Mas aí seria só para ficar salvo no navegador mesmo :)
@sorinhaaa
@sorinhaaa 16 күн бұрын
@@ManualdoDev ahhh beleza, top, vou dar uma olhada sim, muito obrigado
@viajante4386
@viajante4386 2 ай бұрын
Projeto bom mesmo!!! Mano me tira uma dúvida? Tu fez isso de primeira? Tipo sem parar pra raciocinar na lógica de cada etapa?
@ManualdoDev
@ManualdoDev 2 ай бұрын
Não mesmo! heheheh A primeira versão que fiz ficou bem feia e bem ruim até kkkkkk Eu sempre tento primeiro fazer funcionar de qualquer jeito sem se preocupar muito. Depois a gente vai melhorando, deixando mais bonito, tentando melhorar o javascript e tudo mais.. E eu pesquiso também, tá? Não lembrava de cabeça tooodos esses eventos de Drag and Drop do javascript.
@viajante4386
@viajante4386 2 ай бұрын
@@ManualdoDev Po cara valeu pela sinceridade. Eu estava me sentido burro. Por que eu pesquiso toda hora também e vejo a documentação. Meu primeiro projeto nunca sai bom, eu quebro a cabeça pra ir melhorando a lógica. Vendo seus vídeos eu penso: "Cara como ele faz isso tudo sem travar no raciocínio lógico?". Eu vejo seus vídeos e tento pensar na lógica antes de você falar. Ai você explica uma lógica bem fácil e eu penso: como não pensei nisso? Kkkkkk. Tua didática é muito boa mano, Parabéns!!!
@investindoemativos8690
@investindoemativos8690 2 ай бұрын
Estou tentando fazer uma interface gráfica, mas sempre dá erros. Estou começando ainda na programação. Seria mais ou menos assim: Criar um programa que corrija os erros ortográficos dos usuários, onde possa ser tanto inserido alguns tipos de arquivos tipo: PDF, DOC. E até mesmo possa ser digitado em um campo específico no programa, em seguida mostrar o resultado ao usuário, onde visualizar os erros, e a forma correta de ser escrita as palavras em questão.
@ManualdoDev
@ManualdoDev 2 ай бұрын
Esse é bem desafiador, em! Projeto legal. Vamos ter que ir por partes heheh
Please stop using px for font-size.
15:18
Coder Coder
Рет қаралды 115 М.
Why Is He Unhappy…?
00:26
Alan Chikin Chow
Рет қаралды 96 МЛН
WHO CAN RUN FASTER?
00:23
Zhong
Рет қаралды 27 МЛН
Son ❤️ #shorts by Leisi Show
00:41
Leisi Show
Рет қаралды 10 МЛН
Drag And Drop In Javascript Is Easy | Javascript Tutorial
11:17
Its time to stop the mock!
19:06
Fio's Quest
Рет қаралды 781
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 166 М.
Tesla Solar Roof Review: Was it Worth It?
30:27
Marques Brownlee
Рет қаралды 12 МЛН
JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue
12:35
How To Build Sortable Drag & Drop With Vanilla Javascript
22:22
Web Dev Simplified
Рет қаралды 329 М.
Como criar um Piano completo com HTML, CSS e JavaScript
1:05:41
Manual do Dev
Рет қаралды 13 М.
How To Build A Drag & Drop Kanban Board With JavaScript
21:00
Tom Is Loading
Рет қаралды 35 М.