diff --git a/animals/css/global.css b/animals/css/global.css index d63b6df..314d3f4 100644 --- a/animals/css/global.css +++ b/animals/css/global.css @@ -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; - } \ No newline at end of file +.main__iframe{ + width: 550px; + border: 2px solid #000; +} + +.title > h1 > a{ + color: var(--primary-color); + text-decoration: underline; +} diff --git a/animals/css/styles.less b/animals/css/styles.less index f47b6f6..c6e6232 100644 --- a/animals/css/styles.less +++ b/animals/css/styles.less @@ -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{ diff --git a/animals/pages/animals.html b/animals/pages/animals.html index 514e4b9..51d4b17 100644 --- a/animals/pages/animals.html +++ b/animals/pages/animals.html @@ -43,40 +43,17 @@
NEW -
- + + - - - - - - - - - - - - - - - - - - - - - - - - +
Nome:QuantidadeQuantidade:Parque:
Onça-pintada100
Lobo-guará60
Panda-gigante200
Arara-azul-de-lear86
Pinguim-africano96
@@ -92,34 +69,39 @@ - + diff --git a/animals/pages/new-animal.html b/animals/pages/new-animal.html index 312e2c5..b707fe0 100644 --- a/animals/pages/new-animal.html +++ b/animals/pages/new-animal.html @@ -1,7 +1,7 @@ - + @@ -9,109 +9,77 @@ + 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"> Document - + - +
- - + +
-
+
+ +
+

Cadastrar Animal

+
+ +
-
-

Cadastrar Animal

+
+
+ +
-
- - -
- - -
- -
- - -
- -
- - -
-
- - -
- - +
+ + +
+ +
+ + +
+
+ + Voltar
- +
+ +
- - + - + diff --git a/animals/pages/new-parque.html b/animals/pages/new-parque.html new file mode 100644 index 0000000..22f2ae9 --- /dev/null +++ b/animals/pages/new-parque.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + Document + + + + +
+ + +
+ +
+ +
+ +
+

Cadastrar Park

+
+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + Voltar +
+
+ +
+ +
+ +
+ + + + + + + + + diff --git a/animals/pages/parques-naturais.html b/animals/pages/parques-naturais.html index be8bd5f..dfbee99 100644 --- a/animals/pages/parques-naturais.html +++ b/animals/pages/parques-naturais.html @@ -42,7 +42,9 @@
- +
+ NEW +
@@ -51,37 +53,12 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + - + -
Área:
Parque Nacional da Chapada dos VeadeirosGoiás2.406 km²
Parque Nacional da Serra dos ÓrgãosRio de Janeiro1.100 km²
Parque Nacional da AmazôniaAmazonas10.707 km²
Parque Nacional do Jaú22.720 km²
Parque Nacional do Pau BrasilBahia190,35 km²
Área total:37123,35 km²
@@ -96,6 +73,8 @@ Animals 2023 𝕔 + + - \ No newline at end of file + diff --git a/animals/scripts/new-park.js b/animals/scripts/new-park.js new file mode 100644 index 0000000..d7ac7b7 --- /dev/null +++ b/animals/scripts/new-park.js @@ -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); + } + + } diff --git a/animals/scripts/newAnimal.js b/animals/scripts/newAnimal.js new file mode 100644 index 0000000..16d0821 --- /dev/null +++ b/animals/scripts/newAnimal.js @@ -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); + }) +} + diff --git a/animals/scripts/parques.js b/animals/scripts/parques.js new file mode 100644 index 0000000..db2fb68 --- /dev/null +++ b/animals/scripts/parques.js @@ -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); +} + +