Aula 06 Imersão Dev Objetos e tabela de classificação

Channel:

aeithales

Subscribers:

2,810

Published on August 31, 2022 12:47:44 AM ● Video Link: https://www.youtube.com/watch?v=OBhqVQmt1dk

Duration: 1:10:06

178 views

4

https://codepen.io/imersao-dev/pen/yLgLLNY

HTML

html

head
title
Imersão Dev - Aula 06
/title
/head

body
h1 Tabela de classificação /h1

table style="width:100%"
thead
tr
thNome/th
thVitórias/th
thEmpates/th
thDerrotas/th
thPontos/th
th colspan="3" Ações /th
/tr
/thead
tbody id="tabelaJogadores"
tr
tdPaulo/td
td /td
td /td
td /td
td /td
td button onClick="adicionarVitoria()"Vitória/button /td
td button onClick="adicionarEmpate()"Empate/button /td
td button onClick="adicionarDerrota()"Derrota/button /td
/tr
tr
td Rafa/td
td /td
td /td
td /td
td /td
td button onClick="adicionarVitoria()"Vitória/button /td
td button onClick="adicionarEmpate()"Empate/button /td
td button onClick="adicionarDerrota()"Derrota/button e3/td
/tr
/tbody
/table
/body

/html

CSS

* {
text-align: center;
}

body {
font-family: "Roboto Mono", monospace;
min-height: 400px;
background-image: url("https://www.alura.com.br/assets/img/imersoes/dev-2021/tabela-classificacao-bg.png");
background-color: #111;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}

.container {
text-align: center;
padding: 20px;
height: 100vh;
}

.page-title {
color: #ffffff;
margin: 0 0 5px;
}

.page-subtitle {
color: #ffffff;
margin-top: 5px;
}

.page-logo {
width: 200px;
}

.alura-logo {
width: 40px;
position: absolute;
top: 10px;
right: 10px;
}

table {
border: 2px solid white;
border-collapse: collapse;
}

h1 {
color: white;
}

th,
tr,
td {
border: solid 1px white;
color: white;
}


https://codepen.io/imersao-dev/pen/XWpWrod