hdelei/desafio-0003.html

## 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>
	<!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>