---
# System prepended metadata

title: Aula 18 - Lógica de Programação

---

![](https://i.imgur.com/xG74tOh.png)

# 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('')
}

```