diff --git a/index.html b/index.html new file mode 100644 index 0000000..1f53a51 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + Brasileirão + + + +
+

+ + + + + + + + + + + + + + + +
PJVEDGPGCSG
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f7e63ce --- /dev/null +++ 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 = ` ${data.edicao_atual.nome_popular} `; + }) + .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 += `${data[i].posicao} + + ${data[i].time.nome_popular} + ${data[i].pontos} + ${data[i].jogos} + ${data[i].vitorias} + ${data[i].empates} + ${data[i].derrotas} + ${data[i].gols_pro} + ${data[i].gols_contra} + ${data[i].saldo_gols}` + } + }) + .catch(error => console.error(error)); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ea959e9 --- /dev/null +++ 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; +} \ No newline at end of file