Aula 10 de 10

Projeto final: MiniGram

Construir, em partes, um feed com publicação, curtidas e exclusão.

projetoarray de objetosDOMeventos

// entendendo

Como funciona

Chegou a hora. Você vai construir o MiniGram: uma mini rede social onde dá pra publicar, curtir e apagar posts. Tudo que você aprendeu nas 9 aulas entra aqui:

Array de objetos — a lista de posts (aula 6 e 8)
Funções — pra desenhar o feed sem repetir código (aula 7)
Laços — pra percorrer os posts (aula 5 e 6)
DOM e eventos — pra aparecer na tela e reagir aos cliques (aula 9)

Vamos por partes. Cada exercício abaixo é uma peça do projeto — faça na ordem, porque uma depende da outra. No final você junta tudo na Parte 5.

A ideia central, e ela vale pra qualquer app que você fizer na vida:

// 1. os dados ficam num array
let posts = [ ... ];

// 2. uma função desenha a tela a partir dos dados
function desenharFeed() { ... }

// 3. quando os dados mudam, desenha de novo
posts.push(novoPost);
desenharFeed();

Isso se chama renderizar. É o mesmo princípio do React, do Vue e de praticamente todo app moderno. Você vai aprender o conceito antes da ferramenta.

// mão na massa

Agora é com você

Os campos abaixo estão vazios de propósito. Escreva, clique em Rodar e veja o resultado. Errou? Ótimo — leia o erro e tente de novo. (Atalho: Ctrl+Enter roda o código.)

Parte 1 — Desenhar o feed

Os posts já existem no array. Escreva a função desenharFeed() que percorre posts e monta um card na tela pra cada um. Depois chame a função.

a10e1.js

let posts = [
  { autor: "@ana", texto: "Primeiro post do MiniGram!", curtidas: 5 },
  { autor: "@bruno", texto: "Alguém entendeu o for?", curtidas: 12 }
];

let feed = document.querySelector("#feed");

function desenharFeed() {
  feed.innerHTML = "";

  // percorra os posts e crie um card para cada um

}

desenharFeed();

palco — o resultado aparece aqui

MiniGram

Preciso de uma dica

Dentro do forEach: crie a div, defina a classe e o conteúdo, e pendure no feed.
let card = document.createElement("div");
card.className = "mg-post";
card.innerHTML = `<div class="mg-autor">${post.autor}</div><div class="mg-texto">${post.texto}</div>`;
feed.appendChild(card);

Observação: A primeira linha feed.innerHTML = "" parece boba, mas é essencial: ela limpa a tela antes de redesenhar. Sem ela, cada chamada duplicaria todos os posts.

Parte 2 — Publicar um post

Agora faça o botão Publicar funcionar: pegar o texto do campo, adicionar um novo objeto no array e redesenhar o feed.

a10e2.js

let posts = [];
let feed = document.querySelector("#feed");
let campo = document.querySelector("#campo");
let publicar = document.querySelector("#publicar");

function desenharFeed() {
  feed.innerHTML = "";
  posts.forEach(function (post) {
    let card = document.createElement("div");
    card.className = "mg-post";
    card.innerHTML = `<div class="mg-autor">${post.autor}</div>
                      <div class="mg-texto">${post.texto}</div>`;
    feed.appendChild(card);
  });
}

// faça o botão publicar adicionar um post e redesenhar


desenharFeed();

palco — o resultado aparece aqui

MiniGram

Preciso de uma dica

Dentro do clique: monte o objeto { autor: "@voce", texto: campo.value, curtidas: 0 }, dê posts.push(...), limpe o campo com campo.value = "" e chame desenharFeed().

Observação: Perceba o ciclo: muda o dado → redesenha a tela. Você nunca mexe no card direto; mexe no array e manda desenhar de novo. Essa disciplina é o que separa código organizado de gambiarra.

Parte 3 — Curtir

Adicione o botão de curtir em cada card. Ao clicar, ele soma 1 nas curtidas daquele post e redesenha o feed.

a10e3.js

let posts = [
  { autor: "@ana", texto: "Bom dia, dev!", curtidas: 3 },
  { autor: "@bruno", texto: "JS é vida", curtidas: 8 }
];

let feed = document.querySelector("#feed");

function desenharFeed() {
  feed.innerHTML = "";

  posts.forEach(function (post, i) {
    let card = document.createElement("div");
    card.className = "mg-post";
    card.innerHTML = `<div class="mg-autor">${post.autor}</div>
                      <div class="mg-texto">${post.texto}</div>`;

    // crie o botão de curtir e faça ele somar 1 neste post


    feed.appendChild(card);
  });
}

desenharFeed();

palco — o resultado aparece aqui

MiniGram

Preciso de uma dica

Crie uma div de ações e o botão por código:
let acoes = document.createElement("div"); acoes.className = "mg-acoes";
let btn = document.createElement("button"); btn.textContent = "❤️ " + post.curtidas;
No clique: posts[i].curtidas++; desenharFeed();

Observação: O i do forEach é a chave: ele diz qual post daquela lista foi clicado. Sem ele, todos os botões curtiriam o mesmo post — um bug muito comum e muito difícil de achar depois.

Parte 4 — Apagar

Adicione um botão 🗑️ em cada card que remove aquele post da lista. Use splice.

a10e4.js

let posts = [
  { autor: "@ana", texto: "Post que pode ser apagado", curtidas: 3 },
  { autor: "@bruno", texto: "Este também", curtidas: 8 },
  { autor: "@caio", texto: "E este", curtidas: 1 }
];

let feed = document.querySelector("#feed");

function desenharFeed() {
  feed.innerHTML = "";

  posts.forEach(function (post, i) {
    let card = document.createElement("div");
    card.className = "mg-post";
    card.innerHTML = `<div class="mg-autor">${post.autor}</div>
                      <div class="mg-texto">${post.texto}</div>`;

    let acoes = document.createElement("div");
    acoes.className = "mg-acoes";

    // crie o botão de apagar aqui


    card.appendChild(acoes);
    feed.appendChild(card);
  });
}

desenharFeed();

palco — o resultado aparece aqui

MiniGram

Preciso de uma dica

posts.splice(i, 1) significa: a partir da posição i, remova 1 item. Depois é só chamar desenharFeed() de novo.

Observação: Cuidado com splice: ele altera o array original de verdade. Não existe "desfazer" — num app real você pediria confirmação antes.

Parte 5 — O MiniGram completo

Junte tudo: publicar, curtir e apagar no mesmo código. Este é o seu projeto final — faça funcionar e depois personalize.

a10e5.js

// ===== MINIGRAM =====
// junte aqui tudo que você fez nas partes 1 a 4

let posts = [];

let feed = document.querySelector("#feed");
let campo = document.querySelector("#campo");
let publicar = document.querySelector("#publicar");

function desenharFeed() {
  feed.innerHTML = "";

  // se não tiver nenhum post, mostre uma mensagem


  // desenhe cada post com curtir e apagar

}

// botão publicar


desenharFeed();

palco — o resultado aparece aqui

MiniGram

Preciso de uma dica

Copie os pedaços das partes anteriores e encaixe. Pra mensagem de feed vazio: if (posts.length === 0) { feed.innerHTML = '<div class="mg-vazio">Nada por aqui ainda 👀</div>'; return; }

Observação: Se travar, não tente consertar tudo de uma vez. Rode com só a Parte 1 funcionando, confirme, e vá encaixando uma peça por vez. Depurar é isolar.

// desafio

deixe com a sua cara

Desafio final: deixe com a sua cara

Escolha pelo menos duas melhorias e implemente: (1) contador de posts no topo · (2) o autor vem de um campo de nome · (3) não deixar publicar texto acima de 100 caracteres · (4) botão que ordena por mais curtidos · (5) marcar/desmarcar curtida em vez de só somar.

a10d1.js DESAFIO

// cole aqui o seu MiniGram da Parte 5 e adicione as melhorias

palco — o resultado aparece aqui

MiniGram

Preciso de uma dica

Contador: document.querySelector("#contador").textContent = posts.length + " posts"; dentro do desenharFeed.
Ordenar: posts.sort(function (a, b) { return b.curtidas - a.curtidas; });
Limite: if (campo.value.length > 100) { alert("Texto muito longo"); return; }

Observação: Este é o código que você mostra pra alguém quando perguntarem se você sabe programar. Guarde o arquivo.

Aula 09 Voltar ao início