chat gpt resolveu aqui
Pode ajudar alguém
Claro, FazerBem! Para criar os cards com um botão "Comprar" em cada um, você pode usar HTML e CSS junto com JavaScript para gerar os cards dinamicamente. Aqui está um exemplo básico de como você pode fazer isso:
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Produtos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="card-container"></div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
#card-container {
display: flex;
flex-wrap: wrap;
}
.card {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 15px;
width: 200px;
}
.btn-comprar {
background-color: green;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
JavaScript (script.js)
const produtos = [
{ nome: "Produto 1", preco: "R$ 10,00" },
{ nome: "Produto 2", preco: "R$ 20,00" },
{ nome: "Produto 3", preco: "R$ 30,00" },
];
const container = document.getElementById('card-container');
produtos.forEach(produto => {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<h3>${produto.nome}</h3>
<p>Preço: ${produto.preco}</p>
<button class="btn-comprar">Comprar</button>
`;
container.appendChild(card);
});
Explicação:
- HTML: Cria uma estrutura básica com um contêiner para os cards.
- CSS: Estiliza os cards e o botão "Comprar".
- JavaScript: Cria uma lista de produtos e gera os cards dinamicamente, adicionando um botão "Comprar" em cada card.
