Dá série Chat GPT não faz tudo, mas faz muito kkk
Boa tarde galera!
Bom, é inevitável nos livrarmos das inúmeras IA's que temos hoje, e claro que fazer uso não é nenhum pecado, pois as vezes precisamos criar algo rapidamente para ajudar no dia a dia, e foi isso que eu fiz. Segue exatamente como solicitei a ele:
Preciso de um sistema em html, que controle minhas compras aqui na empresa. Quero poder escrever o item que foi pedido orçamento, qual empresa, valor e condição de pagamento, e quando sera entregue. Não só isso, inserir quando será a proxima compra. Quero que seja um sistema com campos a serem preenchidos e no final de tudo, gero um relatório em XLSX que será salvo localmente, para pasta download do google chrome.
Olha que top ficou:
Segue codigo em html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controle de Compras</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
form { margin-bottom: 20px; }
label { display: block; margin: 10px 0 5px; }
input, select { padding: 8px; width: 100%; max-width: 300px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 10px; border: 1px solid #ddd; text-align: left; }
th { background-color: #f4f4f4; }
</style>
</head>
<body>
<h1>Controle de Compras</h1>
<form id="compraForm">
<label>Item</label>
<input type="text" id="item" required>
<label>Empresa</label>
<input type="text" id="empresa" required>
<label>Valor (R$)</label>
<input type="number" id="valor" required>
<label>Condição de Pagamento</label>
<input type="text" id="condicaoPagamento" required>
<label>Data de Entrega</label>
<input type="date" id="dataEntrega" required>
<label>Próxima Compra</label>
<input type="date" id="proximaCompra">
<button type="button" onclick="adicionarCompra()">Adicionar Compra</button>
</form>
<table id="tabelaCompras">
<thead>
<tr>
<th>Item</th>
<th>Empresa</th>
<th>Valor (R$)</th>
<th>Condição de Pagamento</th>
<th>Data de Entrega</th>
<th>Próxima Compra</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button onclick="gerarRelatorio()">Gerar Relatório em XLSX</button>
<script>
const compras = [];
function adicionarCompra() {
const item = document.getElementById("item").value;
const empresa = document.getElementById("empresa").value;
const valor = document.getElementById("valor").value;
const condicaoPagamento = document.getElementById("condicaoPagamento").value;
const dataEntrega = document.getElementById("dataEntrega").value;
const proximaCompra = document.getElementById("proximaCompra").value;
const compra = { item, empresa, valor, condicaoPagamento, dataEntrega, proximaCompra };
compras.push(compra);
atualizarTabela();
document.getElementById("compraForm").reset();
}
function atualizarTabela() {
const tbody = document.getElementById("tabelaCompras").querySelector("tbody");
tbody.innerHTML = "";
compras.forEach((compra, index) => {
const row = tbody.insertRow();
row.insertCell(0).textContent = compra.item;
row.insertCell(1).textContent = compra.empresa;
row.insertCell(2).textContent = compra.valor;
row.insertCell(3).textContent = compra.condicaoPagamento;
row.insertCell(4).textContent = compra.dataEntrega;
row.insertCell(5).textContent = compra.proximaCompra;
});
}
function gerarRelatorio() {
const ws_data = [
["Item", "Empresa", "Valor (R$)", "Condição de Pagamento", "Data de Entrega", "Próxima Compra"],
...compras.map(compra => [compra.item, compra.empresa, compra.valor, compra.condicaoPagamento, compra.dataEntrega, compra.proximaCompra])
];
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(ws_data);
XLSX.utils.book_append_sheet(wb, ws, "Compras");
XLSX.writeFile(wb, "Relatorio_Compras.xlsx");
}
</script>
</body>
</html>
