Skip to content

Instantly share code, notes, and snippets.

@hdelei

hdelei/desafio-0003.html

Created October 15, 2021 00:14
Show Gist options
  • Save hdelei/735ef25265591fe2163db2b14d11c307 to your computer and use it in GitHub Desktop.
Save hdelei/735ef25265591fe2163db2b14d11c307 to your computer and use it in GitHub Desktop.
Download ZIP
Desafio 003 - Curso do João
Raw
desafio-0003.html
<!DOCTYPE html>
<html lang="pt-BR">
<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>Desafio 0003</title>
<style>
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
label{
font-weight: bold;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr {
border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #D6EEEE;
}
div {
margin-top: 0.5em;
}
</style>
</head>
<body>
<form>
<h1>Desafio 0003</h1>
<div style="display: inline-table;">
<div style="text-align: right">
<div>
<label for="nome">Nome Completo:</label>
<input type="text" class="dados">
</div>
<div>
<label for="endereco">Endereço:</label>
<input type="text" class="dados">
</div>
<div>
<label for="bairro">Bairro:</label>
<input type="text" class="dados">
</div>
<div>
<label for="cidade">Cidade:</label>
<input type="text" class="dados">
</div>
<div>
<label for="estado">Estado:</label>
<input type="text" class="dados">
</div>
<div>
<label for="cep">CEP:</label>
<input type="text" class="dados">
</div>
<div>
<label for="telefone">Telefone:</label>
<input type="tel" class="dados">
</div>
<div>
<input type="button" onclick="salvarDados()" value="Salvar">
</div>
</div>
</div>
</form>
<div>
<h1 id="nomeImpresso"></h1>
</div>
<div>
<table style="width:50%">
<tr>
<td>Nome Completo</td>
<td>Endereço</td>
<td>Bairro</td>
<td>Cidade</td>
<td>Estado</td>
<td>CEP</td>
<td>Telefone</td>
</tr>
<tr id="tabela">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
<script>
function salvarDados() {
var dados = document.getElementsByClassName("dados");
var colunas = document.getElementById("tabela");
var nome;
for (let i = 0; i < dados.length; i++) {
var item = dados[i].value;
colunas.cells[i].innerText = item;
if (i == 0)
nome = item;
}
setTimeout(function () { alert(nome); }, 1);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment