Página HTML

2026-06-01 20:56:57 -03:00 · 2026-06-01 20:56:57 -03:00 · 50647dd094
parent aee4a1b7fb
commit 50647dd094
3 changed files with 74 additions and 0 deletions
--- a/apirest/frontend/index.html
+++ b/apirest/frontend/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Produtos</title>
+</head>
+<body>
+
+    <h1>Lista de produtos</h1>
+    <main>
+        
+        <table>
+            <thead>
+                <tr>
+                    <th>Nome</th>
+                    <th>Preço</th>
+                    <th>Estoque</th>
+                </tr>
+            </thead>            
+            <tbody id="conteudo_tabela">
+
+            </tbody>
+        </table>
+    </main>
+
+    <script src="script.js"></script>    
+</body>
+</html>
--- a/apirest/frontend/script.js
+++ 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 = `   <td>${produto.nome}</td>
+                        <td>${produto.preco}</td>
+                        <td>${produto.estoque}</td>
+                    `
+        tbody.appendChild(linha);
+    });
+}
+
+window.addEventListener("load", () => {
+    carregarProdutos();
+})
--- a/apirest/frontend/style.css
+++ 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;
+}