Add files via upload

RaquelCCabral · Jun 27, 2023 · faad263 · faad263
1 parent cb1825c
commit faad263
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brasileirão</title>
+    <link rel = 'stylesheet' href = 'style.css'>
+</head>
+<body>
+    <div class="container">
+        <h1 id="h1"></h1>
+        <table class="table" id="table">
+            <thead>
+                <th></th>
+                <th></th>
+                <th></th>
+                <th>P</th>
+                <th>J</th>
+                <th>V</th>
+                <th>E</th>
+                <th>D</th>
+                <th>GP</th>
+                <th>GC</th>
+                <th>SG</th>
+            </thead>
+            <tbody id="tbody"></tbody>
+        </table>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,40 @@
+const url_campeonato = "https://api.api-futebol.com.br/v1/campeonatos/10";
+
+const url = "https://api.api-futebol.com.br/v1/campeonatos/10/tabela";
+const options = {
+    method: "GET",
+    headers: {
+        Authorization: "Bearer live_4640d6f346d94c8c76190fc14fc7a1"
+    }
+};
+
+fetch(url_campeonato, options)
+    .then(res => res.json())
+    .then(function(data){
+        console.log(data);
+        var h1 = document.getElementById("h1");
+        h1.innerHTML = `<img src = "${data.logo}" height = "40" width = "40"/> ${data.edicao_atual.nome_popular} <img src = "${data.logo}" height = "40" width = "40"/>`;
+        })
+    .catch(error => console.error(error));
+
+fetch(url, options)
+    .then(res => res.json())
+    .then(function(data){
+        console.log(data);
+        var tbody = document.getElementById("tbody");
+
+        for(var i = 0; i <= data.length;i++){
+            tbody.innerHTML += `<tr id = "time${i+1}"><td id = "pos${i+1}"><b>${data[i].posicao}</b></td>
+                                <td><img src = "${data[i].time.escudo}" height = "25" width = "25"/></td>
+                                <td>${data[i].time.nome_popular}</td>
+                                <td><b>${data[i].pontos}</b></td>
+                                <td>${data[i].jogos}</td>
+                                <td>${data[i].vitorias}</td>
+                                <td>${data[i].empates}</td>
+                                <td>${data[i].derrotas}</td>
+                                <td>${data[i].gols_pro}</td>
+                                <td>${data[i].gols_contra}</td>
+                                <td>${data[i].saldo_gols}</td></tr>`
+        }
+    })
+    .catch(error => console.error(error));
diff --git a/style.css b/style.css
@@ -0,0 +1,41 @@
+body{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+h1{
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    color: rgb(15, 168, 81);
+    text-shadow: 1px 1px 2px black;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+table{
+    text-align: center;
+    border: 1px solid black;
+    border-collapse: collapse;
+    font-family: sans-serif;
+    color: white;
+    background: rgb(15, 112, 58);
+    background: linear-gradient(45deg, rgba(15, 112, 58, 1) 15%, 
+              rgb(15, 168, 81) 50%, 
+              rgba(15, 112, 58, 1) 85%);
+}
+
+td{
+    border-top: 1px dotted black;
+    border-bottom: 1px dotted black;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+#pos1, #pos2, #pos3, #pos4, #pos5, #pos6{
+    color: blue;
+}
+
+#pos17, #pos18, #pos19, #pos20{
+    color: red;
+}