diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c741881 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-slate \ No newline at end of file diff --git a/modelo.html b/modelo.html index d9730a6..8379634 100644 --- a/modelo.html +++ b/modelo.html @@ -31,6 +31,7 @@ diff --git a/script.js b/script.js index 4aa0fda..7eeb2b4 100644 --- a/script.js +++ b/script.js @@ -2,6 +2,8 @@ function verificar() { var data = new Date() var ano = data.getFullYear() var fano = window.document.getElementById('txtano') + + var http = new XMLHttpRequest() // Cria request para envio de pesquisa no banco de dados da API var res = window.document.getElementById('res') if (fano.value.length == 0 || fano.value > ano) { @@ -11,37 +13,93 @@ function verificar() { var idade = ano - Number(fano.value) var gen = '' var img = window.document.createElement('img') + var tUrl = 'https://api.generated.photos/api/v1/faces' + img.setAttribute('id', 'foto') if (fsex[0].checked) { gen = 'Homem' + if (idade <= 10){ //Criança - img.setAttribute('src', 'homem_bebe.png') + tUrl = 'https://api.generated.photos/api/v1/faces?gender=male&age=child' // Define o url com os parametros }else if (idade < 21) { //Jovem - img.setAttribute('src', 'homem_jovem.png') + tUrl = 'https://api.generated.photos/api/v1/faces?gender=male&age=young-adult' // Define o url com os parametros } else if (idade < 50) { //Adulto - img.setAttribute('src', 'homem_adulto.png') + tUrl = 'https://api.generated.photos/api/v1/faces?gender=male&age=adult' // Define o url com os parametros } else { //Idoso - img.setAttribute('src', 'homem_idoso.png') + tUrl = 'https://api.generated.photos/api/v1/faces?gender=male&age=elderly' // Define o url com os parametros } + + http.open('GET', tUrl, true) // Abre a request em GET para o URL da API + http.setRequestHeader('Content-type', 'application/json') // Define o tipo de conteudo da request + http.setRequestHeader('Authorization', 'API-Key bSGCZorrN19B3rxPsM4EsQ') + http.responseType = 'json' // O tipo de resposta + + http.onload = function() { // Altera a imagem quando receber um status de OK, caso contrario, usa a Database local + console.log(http.response) + img.setAttribute('src', http.response.faces[0].urls[3][256]) + } + + http.onerror = function() { // Usa a database local em caso de erros na API + if(idade <= 10) { + img.setAttribute('src', 'homem_bebe.png') + } else if(idade <= 21) { + img.setAttribute('src', 'homem_jovem.png') + } else if(idade <= 50) { + img.setAttribute('src', 'homem_adulto.png') + } else { + img.setAttribute('src', 'homem_idoso.png') + } + } + + http.send() } else if (fsex[1].checked) { gen = 'Mulher' + if (idade <= 10){ //Criança - img.setAttribute('src', 'mulher_bebe.png') + tUrl = 'https://api.generated.photos/api/v1/faces?gender=female&age=child' // Define o url com os parametros }else if (idade < 21) { //Jovem - img.setAttribute('src', 'mulher_jovem.png') + tUrl = 'https://api.generated.photos/api/v1/faces?gender=female&age=young-adult' // Define o url com os parametros } else if (idade < 50) { //Adulto - img.setAttribute('src', 'mulher_adulta.png') + tUrl = 'https://api.generated.photos/api/v1/faces?gender=female&age=adult' // Define o url com os parametros } else { //Idoso - img.setAttribute('src', 'mulher_idosa.png') + tUrl = 'https://api.generated.photos/api/v1/faces?gender=female&age=elderly' // Define o url com os parametros + } + + http.open('GET', tUrl, true) // Abre a request em GET para o URL da API + http.setRequestHeader('Content-type', 'application/json') // Define o tipo de conteudo da request + http.setRequestHeader('Authorization', 'API-Key bSGCZorrN19B3rxPsM4EsQ') + http.responseType = 'json' // O tipo de resposta + + http.onload = function() { // Altera a imagem quando receber um status de OK, caso contrario, usa a Database local + console.log(http.response) + img.setAttribute('src', http.response.faces[0].urls[3][256]) + } + + http.onerror = function() { // Usa a database local em caso de erros na API + if (idade <= 10){ + //Criança + img.setAttribute('src', 'mulher_bebe.png') + }else if (idade < 21) { + //Jovem + img.setAttribute('src', 'mulher_jovem.png') + } else if (idade < 50) { + //Adulto + img.setAttribute('src', 'mulher_adulta.png') + } else { + //Idoso + img.setAttribute('src', 'mulher_idosa.png') + } } + + http.send() } res.style.textAlign = 'center' res.innerHTML = `Detectamos ${gen} com ${idade} anos` diff --git a/style.css b/style.css index b3dcf4d..e7a6675 100644 --- a/style.css +++ b/style.css @@ -21,4 +21,14 @@ section{ div{ text-align: center; +} + +#foto { + max-width: 250px; + border-radius: 50%; + margin-top: 25px; +} + +.notice { + font-size: 12px; } \ No newline at end of file