PersonApp

Lab de JavaScript

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Person App</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >

    <p class="navbar-text pull-right">by Cristofer Sousa</p>


  </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<div class="container">

<span class="pull-right">
  <button type="button" class="btn btn-circle btn-primary" id="btnInfo">
    <i class="fa fa-info"></i>
  </button>
</span>
<div id="regras" style="display:none;">
   <div class="page-header" >
     <h1>Fase 1 <small>Regras</small></h1>
   </div>
   <h3>Construa uma aplicação que permita o cadastro de Pessoas</h3>
   <h4><mark>Regras:</mark></h4>
      <ol>
          <li>A aplicacao dever permitir <mark> inclusão, remoção e listagem </mark> das pessoas cadastradas.</li>
          <li>Os campos do cadastro de cada pessoa são: <mark>Nome, Data de Nascimento, CPF e Celular</mark>, sendo que celular, o único campo opcional.</li>
          <li>Salvar em <mark>LocalStorage </mark>(API do HTML5)</li>
    ...

CSS

body{
  padding-top: 70px;
}

JavaScript

// ArquivoJS para adicionar pessoa


// adição de pessoa na listagem
var btnAdicionar = document.querySelector("#adicionar-pessoa");
                   btnAdicionar.addEventListener("click",function(event){
                   event.preventDefault(); //impede comportamento padrão do browser

    // pega valores da input
    var campoNome = document.querySelector("#campo-nome");
    var campoData = document.querySelector("#campo-dataNasc");
    var campoCPF  = document.querySelector("#campo-cpf");
    var campoCel  = document.querySelector("#campo-celular");


   // adicionar pessoa com os valores inseridos do form
   var addPessoa = "<tr class='pessoa'>" +
                   " <td class='info-nome'>"       + campoNome.value+"</td>"+
                   " <td class='info-dataNasc'>"   + campoData.value+"</td>"+
                   " <td class='info-cpf'>"        + campoCPF.value+"</td>"+
                   " <td class='info-celular'>"    + campoCel.value+"</td>"+
                   "<td><button type='button' class='btn btn-warning remove-pessoa' onclick='excluir(this)'> <i class='fa fa-times'></i> Excluir  </button> </td>" +
                   "</tr>";

   var tabela = document.querySelector("tbody");
                tabela.innerHTML = tabela.innerHTML + addPessoa;
                campoNome.value = "";
                campoData.value = "";
                campoCPF.value = "";
                campoCel.value = "";

    function Person(campoNome, campoData,campoCPF, campoCel){
      this.campoNome = campoNome;
      this.campoData = campoData;
      this.campoCPF = campoCPF;
      this.campoCel = campoCel;

    }

    var personList = localStorage.getItem('personList');
    personList.push(new Person(campoNome,campoData,campoCPF, campoCel))
    localStorage.setItem('personList', personList);


});

//remoção de pessoa da listagem
function excluir(elem) {
    elem.parentNode.parentNode.remove();
}