jailton
/
exercicios
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Realizando integração com serviço de backend netuno

master
jailton 3 years ago
parent
ef3614da11
commit
58d963d751
9 changed files with 309 additions and 161 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +16
    -10
      animals/css/global.css
  2. +3
    -0
      animals/css/styles.less
  3. +25
    -43
      animals/pages/animals.html
  4. +47
    -79
      animals/pages/new-animal.html
  5. +83
    -0
      animals/pages/new-parque.html
  6. +8
    -29
      animals/pages/parques-naturais.html
  7. +33
    -0
      animals/scripts/new-park.js
  8. +58
    -0
      animals/scripts/newAnimal.js
  9. +36
    -0
      animals/scripts/parques.js

+ 16
- 10
animals/css/global.css View File

@ -106,11 +106,12 @@ footer{
width: 100%;
display: flex;
justify-content: flex-start;
gap: 1em;
}
.btn{
background-color: none;
color: var(--primary-color);
background-color: #FFF;
border: 2px solid var(--primary-color);
margin-bottom: 0.5em;
width: fit-content;
@ -144,7 +145,7 @@ footer{
gap: 0.3em;
}
.form-control > .form-control__input-group > input{
.form-control > .form-control__input-group > input,select{
padding: 0.4em 0.4em;
font-size: 1em;
border: none;
@ -155,12 +156,17 @@ footer{
font-weight: bold;
}
.main__iframe{
width: 550px;
border: 2px solid #000;
}
.form-control > .form-control__options{
display:flex;
justify-content:space-between;
}
.title > h1 > a{
color: var(--primary-color);
text-decoration: underline;
}
.main__iframe{
width: 550px;
border: 2px solid #000;
}
.title > h1 > a{
color: var(--primary-color);
text-decoration: underline;
}

+ 3
- 0
animals/css/styles.less View File

@ -56,8 +56,10 @@ header {
display: flex;
gap: 1em;
> li {
list-style:none;
a {
color: #FFF;
font-weight: bold;
@ -135,6 +137,7 @@ header {
width: 100%;
display: flex;
justify-content: flex-start;
gap: 1em;
}
.btn{


+ 25
- 43
animals/pages/animals.html View File

@ -43,40 +43,17 @@
<div class="main__options">
<a href="./new-animal.html" class="btn">NEW</a>
<button type="button" id ="btnSum" class="btn" > Somario </button>
</div>
<table class="main__table">
<thead>
<tr>
<th scope="col">Nome:</th>
<th scope="col">Quantidade</th>
<th scope="col">Quantidade:</th>
<th scope="<col>">Parque:</th>
</tr>
</thead>
<tbody id="tbl" >
<tr>
<td>Onça-pintada</td>
<td>100</td>
</tr>
<tr>
<td>Lobo-guará</td>
<td>60</td>
</tr>
<tr>
<td>Panda-gigante</td>
<td>200</td>
</tr>
<tr>
<td>Arara-azul-de-lear</td>
<td>86</td>
</tr>
<tr>
<td>Pinguim-africano</td>
<td>96</td>
</tr>
<tbody id="tbl">
</tbody>
</table>
@ -92,34 +69,39 @@
<script>
const endPoint = "http://jailton.bootcamp.dev.netuno.org:20190/services/animal"
getAllAnimals()
async function getAllAnimals (){
const tbody = document.getElementById('tbl');
document.querySelector('#btnSum').addEventListener('click',e=>{
const animals = await fetch(endPoint).then((res)=>res.json()).catch((err)=>err);
const tbody = document.getElementById('tbl');
tbody.innerHTML = '';
const values = tbody.querySelectorAll('td');
animals.forEach(animal => {
let soma = 0;
const tr = document.createElement('tr');
const tdName = document.createElement('td');
tdName.textContent = animal.animal;
const tdQuant = document.createElement('td');
tdQuant.textContent = animal.quantidade;
const tdParque = document.createElement('td');
tdParque.textContent = animal.parque;
for(let i = 0; i < values.length ; i++){
tr.appendChild(tdName);
tr.appendChild(tdQuant);
tr.appendChild(tdParque);
if(i%2!=0){
// console.log(values[i].textContent);
soma += Number(values[i].textContent);
}
tbody.appendChild(tr);
})
}
console.log(soma);
alert( `Somatorio: ${soma}`);
}
});
</script>
</body>
</body>
</html>

+ 47
- 79
animals/pages/new-animal.html View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,109 +9,77 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="../css/global.css">
<link rel="stylesheet" href="../css/new-animal.css">
<title>Document</title>
</head>
</head>
<body>
<body>
<header>
<div class="header__logo">
<a href="../index.html"><img src="../img/wild-animals.png" alt="img_logo"></a>
</div>
<nav class="header__menu">
<ul>
<li><a href="../index.html">HOME</a></li>
<!-- <li><a href="#">ANIMALS</a></li> -->
<li><a href="./parques-naturais.html">PARQUES</a></li>
</ul>
</nav>
<div class="header__logo">
<a href="../index.html"><img src="../img/wild-animals.png" alt="img_logo"></a>
</div>
<nav class="header__menu">
<ul>
<li><a href="../index.html">HOME</a></li>
<!-- <li><a href="#">ANIMALS</a></li> -->
<li><a href="./parques-naturais.html">PARQUES</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<div class="container">
<div class="title">
<h1>Cadastrar Animal</h1>
</div>
<div class="main_content">
<div class="title">
<h1>Cadastrar Animal</h1>
<form class="form-control">
<div class="form-control__input-group">
<label for="name">Nome:</label>
<input type="text" id="inputName" >
</div>
<div class="main_content">
<form action="./processing.html" target="res-iframe" class="form-control">
<div class="form-control__input-group">
<label for="name">Nome:</label>
<input type="text" id="inputName" >
</div>
<div class="form-control__input-group">
<label for="quantity">Quantidade:</label>
<input type="number" id="inputQuant" >
</div>
<div class="form-control__input-group">
<label for="park">Parque:</label>
<input type="text">
</div>
<div class="form-control__input-group">
<label for="estate">Estado:</label>
<input type="text">
</div>
<input type="submit" value="Cadastrar" class="btn" id='btnSub' >
</form>
<div class="form-control__input-group">
<label for="quantity">Quantidade:</label>
<input type="number" id="inputQuant" >
</div>
<div class="form-control__input-group">
<label for="park">Parque:</label>
<select id="selParques">
</select>
</div>
<div class="form-control__options">
<input type="submit" value="Cadastrar" class="btn" id='btnSub'>
<a href="./animals.html" class="btn" >Voltar</a>
</div>
<iframe src="" frameborder="0" name="res-iframe" class="main__iframe"></iframe>
</form>
</div>
<!--
<iframe src="" frameborder="0" name="res-iframe" class="main__iframe"></iframe>
-->
</div>
</main>
<footer>
<span>Animals 2023 &copf;</span>
<span>Animals 2023 &copf;</span>
</footer>
<script>
const inputName = document.querySelector('#inputName');
const inputQuant = document.querySelector('#inputQuant');
const btnSub = document.querySelector('#btnSub');
btnSub.addEventListener("click", e=>{
let value1 = inputName.value;
let value2 = inputQuant.value;
alert( `
Soma: ${ Number( value1) + Number( value2)}
Multiplicação: ${ Number( value1) * Number( value2)}
Divisão: ${ Number( value1) / Number( value2)}
Subtração: ${ Number( value1) - Number( value2)}
` );
});
</script>
<script src="../scripts/newAnimal.js"> </script>
</body>
</body>
</html>

+ 83
- 0
animals/pages/new-parque.html View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="../css/global.css">
<link rel="stylesheet" href="../css/new-animal.css">
<title>Document</title>
</head>
<body>
<header>
<div class="header__logo">
<a href="../index.html"><img src="../img/wild-animals.png" alt="img_logo"></a>
</div>
<nav class="header__menu">
<ul>
<li><a href="../index.html">HOME</a></li>
<!-- <li><a href="#">ANIMALS</a></li> -->
<li><a href="./parques-naturais.html">PARQUES</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<div class="title">
<h1>Cadastrar Park</h1>
</div>
<div class="main_content">
<form class="form-control">
<div class="form-control__input-group">
<label for="name">Nome:</label>
<input type="text" id="inputNome" >
</div>
<div class="form-control__input-group">
<label for="quantity">Estado:</label>
<input type="text" id="inputEstado" >
</div>
<div class="form-control__input-group">
<label for="area">Area:</label>
<input type="number" name="area" id="inputArea">
</div>
<div class="form-control__options">
<input type="submit" value="Cadastrar" class="btn" id='btnSub'>
<a href="./parques-naturais.html" class="btn" >Voltar</a>
</div>
</form>
</div>
<!--
<iframe src="" frameborder="0" name="res-iframe" class="main__iframe"></iframe>
-->
</div>
</main>
<footer>
<span>Animals 2023 &copf;</span>
</footer>
<script src="../scripts/new-park.js"> </script>
</body>
</html>

+ 8
- 29
animals/pages/parques-naturais.html View File

@ -42,7 +42,9 @@
<div class="main_content">
<!-- <a href="#" class="btn">NEW</a> -->
<div class="main__options">
<a href="./new-parque.html" class="btn">NEW</a>
</div>
<table class="main__table">
<thead>
<tr>
@ -51,37 +53,12 @@
<th>Área:</th>
</tr>
</thead>
<tbody>
<tr>
<td>Parque Nacional da Chapada dos Veadeiros</td>
<td>Goiás</td>
<td>2.406 km²</td>
</tr>
<tr>
<td>Parque Nacional da Serra dos Órgãos</td>
<td>Rio de Janeiro</td>
<td>1.100 km²</td>
</tr>
<tr>
<td>Parque Nacional da Amazônia</td>
<td rowspan="2">Amazonas</td>
<td>10.707 km²</td>
</tr>
<tr>
<td>Parque Nacional do Jaú</td>
<td>22.720 km²</td>
</tr>
<tr>
<td>Parque Nacional do Pau Brasil</td>
<td>Bahia</td>
<td>190,35 km²</td>
</tr>
<tbody id="tbody" >
</tbody>
<tfoot>
<tfoot>
<tfoot id="tfoot">
<tr>
<td colspan="2">Área total:</td>
<td >37123,35 km²</td>
</tr>
</tfoot>
</table>
@ -96,6 +73,8 @@
<span>Animals 2023 &copf;</span>
</footer>
<script src="../scripts/parques.js"></script>
</body>
</html>
</html>

+ 33
- 0
animals/scripts/new-park.js View File

@ -0,0 +1,33 @@
const endPoint ="http://jailton.bootcamp.dev.netuno.org:20190/services";
document.querySelector('#btnSub').addEventListener('click', e => {
e.preventDefault();
const nome = document.querySelector('#inputNome').value;
const estado = document.querySelector('#inputEstado').value;
const area = document.querySelector('#inputArea').value;
const park = {nome:nome,estado:estado,area:Number(area)};
newParque(park);
})
async function newParque(park) {
const config = {
method:'POST',
body:JSON.stringify(park),
headers: {
"Content-type":"application/json",
}
}
try {
await fetch(`${endPoint}/parque`,config).then((res)=>res.json()).catch((err)=>err);
alert("Parque cadastrado com sucesso!");
} catch (error) {
alert("Erro ao cadastrar parke, erro: "+error.message);
}
}

+ 58
- 0
animals/scripts/newAnimal.js View File

@ -0,0 +1,58 @@
const endPoint ="http://jailton.bootcamp.dev.netuno.org:20190/services";
getParques();
/*
document.querySelector('#selParques').addEventListener('click', e => {
getParques();
})
*/
const btnSub = document.querySelector('#btnSub');
btnSub.addEventListener("click", async e=> {
const inputName = document.querySelector('#inputName');
const inputQuant = document.querySelector('#inputQuant');
const selectParques = document.querySelector('#selParques');
e.preventDefault();
const animal ={nome:inputName.value,quantidade:Number(inputQuant.value),parque:{id:Number(selectParques.value)}};
console.log(animal)
const config = {
method:'POST',
body:JSON.stringify(animal),
headers: {
"Content-type":"application/json",
}
}
try {
const data = await fetch(`${endPoint}/animal`,config)
.then((res) => res.json())
.catch((err)=>err);
alert('Animal cadastrado com sucesso!');
} catch (error) {
console.log(error);
}
});
//get all parques and build select options
async function getParques () {
const parques = await fetch(`${endPoint}/parque`).then((res)=>res.json()).catch((err)=>err);
const selectParques = document.querySelector('#selParques');
selectParques.innerHTML="";
parques.forEach((parque)=>{
const selectOption = document.createElement('option');
selectOption.value = parque.id;
selectOption.textContent = parque.nome;
selectParques.appendChild(selectOption);
})
}

+ 36
- 0
animals/scripts/parques.js View File

@ -0,0 +1,36 @@
const endPoint = "http://jailton.bootcamp.dev.netuno.org:20190/services";
getAllParques();
async function getAllParques() {
const parques = await fetch(`${endPoint}/parque`).then((res)=>res.json()).catch((err)=>err);
const tbody = document.querySelector('#tbody');
const trfoot = document.querySelector('#tfoot > tr');
tbody.innerHTML="";
let AreaTotal = 0;
parques.forEach(parque => {
const tr = document.createElement('tr');
const tdNome = document.createElement('td');
tdNome.textContent = parque.nome;
const tdEstado = document.createElement('td');
tdEstado.textContent = parque.estado;
const tdArea = document.createElement('td');
tdArea.textContent = `${parque.area.toFixed(0)} km²`;
tr.appendChild(tdNome);
tr.appendChild(tdEstado);
tr.appendChild(tdArea);
AreaTotal += parque.area;
tbody.appendChild(tr);
});
const tdTotal = document.createElement('td');
tdTotal.textContent = `${AreaTotal.toFixed(0)} km²`;
trfoot.appendChild(tdTotal);
}

Write Preview
Loading…
Cancel
Save