eduveks
/
bootcamp-23.1-frontend
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Produtos com AJAX.

master
Eduardo Velasques 3 years ago
parent
bae0816dbf
commit
288b76afea
8 changed files with 159 additions and 31 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -1
      contact.html
  2. +2
    -1
      index.html
  3. +87
    -0
      produtos.html
  4. +1
    -0
      projects.html
  5. +39
    -9
      scripts/main.js
  6. +8
    -5
      styles/_header.less
  7. +3
    -0
      styles/_variables.less
  8. +17
    -15
      styles/blocks/_table.less

+ 2
- 1
contact.html View File

@ -18,6 +18,7 @@
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projetos</a></li>
<li><a href="contact.html" class="active">Contato</a></li>
<li><a href="produtos.html">Produtos</a></li>
</ul>
</nav>
</header>
@ -33,7 +34,7 @@
<form>
<div>
<label>Nome</label>
<input type="text" />
<input type="text" />
</div>
<div>
<label>E-mail</label>


+ 2
- 1
index.html View File

@ -18,6 +18,7 @@
<li><a href="index.html" class="active">Home</a></li>
<li><a href="projects.html">Projetos</a></li>
<li><a href="contact.html">Contato</a></li>
<li><a href="produtos.html">Produtos</a></li>
</ul>
</nav>
</header>
@ -33,7 +34,7 @@
<div>
<h3>O teu problema resolvido na web com alta performance.</h3>
<p>Trabalho com diversas tecnologias, mas estas s&atilde;o as minhas preferidas:</p>
<ul>
<ul id="">
<li>HTML5</li>
<li>CSS3</li>
<li>LESS</li>


+ 87
- 0
produtos.html View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<title>Trit&atilde;o</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet/less" href="/styles/root.less"/>
<script src="scripts/less.min.js" type="text/javascript"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<header>
<div class="logo">
<a href="index.html">
<img src="/images/logo.png" width="150" />
</a>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projetos</a></li>
<li><a href="contact.html">Contato</a></li>
<li class="active"><a href="produtos.html">Produtos</a></li>
</ul>
</nav>
</header>
<main>
<section>
<div>
<h1>Produtos</h1>
</div>
</section>
<section>
<table class="tabela-produtos">
<thead>
<tr>
<th>Produto</th>
<th>Categoria</th>
</tr>
</thead>
<tbody id="tabela-produtos-body">
</tbody>
</table>
<script>
window.setTimeout(() => carregaTabelaProdutos(), 100);
const carregaTabelaProdutos = () => {
processaBackend(
'http://eduveks.bootcamp.dev.netuno.org:20190/services/produtos',
(dados) => {
let html = '';
for (const {produto, categoria} of dados) {
console.log(produto + ' === ' + categoria);
html += `
<tr>
<td>${produto}</td>
<td>${categoria}</td>
</tr>
`;
}
document.getElementById('tabela-produtos-body').innerHTML = html;
}
);
};
</script>
<p></p>
</section>
<section>
<div>
<form target="produto-salvado" action="http://eduveks.bootcamp.dev.netuno.org:20190/services/produto-salvar">
<div>
<label>Nome</label>
<input name="nome" type="text" />
</div>
<div>
<button type="submit">Cria Produto</button>
<!-- <button type="button" onClick="criarProduto()">Envia com Evento de Click</button> -->
</div>
</form>
<iframe name="produto-salvado" onload="carregaTabelaProdutos()" height="200" width="500" frameBorder="no"></iframe>
</div>
</section>
</main>
<footer>
&copy; 2023 Trit&atilde;o
</footer>
</body>
</html>

+ 1
- 0
projects.html View File

@ -18,6 +18,7 @@
<li><a href="index.html">Home</a></li>
<li><a href="projects.html" class="active">Projetos</a></li>
<li><a href="contact.html">Contato</a></li>
<li><a href="produtos.html">Produtos</a></li>
</ul>
</nav>
</header>


+ 39
- 9
scripts/main.js View File

@ -1,11 +1,41 @@
//alert('Ola do JavaScript');
/**
console.warn('Alerta de teste...');
console.error('Aconteceu um erro!');
console.log('Mensagem de log geral...');
*/
const logo = document.querySelector('div.logo');
logo.style.border = '2px solid yellow';
const tecnologiasPreferidasList = `HTML5
CSS3
LESS
JavaScript
ReactJS
Netuno
PostgreSQL
Linux
GIT`.split('\n');
console.info('Minhas tecnologias preferidas:', tecnologiasPreferidasList);
if (document.getElementById('tecnologiasPreferidas')) {
document.getElementById('tecnologiasPreferidas').innerHTML = '<li>'+ tecnologiasPreferidasList.join('</li><li>') + '</li>';
}
function processaBackend(url, callback) {
const http = new XMLHttpRequest();
http.onreadystatechange = function() {
if (this.readyState == 4) {
console.log('Foi no BACKEND e VOLTOU!');
console.warn('Resposta do BACKEND em STRING: ', this.responseText);
const dados = JSON.parse(this.responseText);
if (callback) {
callback(dados);
}
}
};
console.log('CHAMA O BACKEND!!!!');
http.open("GET", url, true);
http.send();
console.log('ENVIOU!!!!')
return 'JSON..'
}
function criarProduto() {
alert('Vai Criar o Produto...');
}

+ 8
- 5
styles/_header.less View File

@ -1,3 +1,6 @@
@import "./_variables.less";
/* Header styling */
header {
background-color: #333333;
@ -12,7 +15,7 @@ header {
@media (min-width: 400px) and (max-width: 800px) {
header {
background-color: red;
background-color: @minhaCorBase;
}
}
@ -38,15 +41,15 @@ nav ul li {
}
nav ul li a {
color: #12A89D;
color: @minhaCorBase;
text-decoration: none;
padding: 10px;
border-radius: 5px;
}
nav ul li a.active {
background-color: #12A89D;
box-shadow: 0 0 2px #12A89D;
background-color: darken(@minhaCorBase, 30%);
box-shadow: 0 0 2px @minhaCorBase;
color: #d1f9e9;
}
@ -54,6 +57,6 @@ nav ul li a:hover {
transition: 0.5s ease-in;
color: #d1f9e9;
background-color: #222222;
box-shadow: 0 0 10px 5px #12A89D;
box-shadow: 0 0 10px 5px @minhaCorBase;
}

+ 3
- 0
styles/_variables.less View File

@ -0,0 +1,3 @@
@minhaCorBase: #12A89D;

+ 17
- 15
styles/blocks/_table.less View File

@ -1,22 +1,24 @@
table {
border: solid 1px #12A89D;
}
table a {
color: #12A89D;
text-decoration: none;
font-weight: bold;
}
a {
color: #12A89D;
text-decoration: none;
font-weight: bold;
}
table > thead > tr,
table > tfoot > tr {
background-color: #d1f9e9;
}
> thead,
> tfoot {
> tr {
background-color: orange;
}
}
table > thead > tr > th,
table > tfoot > tr > th,
table > tbody > tr > td {
text-align: left;
padding: 10px;
> thead > tr > th,
> tfoot > tr > th,
> tbody > tr > td {
text-align: left;
padding: 10px;
}
}

Write Preview
Loading…
Cancel
Save