Integração com Back-end

3 years ago · 825b02e2bb
--- a/formulario.html
+++ b/formulario.html
@ -17,10 +17,17 @@
      </p>
    </header>
    <main>
      <form method="GET" action="salvar.html" target="salvou">
      <script>
        function onTipoAltera() {
          console.log('Altera tipo')
          const inputTipo = document.querySelector('[name="tipo"]')
          inputTipo.value = inputTipo.value +' . '
        }
      </script>
      <form method="POST" action="services/veiculo" target="salvou">
        <div>
          Tipo:
          <input type="text" name="tipo" />
          <input type="text" name="tipo" onkeyup="onTipoAltera()" />
        </div>
        <div>
          <label for="campo-marca">Marca:</label>
@ -29,7 +36,7 @@
        <div>
          <label>
            Pode ser publicado?
            <input type="checkbox" name="publica" />
            <input type="checkbox" name="publica" value="true" />
          </label>
        </div>
        <button>Enviar</button>
--- a/index.html
+++ b/index.html
@ -4,6 +4,8 @@
    <title>T&iacute;tulo P&aacute;gina</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/base.css" />
    <link rel="stylesheet/less" type="text/css" href="styles/base.less" />
    <script src="scripts/less/less.min.js"></script>
  </head>
  <body>
    <header>
@ -21,14 +23,14 @@
      </section>
      <hr/>
      <style>
 div[data-colunas="grid"] {
  display: grid;
  grid-template-columns: auto auto auto;
 }
        div[data-colunas="grid"] {
          display: grid;
          grid-template-columns: auto auto auto;
        }
      </style>
      <section>
      <section id="bloco-grid">
        <h1>GRID</h1>
        <div data-colunas="grid">
        <div data-colunas="grid" class="grid">
          <div>
            <h2>Carro</h2>
            <p>Andam em estradas, t&ecirc;m quatro pneus.</p>
@ -44,31 +46,28 @@ div[data-colunas="grid"] {
        </div>
      </section>
      <hr/>

      <style>
 div[data-colunas="flex"] {
  display: flex;
  flex-direction: row;
 }
 div.tipos-veiculos[data-colunas="flex"] > div {
  flex: 50%;
 }
        div[data-colunas="flex"] {
          display: flex;
          flex-direction: row;
        }
        div.tipos-veiculos[data-colunas="flex"] > div {
          flex: 50%;
        }

@media (max-width: 500px) {
  div[data-colunas="flex"] {
    flex-direction: column;
  }
 }

@media (min-width: 500px) and (max-width: 800px) {
  div[data-colunas="flex"] {
    background-color: #555500;
  }
 }
        @media (max-width: 500px) {
          div[data-colunas="flex"] {
            flex-direction: column;
          }
        }

        @media (min-width: 500px) and (max-width: 800px) {
          div[data-colunas="flex"] {
            background-color: #555500;
          }
        }
      </style>
 
      <section>
      <section id="bloco-flex">
        <h1>FLEX</h1>
        <div class="tipos-veiculos" data-colunas="flex">
          <div>
@ -86,5 +85,6 @@ div.tipos-veiculos[data-colunas="flex"] > div {
        </div>
      </section>
    </main>
    <script src="scripts/main.js"></script>
  </body>
 </html>
--- a/scripts/less/less.min.js
+++ b/scripts/less/less.min.js
--- a/scripts/less/less.min.js.map
+++ b/scripts/less/less.min.js.map
--- a/scripts/main.js
+++ b/scripts/main.js
@ -0,0 +1,14 @@
 console.log('MAIN!!!')

 const gridH2 = document.querySelector('.grid > div > h2')
 console.log(
    'QUERY SELECTOR Antes',
    gridH2.innerText
 )

 gridH2.innerText = 'Trotinete'

 console.log(
    'QUERY SELECTOR Depois',
    gridH2.innerText
 )
--- a/styles/base.less
+++ b/styles/base.less
@ -0,0 +1,27 @@

@import './variaveis.less';

 #bloco-grid {
    background-color: lighten(@corVermelhaEscura, 10%);
    border: @bordaVermelhaEscura;
    padding: 20px;
    
    > h1 {
        margin-top: 0;
    }

    > div {
        > div {
            margin: 0 10px;
        }
        h2 {
            color: darken(@corVermelhaEscura, 20%);
        }
        p {
            border: @bordaVermelhaEscura;
            border-radius: 20px;
            padding: 20px;
        }
    }
 }

--- a/styles/variaveis.less
+++ b/styles/variaveis.less
@ -0,0 +1,4 @@

@corVermelhaEscura: #660000;

@bordaVermelhaEscura: 10px solid @corVermelhaEscura;
--- a/tabela.html
+++ b/tabela.html
@ -6,8 +6,26 @@
    <link rel="stylesheet" href="styles/tabela.css" />
  </head>
  <body>
    <header>
      <h1>Minha Tabela</h1>
    <script>
      document.addEventListener(
        'scroll', (e) => {
          const titulo = document.getElementById('titulo')
          titulo.innerHTML = `
            Posi&ccedil;&atilde;o Scroll: 
            ${window.scrollX}, ${parseInt(window.scrollY)}
          `
          if (window.scrollY > 50) {
            titulo.style.color = 'yellow'
          } else {
            titulo.style.color = 'white'
          }
        }
      )
    </script>
    <header
      onmouseover="this.style.backgroundColor = 'black'"
      onmouseout="this.style.backgroundColor = 'grey'">
      <h1 id="titulo" class="titulo-pagina">Minha Tabela</h1>
      <p>
      <a href="index.html">Index</a>
      &middot;
@ -17,6 +35,24 @@
      </p>
    </header>
    <main>
      <div><p id="lista-marcas"></p></div>
      <script>
        const tituloPagina = document.querySelector('.titulo-pagina')
        tituloPagina.innerText = tituloPagina.innerText.toUpperCase()
        const marcas = [
          "Azimut", "Benetou", "Ford",
          "Reanault", "Volkswagen"
        ]
        document.getElementById("lista-marcas").innerText = marcas.join(' | ')
      </script>

      <button onClick="clicaAqui()">Clica Aqui!</button>
      <script>
        function clicaAqui() {
          alert('Clicado!')
        }
      </script>

      <table class="tabela tabela-espaco-interno" cellspacing="0" cellpadding="0" border="0">
        <thead>
          <tr>
@ -50,9 +86,6 @@
          </tr>
        </tfoot>
      </table>
      <div class="tabela">
        <h1>Titutlo...</h1>
        </div>
    </main>
  </body>
 </html>