Projeto

by Jeferson Silva

HTML

<!doctype html>
<html lang="pt-br">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Stylo CSS -->
    <style type="text/css">
      body{
        background-color:#0CF;
      }
      #form{
        background-color: white;
        border-radius: 10px;
      }
      textarea{
        resize: none;
      }
    </style>

    <title></title>
  </head>
  <body>

  <br><br><br>

    <div class="container">
      <div class="row">
        <div class="col-12" id="form">
          <form action="" method="post">
            <div class="form-row">
              <div class="form-group col-md-12">
                <blockquote class="blockquote text-center">
                  <h1>Nome_Projeto</h1>
                  <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, velit.</em></p>
                </blockquote>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <label for="NomeDE">Nome Data Exntesion:</label>
                <input type="text" class="form-control" id="NomeDE" placeholder="Nome Data Extension..." name="NomeDE" required>
              </div>
              <div class="form-group col-md-6">
                <label for="ExternalKey">External Key:</label>
                <input type="text" class="form-control" id="ExternalKey" placeholder="External Key..." name="ExternalKey" required>
              </div>
            </div>
            <div class="form-row" id="people-container">
              <div class="form-group col-md-6">
                <label for="NomeCampo">Nome Campo:</label>
               ...

JavaScript

let i = 2;
document.getElementById('add-new-person').onclick = function () {
    let template = `
      <div class="form-row" id="people-container">
        <div class="form-group col-md-6">
          <label for="NomeCampo">Nome Campo:</label>
          <input type="text" class="form-control" id="NomeCampo" placeholder="Nome Campo..." name="NomeCampo[1]">
        </div>
        <div class="form-group col-md-3">
          <label for="TipoCampo">Tipo:</label>
          <select class="form-control" id="TipoCampo" name="TipoCampo[1]">
                <option>Text</option>
                <option>Number</option>
                <option>Date</option>
                <option>Boolean</option>
                <option>EmailAddress</option>
                <option>Phone</option>
                <option>Decimal</option>
                <option>Locale</option>
          </select>
        </div>
        <div class="form-group col-md-3">
          <label for="StatusCampo">Status:</label>
          <select class="form-control" id="StatusCampo" name="StatusCampo[1]">
                <option>Primary Key</option>
                <option>Nullable</option>
          </select>
        </div>
      </div>
    `;

    let container = document.getElementById('people-container');
    let div = document.createElement('div');
    div.innerHTML = template;
    container.appendChild(div);

    i++;
}