From 50647dd094cd80f402ec3a6503a73ea754ab6fc1 Mon Sep 17 00:00:00 2001 From: Joao Date: Mon, 1 Jun 2026 20:56:57 -0300 Subject: [PATCH] =?UTF-8?q?P=C3=A1gina=20HTML?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apirest/frontend/index.html | 30 ++++++++++++++++++++++++++++++ apirest/frontend/script.js | 20 ++++++++++++++++++++ apirest/frontend/style.css | 24 ++++++++++++++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 apirest/frontend/index.html create mode 100644 apirest/frontend/script.js create mode 100644 apirest/frontend/style.css diff --git a/apirest/frontend/index.html b/apirest/frontend/index.html new file mode 100644 index 0000000..7ad46b2 --- /dev/null +++ b/apirest/frontend/index.html @@ -0,0 +1,30 @@ + + + + + + + Produtos + + + +

Lista de produtos

+
+ + + + + + + + + + + + +
NomePreçoEstoque
+
+ + + + \ No newline at end of file diff --git a/apirest/frontend/script.js b/apirest/frontend/script.js new file mode 100644 index 0000000..5a002b3 --- /dev/null +++ b/apirest/frontend/script.js @@ -0,0 +1,20 @@ +async function carregarProdutos(){ + const resposta = await fetch("http://localhost:5000/produtos"); + if (!resposta.ok){ + throw new Error("Não foi possível carregar a lista") + } + const produtos = await resposta.json(); + let tbody = document.querySelector("tbody"); + produtos.forEach(produto => { + let linha = document.createElement("tr"); + linha.innerHTML = ` ${produto.nome} + ${produto.preco} + ${produto.estoque} + ` + tbody.appendChild(linha); + }); +} + +window.addEventListener("load", () => { + carregarProdutos(); +}) \ No newline at end of file diff --git a/apirest/frontend/style.css b/apirest/frontend/style.css new file mode 100644 index 0000000..0cf029c --- /dev/null +++ b/apirest/frontend/style.css @@ -0,0 +1,24 @@ +/* + Seletor { + propriedade1 : valor; + propriedade2 : valor; + ... + propriedadeN : valor; + } +*/ + + +/* CSS de RESET */ +* { + margin : 0; + padding: 0; +} + +h1 { + width : 300px; + background-color: brown; + padding: 20px; + border: 10px solid black; + text-align: center; + margin: 0 auto; +} \ No newline at end of file