/7_Days_de_JavaScript_e_DOM_CRUD

Primary LanguageJavaScript

A proposta do projeto é criar um CRUD (Create, Read, Update, Delete). Ou seja nossa aplicação receberar dados, que devem ser disponilizados para leitura, caso necessário poderam ser editados e quando for precisso excluido.

Neste projeto trabalharemos com os seguintes dados:

  • Nome
  • Data de nascimento Receberemos estes dados salvos de forma persistente, após serem salvos seram exibidos em uma tabela abaixo, estes dados poderam ser editados e excluidos quando assim o usuario desejar

Tarefas dia 1

  • Colocar um titulo

  • Fazer um formulario representando um pessoa

  • O formulario tera um espaço para o nome e outro para a data de nascimento

  • Um botão para submeter o formulario

  • Copie e cole o esqueleto base da estrutura HTML

    <h1>Cadastro de pessoas</h1>
<form class="form js-form">
    <label for="name" action="">
        Nome
        <input class="form-field js-field" id="name" name="name" type="text" minlength="3" maxlength="120" pattern="([a-z A-Z]+)" required>
    </label>
    <label for="birth-date">
        Data de Nascimento
        <input class="form-field js-field" id="birth-date" name="birth-date" type="date" required>
    </label>
    <button id="btnSave" type="submit">Salvar</button>
    <script type="text/javascript" src="./script.js"></script>


</form>

  • Criar uma função para pegar o valor dos capos do formulário e imprimir no console.

Tarefas do dia 2

  • Criar validação para o campo nome com as seguintes regras de negócio: Nome precisa ter no minimo 3 letras. Nome precisa ter no maximo 120 letras. Nome só pode conter letras.
  • Criar validação para o campo data de nascimento coma seguintes regras de negócio: Data de nascimento precisa estar no formato DD/MM/AAAA O mês deve estar entre 01 e 12.

Tarefas do dia 3

  • Adicionar um evento para ouvir a submissão do formulário
  • Este evento coletarar os dados informados nos campos e montarar um objeto representando um pessoa.
  • Com todos os dados em mãos, savalos localmente de forma persistente.
  • Exibir esses dados em uma tabela quando a pagina for recaregada ou reaberta

Tarefas do dia 4

  • Adicionar botão "Atualizar" a cada linha da tabela
  • Ao clicar o "Atualizar", os dados da linha em questao serão recuperados
  • Após alteados os dados serão salvos novamente na mesma posição

Tarefas do dia 5

  • Adicionar botão "Deletar" a cada linha da tabela
  • Ao clicar o "Deletar", os dados da linha em questão seram deletados do localStorange e os seus respectivos elementos na interface.

Tarefa do dia 6

  • [] Estilize o projeto. buque referencias de um layout na internet.

Tarefa do dia 7

  • [] Hospede seu projeto. Existe alguns lugares onde você pode criar seu portfolio, como por exemplo:

GitHub Pages (https://pages.github.com/) Vercel (https://vercel.com/) Vitrinedev (https://cursos.alura.com.br/vitrinedev) codepen( https://codepen.io/)