Veja como criar seu primeiro CRUD funcional usando apenas HTML, CSS e JavaScript puro. Ideal para iniciantes que querem praticar lógica, DOM e localStorage.
Um CRUD é um dos primeiros projetos que todo programador precisa criar. O nome vem de Create, Read, Update, Delete — as quatro operações básicas de manipulação de dados.
Neste tutorial, você vai aprender a fazer um CRUD simples com JavaScript puro, sem frameworks, salvando os dados localmente com localStorage.
Ideal para quem está aprendendo frontend e quer entender a lógica de interatividade no navegador.
📁 Estrutura do projeto
crud-js/
├── index.html
├── style.css
├── script.js
🧱 HTML: estrutura da interface
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>CRUD Simples</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Cadastro de Nomes</h1>
<input type="text" id="nome" placeholder="Digite um nome" />
<button onclick="adicionar()">Adicionar</button>
<ul id="lista"></ul>
<script src="script.js"></script>
</body>
</html>
🎨 CSS básico (opcional)
body {
font-family: sans-serif;
max-width: 500px;
margin: 50px auto;
text-align: center;
}
input {
padding: 8px;
width: 70%;
margin-bottom: 10px;
}
button {
padding: 8px 16px;
background-color: #0077cc;
color: white;
border: none;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
margin: 6px 0;
}
⚙️ JavaScript — lógica do CRUD
let nomes = JSON.parse(localStorage.getItem('nomes')) || [];
function renderizarLista() {
const lista = document.getElementById('lista');
lista.innerHTML = '';
nomes.forEach((nome, index) => {
const item = document.createElement('li');
item.innerHTML = `
${nome}
<span>
<button onclick="editar(${index})">✏️</button>
<button onclick="remover(${index})">❌</button>
</span>
`;
lista.appendChild(item);
});
}
function adicionar() {
const input = document.getElementById('nome');
const nome = input.value.trim();
if (nome === '') return;
nomes.push(nome);
input.value = '';
salvar();
renderizarLista();
}
function editar(index) {
const novoNome = prompt("Editar nome:", nomes[index]);
if (novoNome !== null && novoNome.trim() !== '') {
nomes[index] = novoNome.trim();
salvar();
renderizarLista();
}
}
function remover(index) {
nomes.splice(index, 1);
salvar();
renderizarLista();
}
function salvar() {
localStorage.setItem('nomes', JSON.stringify(nomes));
}
renderizarLista();
🔄 O que esse projeto te ensina
- Manipular DOM com createElement, innerHTML, appendChild
- Trabalhar com array e forEach
- Usar localStorage para manter dados persistentes
- Criar funções reutilizáveis e interativas
💡 Possíveis melhorias futuras
- Validação de entrada com mensagens de erro
- Ordenar a lista alfabeticamente
- Adicionar campos como “e-mail” ou “telefone”
- Integrar com backend real (Node.js ou Firebase)
- Criar interface com modal de edição
📌 Dica para iniciantes
- Publica seu CRUD no GitHub Pages.
- Mostra que você consegue aplicar o que aprendeu e vai evoluindo aos poucos.
- Não precisa ser bonito, precisa ser funcional.
Criar um CRUD com JavaScript puro é uma excelente forma de treinar lógica, eventos, manipulação de dados e persistência local — tudo isso sem depender de bibliotecas.
Praticou isso? Você já deu um passo gigante para entender como funcionam os sistemas que usamos todos os dias.
Pensar como programador não depende de saber frameworks, mas de entender como resolver problemas passo a passo.
É um músculo. E você fortalece praticando.
Então bora praticar. Rabiscar. Tentar. Errar. Corrigir. E publicar.
📌 Mais exercícios e projetos em 👉 https://casado.dev
Se tiver alguma vaga, evento ou treinamento e quiser compartilhar, me chame na DM do Instagram @casadodev 🫡
Acompanhe as novidades no nosso canal do Casa do Dev 👉 Canal da Casa do Dev no WhatsApp
Caso queira se especializar em programação, invista em um curso com acompanhamento, e indico este Pacote Fullstack, ele é um curso super completo e vai te ajudar a aprender do zero, e você vai ter a oportunidade de ter as habilidades e práticas que o mercado procura.
Comece do absoluto zero e prepare-se para o mercado de trabalho com um curso que vai te ensinar desde lógica de programação até criar projetos e colocar no GitHub!
Veja nossas indicações de cursos de programação que compartilhei para ajudar em sua carreira, e também participe do nossos grupos da Casa do Dev. https://casado.dev/cursos/
Espero que você tenha achado interessante de ler. Ajude a manter nosso conteúdo, patrocine um conteúdo ou pague um cafézinho para este colega Dev que sempre busca compartilhar um pouco das experiências e conhecimento com vocês. Chave PIX: [email protected]
Fiquem bem.
Cirino, Casa do Dev
Criador de conteúdo Tech e fundador da Casa do Dev
[ Vagas para profissionais de Tecnologia ] https://mercadodeti.com.br
[ Instagram ] https://instagram.com/casadodev
[ Twitter ] https://twitter.com/casadodev
[ Home ] https://casado.dev
Nossa Newsletter
Você receberá conteúdos exclusivos que poderão te levar para o próximo NÍVEL na carreira!
Artigos Relacionados
Sobre o Autor
Sou o Cirino. Pai, Marido, criador de conteúdo e Mentor de Carreira Tech voluntário para apoiar pessoas que querem entrar no mercado de tecnologia,
0 Comentários