Criando CRUD Responsivo com JavaScript (Projeto de Cadastro)
Вставка
- Опубліковано 12 вер 2024
- Nesse projeto vamos criar uma aplicação de CRUD, utilizando HTML, CSS e JavaScript
💻 Repositório: github.com/Wil...
================
CURSOS QUE INDICO:
Full Stack Web PRO do zero ao avançado
hotm.art/Full-...
React Native do zero ao Avançado
hotm.art/React...
Curso de Node.js, React e React Native
hotm.art/Curso...
Curso de Node.js (Celke)
hotm.art/curso...
Pacote Full Stack
hotm.art/Pacot...
Curso Criando Apps de I.A
hotm.art/curso...
Curso de Flutter Completo
hotm.art/Curso...
Curso de Node.js (Danki Code)
hotm.art/curso...
================
Instagram de Tecnologia:
/ will_programmer
Linkedin:
/ william-l-9b6625102
![HTML e CSS - Aprenda a criar 5 layouts de sites mais comuns na Internet [FLEXBOX]](/img/n.gif)
Muito bom, antes eu n entendia nada, mas depois desses conhecimentos eu to ficando muito bom, valeu por compartilhar essa sabedoria com a gente!
Excelente didática, parabéns! Fico no aguardo de mais conteúdo.
ta de sacanagem né? Didatica horrivel... Deve ser amigo haha
Excelente :)) esse jeito de explicar os projetos e so colando os códigos poupa muito tempo!! bom d+
Muito obrigado pelo feedback :D
Nossa muito obrigado! Nunca vi um CRUD tão fácil acontecer! Estava precisando desse vídeo pra saber em que nível estou, e no caso eu entendi tudo 🎉
obrigado vc salvou meu tcc🙏🙏🙏🙏 monstruoso demaissssss, codigo limpo, bonitooo
Parabéns mano, simples e direto, muito bom mesmo!
Muito obrigado pelo feedback :D
O vídeo é bom,porém se vc fosse fazendo uma linha de código e falando o que akilo faz ao invés de só colar seria muito melhor
Pelo que eu entendi não é tutorial, é só ele mostrando fazendo mesmo
Sensacional, projeto bem simples de entender a logica
Muito obrigado pelo feedback :D
Excelente ! Muito Bem Explicado ! ! Parabéns pelos vídeos ! ! !
Muito obrigado pelo feedback :D
Muito obrigado, os seus videos tem me ajudado bastante
Foi boa a intenção, mas não aprendi nada!!! Explicação muito rápida, copiando e colando, nao entendi nada!
Também não aprendi nada, ele cola o código kkkkk
Realmente é um formato que precisa ter um pouco de conhecimento já em javascript para não ficar muito perdido. Mas ao ir vendo, você começa a entender cada vez mais, experiência própria kk
Da pra entender bem a lógica, mas precisa entender melhor JS. Se realmente não tiver um conhecimento básico não vai entender. Básico pq oq vi no vídeo foram elementos e funções com métodos básicos mesmo. Mas concordo que, se fizesse num formado digitando o código e explicando linha por linha seria muito mais didático. Podia fazer isso apenas com o JS mesmo. Ficaria um video longo mas seria um ótimo conteúdo
@@lazaro-gomes99 pra quem tá iniciando, como eu, é um terror mesmo kkkkkkkkkk
Estuda mais JS q tu entende q explicação 👍🏽
vir aqui pra mim foi basicamente, entrar no github, copiar e colar e tá pronto!
Eu gostei.
Mas você poderia fazer um vídeo explicando paso a Paso as instruções do arquivo .já? Por favor
Valeu pelo feedback, vou anotar.
ótima didática, gostaria de saber como seria se fosse gravar em um banco de dados
Tenho um projeto Full Stack aqui no canal que grava no MySQL
parabéns, você é demais!!
Muito obrigado 😃
Obrigado por compartilhar esse conhecimento!
Eu pequei o css e escrevi a mãos. Isso faça em pensar nas propriedades que estão sendo inseridas.
Qual é a vantagem de CRUD no localStorage?
Obrigado meu Nobre! Bem atual.
Muito obrigado amigo!!! Abriu a mente para o JS. Tmj!!!
Obrigado pelo feedback :D
QUE VIDEO TOPPP IRMÃO
Muito obrigado procurei por um tempão saporra
show tem alguma aula ensiando como fazer a integração com o banco de dados do firebase???
Não com esse projeto, mas tenho alguns aqui no canal que integra com o firebase
Tem a possibilidade de arquivar esses dados em um txt ou em um banco?
Muito bom!!!! Vou usar, mas estou tentando usar um CSV. Poderia dar umas dicas.
Valeu.
onde fica esse banco de dados? é do js?
o localStorage é um armazenamento local que os navegadores tem, para acessar, basta dar um f12, ir na aba Application, e vai ter a sessão de storage.
Tipo, no clicar em incluir ele já geraria automaticamente um relatório em Excel
Gostei do Projeto e da explicação, eu não entendi foi a parte do get, set , json, for each, mas é por que eu nunca estudei essa parte ai de javascript , eu vou estudar ela separado e volto pra fazer de novo o projeto por que as outras coisas eu já estudei .. mas se tu puder me dizer o por que de ter usado o json eu lhe agradeço..
E aí Pablo, beleza? O armazenamento local tem que ser feito em string (set), daí pra eu pegar para reutilizar (get), eu tenho que converter em JSON (que me da a estrutura) para percorrer cada item no for each.
@@will_dev muito obrigado pela explicação e pelo conteúdo excelente. Já me inscrevi no canal
Ótimo vídeo! meu maior desafio vai ser entender as funções js agora, vou tentar mastigar cada uma pra entender melhor. Tu usou algum processo para startar esse projeto nesse ambiente? a url 127...
Obrigado pelo Feedback Leonardo! Para startar usei a extensão live server do Visual Studio Code.
Estou com uma duvida , a parte do java scripts meu vistual estúdio code não quer ler ou entender , quando eu vou clickar aparece mover sabe , essa e aparte de editar ou excluir no canto direito onde começa" tr inner html" pode me ajudar?
Acho que a nova atualização não usa mais esse td
mn tô qnd mudu o Index lasca td, como posso resolver isso? preciso urgente dessa resposta
Brother, tem como fazer interagir com banco de dados? Tipo, quando insere uma nova pessoa, aí aparece uma nova linha na tabela e quando exclui ela desaparece, tem como?
Tem sim, só substituir a lógica feita no localstorage para o banco desejado.
@@will_dev Poderia fazer um vídeo sobre? Acho que seria bacana
@@brgu1t4rr1st6 descobriu algum video legal sobre?
@@math1069
Na verdade achei, só que o cara fez com php
Muito bom seus projetos.
Muito obrigado 😃
Por nada!!!
Tem algum video integrando com back end? No qual as funcoes CRUD vem do Back
Sim, meu último vídeo fiz um crud Full Stack
como sera que faço para criar um relatorio (excel) dos dados que esta registrado
pretendo trazer um vídeo com essa questão :)
Você é top!
Valeeu :D
Uma duvida, tem como mudar a lógica pro ultimo lançamento sempre cair na 1° linha da tabela?
Tem sim, só colocar uma ordenação (.sort) no array que renderiza essas linhas
@@will_dev Seria pedir demais pra vc me passar certinho aonde eu devo colocar certinho, ou como ficaria o código? Estou estudando e não entendo muita coisa kk
Good
Muito Bom!!!
Valeeu :D
Fala will, blz?
Obrigado pelo video, ajudou bastante. Uma duvida, e se inves de abrirmos o modal ao clicar em editar fôssemos direcionado a outra pagina contendo apenas a tela de ediçao. Como fariamos para nessa nova pagina sabermos que estamos de fato editando o usuario que foi clicado?
Agradeço o feedback. Então, a ideia seria a mesma, passar o id ou alguma info do item por parâmetro pra indicar que é uma edição, e as demais informações do item
@@will_dev Show..obrigado
muito bom, mas tem alguma ideia do pq ele nn funciona com o bootstrap ?
Tenta mudar os links de importação do Bootstrap
Will,
Uma dúvida para fazer o armazenamento dessas informações no Banco de dados, preciso usar o Node JS, ou com esse script js consigo fazer a conexão?
Com o script já é possível
@@will_dev como isso seria possível no lado do client?
Olá Will Dev, muito obrigada pela aula. Eu tentei seguir os teus passos e criei outras tabelas mas quando preencho o formulário envia-me os dados para a primeira. Sabes me dizer o que se passa por favor?
Olá, agradeço seu feedback. Tem que mudar o nome do localstorage para cada nova tabela
@@will_dev Muito obrigada mais um vez. Funcionou. Mudei o Localstorage😁
Como faço para adicionar um banco de dados?
Muito bom o projeto.
Opa, de uma conferida na playlist "fullstack" aqui do canal, que tenho um projeto semelhante com banco de dados.
era tudo q eu precisava, agora ensina como conectar esse mesmo projeto a um banco de dados usando php e mysql.
Agradeço a sugestão 😃
Nescessita de alguma extensão?
não, apenas para rodar eu uso o live server
perfeito, faltou apenas você dar um zoom na hora de digitar os codigos, parabéns
Muito obrigado pelo feedback 😃
Como posso conectar esse projeto a uma base de dados Oracle fazendo o CRUD na tabela de lá, ao invés do Local Storage?
eu tenho alguns exemplos com o firebase e com o mysql, se quiser dar uma conferida
Poderia complementando esse vídeo salvando esses dados em uma planilha de Excel? (Relatório)
Massa, boa sugestão
Muito top
Valeeu
Ess goLive como usa e aonde statar
É uma extensão do Visual Studio Code, basta ir nas extensões do Visual Studio Code, procurar por Live Server e instalar. Ele é bom para rodar alguns projetos em JavaScript.
Wiilllllllllllll show da um help ... tenho curtido teus videos demais... vc tem algo no canal ou conheça algum tutorial que mostre a criação de uma banco de questoes com respostas em javascript? é tranquilo de fazer?... quero colocar as perguntas e respostas, e ao clicar num botao "simular", a tela renderiza as questoes randomicamente, e apenas seleciono a opção...e só no final, clico em "REsultadoS"..e sai a nota....muito dificil??
Muito obrigado pelo feedback! Acredito que o banco de questões é tranquilo de fazer, agradeço a sugestão :D
como que cria um projeto para controle de entrada e saida de estoque e financeiro ?
Olá, tenho um projeto financeiro e de estoque no canal
Muchas gracias me funciono ¿donde se guardan los datos?
Agradeço o feedback! São armazenados no localStorage do navegador
O código é ótimo,o único problema é que n dar pra usar mesclando com outros projetos
fiz acompanhando e nao funcional. depois apaguei tudo , e copiei e colei do seu repositório. Tambem não funcionou
Que estranho, tá dando algum erro?
@@will_dev descobri que eu tava abrindo em forma de Gerenciador de Soluções - Leitura de Pastas. Por isso não rodava.
@@asmgutinho olá. sou iniciante e o meu tambem nao esta funcionando. como voce descobre que esta abrindo em forma de gerenciador de solucoes?
@@dropcas8275 quando você for na pasta onde estão os arquivos. Você procura o arquivo no formato slc, e dá 2 clicks nele.
🚀🚀🚀🚀
Esta bom, Mas é para avançado, uma pessoa que procura ainda aprender sobre HTML CSS e JS não entende nada não. No mais parabéns.
Realmente é um pouquinho mais avançado, mas ao escrever já ajuda a entender melhor. Valeeu
Opa, tranquilo, usei o seu crud pra tentar adaptar no meu projeto, refiz algumas partes do CSS, mas estou com problemas nos itens. Você tem no vídeo que são Nome, função e salário e eu preciso de 4. Nome, email, salário e data de admissão. Simplesmente criei eles onde achei que daria certo. Porém reparei que dentro do modal apareceu tudo correto. O problema é que dentro da function que cria o tr dentro do tbody o meu não cria, fica vazio, alguém consegue me ajudar??
Opa, conseguiu resolver? Ele retorna tá retornando no map?
Opa, consegui sim ! Tiveram algumas coisas que adaptei errado. Obg ! seu vídeo me salvou !@@will_dev
boa noite amigo! o meu codigo esta dando erro no script.js sabe me informa oq rolou?
Erro: ':' esperado.ts(1005)
Olá Walyson, sem olhar o código fica difícil, mas recomendo acessar o repositório que deixei na descrição do vídeo, e comparar o código para ver o que tem de errado.
Eu fiz um teste copiando todo seu código que vc deixou disponível porém tava dando o mesmo erro! Não tá dando pra imputar nem excluir
Agradeço o conteúdo will, pode me explicar a logica do if ao clicar fora do modal,
if (e.target.className.indexOf('modal-container') !== -1) {
modal.classList.remove('active')
}
como funciona isso, o index diferente de menos 1, gostaria de entender
o indexOf basicamente é uma forma de verificar se o elemente existe, nesse exemplo, se clicar fora do modal, onde não existe, ele vai fechar.
Para quem está iniciando assim como eu recomendo esse vídeo: ua-cam.com/video/_HEIqE_qqbQ/v-deo.html. É com localstorage também mas muito detalhado. Desculpa Will mas gosto de ajudar as pessoas que estão passando pela mesma dificuldade que eu. Seu vídeo é muito bom porém é muito avançado para iniciantes.
muito god