# Aula 18 - Lógica de Programação
## Formulário
### HTML
```HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário</title>
</head>
<body>
<h1>Formulário</h1>
<div>
<form>
<label>
Nome Completo
<input id="nome" type="text">
</label><br />
<label>
Idade
<input id="idade" type="number">
</label><br />
<label>
CPF
<input id="cpf" type="numeric">
</label><br />
<label>
Email
<input id="email" type="email">
</label><br />
<label>
Telefone
<input id="telefone" type="tel">
</label><br />
<button>Salvar</button>
</form>
</div>
<script src="aula18.js"></script>
</body>
</html>
```
### JS
```JS
const botao = document.querySelector("button");
function armazenaJson() {
const inputNome = document.querySelector("#nome");
const inputIdade = document.querySelector("#idade");
const inputCPF = document.querySelector("#cpf");
const inputEmail = document.querySelector("#email");
const inputTelefone = document.querySelector("#telefone");
const formulario = {
nome : inputNome.value,
idade : inputIdade.value,
cpf : inputCPF.value,
email : inputEmail.value,
telefone : inputTelefone.value
}
const formularioString = JSON.stringify(formulario);
localStorage.setItem('formulario', formularioString);
location.href = 'pessoa.html';
}
botao.addEventListener("click", armazenaJson);
```
## Pessoa.html
### HTML
```HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eu sou uma pessoa</title>
</head>
<body>
<h1>Bem vindo!</h1>
<div class="conteudo">
<p id="nome">Nome:</p>
<p id="idade">Idade: </p>
<p id="cpf">CPF: </p>
<p id="email">Email: </p>
<p id="telefone">Telefone: </p>
</div>
<script src="pessoa.js"></script>
</body>
</html>
```
### JS
```JS
const formulario = localStorage.getItem('formulario');
const inputNome = document.querySelector("#nome");
const inputIdade = document.querySelector("#idade");
const inputCPF = document.querySelector("#cpf");
const inputEmail = document.querySelector("#email");
const inputTelefone = document.querySelector("#telefone");
if (formulario === null || JSON.parse(formulario).nome === '') {
alert('Não existem dados no nosso Banco de Dados!')
} else {
inputNome.innerText += ' ' + formataNome(JSON.parse(formulario).nome);
inputIdade.innerText += ' ' + JSON.parse(formulario).idade + ' anos';
inputCPF.innerText += ' ' + formataCPF(JSON.parse(formulario).cpf);
inputEmail.innerText += ' ' + JSON.parse(formulario).email;
inputTelefone.innerText += ' ' + formataTel(JSON.parse(formulario).telefone);
}
function formataNome (nome) {
const nomeFormatado = nome.split(' ').map((valor) => valor.replace(valor[0], valor[0].toUpperCase()));
return nomeFormatado.join(' ');
}
function formataCPF (cpf) {
const cpfFormatado = cpf.split('');
cpfFormatado.splice(3, 0, '.');
cpfFormatado.splice(7, 0, '.');
cpfFormatado.splice(11, 0, '.');
return cpfFormatado.join('')
}
function formataTel (cpf) {
const telefoneFormatado = cpf.split('');
telefoneFormatado.splice(0, 0, '(');
telefoneFormatado.splice(3, 0, ')');
telefoneFormatado.splice(4, 0, ' ');
telefoneFormatado.splice(10, 0, '-');
return telefoneFormatado.join('')
}
```
Sign in with Wallet
Connect another wallet