diff --git a/README.md b/README.md
index 1227316..7f0d490 100644
--- a/README.md
+++ b/README.md
@@ -1,42 +1 @@
-# Desafio front-end da mLearn
-
-Esse repositório é o nosso desafio para avaliar o quão bom desenvolvedor front-end você é.
-
-Provavelmente você já está participando do nosso processo de contratação, mas se você caiu aqui por acaso, leia o documento até o final e caso haja interesse, você pode começar daqui mesmo.
-
-
-## Sobre o desafio
-
-Esse é um desafio, não um teste ou uma prova de faculdade, portanto não há uma única resposta certa.
-
-Daremos a você alguns requisitos que devem ser cumpridos, e pelos quais você será avaliado, mas deixamos livre a escolha do método de solução.
-
-O que nós esperamos aprender de você com o desafio:
-
-- Seu estilo de trabalho
-- Como você pensa e resolve problemas
-- Como você se comunica
-
-O que nós esperamos que você aprenda sobre a mLearn:
-
-- Como nós trabalhamos como um time.
-- Tenha uma visão próxima dos desafios que enfrentamos no dia-a-dia.
-
-## Próximos passos
-
-1. Faça um _fork_ desse repositório para sua conta pessoal.
-2. As instruções do desafio se encontram no arquivo [`CHALENGE.md`](/CHALENGE.md).
-2. Resolva o desafio da forma que você julgar mais adequada.
-3. Preferencialmente utilize uma _branch_ chamada `desafio` ou com o seu nome (`nome-sobrenome`) para o desenvolvimento. E submeta o _pull-request_ para essa mesma _branch_.
-
-## Considerações
-
-- Nós não iremos limitar a sua escolha por ferramentas e bibliotecas. Porém faça escolhas que sejam condizentes com o desafio apresentado. Para que utilizar uma bazuca para matar uma formiga?
-- O tempo limite para execução do teste é de **2 horas**.
-- Tente escrever o melhor código possível para que possamos avaliar o seu _pull-request_ com mais facilidade. E lembre-se: Você vai ter que explicar pessoalmente para nós depois.
-
-## Dúvidas?
-
-Ficou com alguma dúvida sobre como irá funcionar o processo? Entre em contato que nós te ajudaremos com o processo.
-
-**Boa sorte!**
\ No newline at end of file
+# Star Wars Luiz
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..d77dddd
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,170 @@
+:root {
+ --corPreta: #1D1E20;
+ --corBranca: #ffffff;
+ --corAmarela: #FFC500;
+ --corCinza: #6A7575;
+ }
+html{
+ background-color: var(--corPreta);
+ font-family: 'Lexend Deca', sans-serif;
+ color:var(--corBranca);
+}
+*:focus {
+ outline: none;
+}
+
+.containerLogo{
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ margin: 2em 0em 3em 0em;
+}
+.containerLogo img{
+ height: 8em;
+}
+
+.containerFiltros{
+ display:flex;
+ justify-content: space-evenly;
+ margin: 0em 0em 2em 0em;
+}
+#filtrarPersonagem, #filtrarEspecie{
+ background-color: transparent;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-bottom: solid 1px var(--corAmarela);
+ font-size: 1.2em;
+ color: var(--corCinza);
+ padding-bottom: 0.3em;
+}
+#filtroPersonagem, #filtroEspecie{
+ position: relative;
+}
+#filtroPersonagem i, #filtroEspecie i{
+ position: absolute;
+ right: 0em;
+ top:0;
+ color: var(--corAmarela);
+}
+
+.gridPersonagens{
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0em 2em 2em 2em;
+ margin: 0em 2em 2em 2em;
+}
+.box{
+ border: solid 1px var(--corAmarela);
+ display: flex;
+ flex-direction: column;
+ flex: 0 0 calc(25% - 2em);
+
+ box-sizing: border-box;
+ /* padding: 1em 1em 1em 1em; */
+ margin: 1em 1em 1em 1em;
+ position: relative;
+ height: 10em;
+ cursor: pointer;
+}
+.box h2{
+ text-align: left;
+ color: var(--corBranca);
+ position: absolute;
+ bottom: 0em;
+ left: 1em;
+ margin-right: 0.5em;
+}
+.generoPersonagem{
+ position: absolute;
+ top:2em;
+ left: 1em;
+ text-align: left;
+ color: var(--corBranca);
+ font-size: 0.7em;
+ font-weight: bold;
+ font-style: italic;
+}
+.especiePersonagem{
+ position: absolute;
+ top: 1em;
+ right: 0em;
+ font-size: 0.7em;
+ font-weight: bold;
+ color: var(--corBranca);
+ padding: 1em 2em 1em 2em;
+ background-color: var(--corAmarela);
+}
+
+.modal-container{
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0,0,0, 0.5);
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ z-index: 2000;
+ display: none;
+ justify-content: center;
+ align-items: center;
+}
+
+.mostrar{
+ display: flex;
+}
+
+.conteudoModal{
+ background: var(--corBranca);
+ width: 60%;
+ color:var(--corPreta);
+ position: relative;
+}
+.containerInfos{
+ text-align: center;
+}
+.containerInfos h2{
+ color: var(--corAmarela);
+}
+
+
+.fechar{
+ position: absolute;
+ top: 0;
+ right: 0.2em;
+ background: transparent;
+ border: none;
+ font-size: 1.5em;
+ cursor: pointer;
+}
+
+@keyframes modal{
+ from{
+ opacity: 0;
+ transform: translate3d(0, -60px, 0)
+ }
+ to{
+ opacity: 1;
+ transform: translate3d(0, 0, 0)
+ }
+}
+.mostrar .conteudoModal{
+ animation: modal .3s;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+.invisivel{
+ display: none;
+}
+
+
diff --git a/img/starwarslogo.png b/img/starwarslogo.png
new file mode 100644
index 0000000..3105f4d
Binary files /dev/null and b/img/starwarslogo.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d253156
--- /dev/null
+++ b/index.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Star Wars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/filtrosEspecie.js b/js/filtrosEspecie.js
new file mode 100644
index 0000000..f59b360
--- /dev/null
+++ b/js/filtrosEspecie.js
@@ -0,0 +1,25 @@
+var campoFiltroEspecie = document.querySelector("#filtrarEspecie");
+campoFiltroEspecie.addEventListener("input", function() {
+
+ var arrayBox = document.querySelectorAll(".box");
+ if (this.value.length > 0) {
+ for (var i = 0; i < arrayBox.length; i++) {
+
+ var box = arrayBox[i];
+ var pEspecie = box.querySelector(".especiePersonagem");
+ var titulo = pEspecie.textContent;
+ var expressao = new RegExp(this.value, "i");
+
+ if (!expressao.test(titulo)) {
+ box.classList.add("invisivel");
+ } else {
+ box.classList.remove("invisivel");
+ }
+ }
+ } else {
+ for (var i = 0; i < arrayBox.length; i++) {
+ var box = arrayBox[i];
+ box.classList.remove("invisivel");
+ }
+ }
+});
diff --git a/js/filtrosPersonagens.js b/js/filtrosPersonagens.js
new file mode 100644
index 0000000..1330cfb
--- /dev/null
+++ b/js/filtrosPersonagens.js
@@ -0,0 +1,27 @@
+var campoFiltro = document.querySelector("#filtrarPersonagem");
+campoFiltro.addEventListener("input", function() {
+
+ var arrayBox = document.querySelectorAll(".box");
+ if (this.value.length > 0) {
+ for (var i = 0; i < arrayBox.length; i++) {
+
+ var box = arrayBox[i];
+ var h2Nome = box.querySelector(".nomePersonagem");
+ var nome = h2Nome.textContent;
+ var expressao = new RegExp(this.value, "i");
+
+ if (!expressao.test(nome)) {
+ box.classList.add("invisivel");
+ } else {
+ box.classList.remove("invisivel");
+ }
+ }
+ } else {
+ for (var i = 0; i < arrayBox.length; i++) {
+ var box = arrayBox[i];
+ box.classList.remove("invisivel");
+ }
+ }
+});
+
+
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..2f1229a
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,72 @@
+async function fetchPeople(){
+ return fetch("https://swapi.co/api/people/")
+ .then(resp => resp.json())
+ .then(personagens => {
+
+ let id;
+ var campoid;
+ let nome;
+ let anoNascimento;
+ let elementoEspecie;
+
+ let novaBox;
+ let gridPersonagens;
+
+ personagens.results.forEach(personagem => {
+ novaBox = document.createElement("div");
+ novaBox.classList.add("box");
+
+
+ var url = personagem.url;
+ id = url.match(/\d/g);
+ id = id.join("");
+ campoid = document.createElement("span");
+ campoid.classList.add("campoid");
+ campoid.classList.add("invisivel");
+ campoid.innerHTML = id;
+
+ nome = document.createElement("h2");
+ nome.innerHTML = personagem.name;
+ nome.classList.add("nomePersonagem");
+
+ anoNascimento = document.createElement("p");
+ anoNascimento.classList.add("generoPersonagem");
+ anoNascimento.innerHTML = `Nasceu em ${personagem.birth_year}`;
+
+ elementoEspecie = document.createElement("p");
+ elementoEspecie.classList.add("especiePersonagem");
+ elementoEspecie.setAttribute('name', `${personagem.species[0]}`);
+
+ novaBox.appendChild(nome);
+ novaBox.appendChild(anoNascimento);
+ novaBox.appendChild(elementoEspecie);
+ novaBox.appendChild(campoid);
+
+ gridPersonagens = document.querySelector(".gridPersonagens");
+ gridPersonagens.appendChild(novaBox);
+
+ });
+
+ completarEspecies();
+ salvarLocalStorage(personagens);
+ })
+ .catch(err => console.error(err))
+}
+fetchPeople();
+
+function completarEspecies(){
+
+ var elementosEspecie = document.querySelectorAll(".especiePersonagem");
+ elementosEspecie.forEach(especieElemento => {
+ fetchSpecies(especieElemento.getAttribute('name'), especieElemento);
+ });
+}
+
+async function fetchSpecies(url, especieElemento){
+ return await fetch(url)
+ .then(resp => resp.json())
+ .then(especies => {
+ especieElemento.innerHTML = especies.name;
+ })
+ .catch(err => console.error(err))
+}
\ No newline at end of file
diff --git a/js/modal.js b/js/modal.js
new file mode 100644
index 0000000..a8fd386
--- /dev/null
+++ b/js/modal.js
@@ -0,0 +1,97 @@
+function pegarIdPersonagem(){
+
+ var boxPersonagens = document.querySelectorAll(".box");
+ boxPersonagens.forEach(box => {
+ box.addEventListener('click', (e) => {
+
+ var elemento = e.target;
+ var idPersonagem = elemento.children[3].innerText;
+ iniciaModal(idPersonagem);
+
+ })
+ })
+
+}
+
+
+function iniciaModal(idPersonagem){
+
+ var arrayPersonagensLocalStorage = JSON.parse(localStorage.getItem("arrayPersonagens"));
+
+ var urlPersonagem = arrayPersonagensLocalStorage.results[idPersonagem-1].url;
+ var idPersonagemLocalStorage = urlPersonagem.match(/\d/g);
+ idPersonagemLocalStorage = idPersonagemLocalStorage.join("");
+
+ let modalNome = document.querySelector(".modalNome");
+ modalNome.innerHTML = arrayPersonagensLocalStorage.results[idPersonagem-1].name;
+
+ let modalAnoNascimento = document.querySelector(".modalAnoNascimento");
+ modalAnoNascimento.innerHTML = `Nasceu em: ${arrayPersonagensLocalStorage.results[idPersonagem-1].birth_year}`;
+
+ let modalCorOlho = document.querySelector(".modalCorOlho");
+ modalCorOlho.innerHTML = `Cor do olho: ${arrayPersonagensLocalStorage.results[idPersonagem-1].eye_color}`;
+
+ let modalGenero = document.querySelector(".modalGenero");
+ modalGenero.innerHTML = `Sexo: ${arrayPersonagensLocalStorage.results[idPersonagem-1].gender}`;
+
+ let modalCorCabelo = document.querySelector(".modalCorCabelo");
+ modalCorCabelo.innerHTML = `Cor do cabelo: ${arrayPersonagensLocalStorage.results[idPersonagem-1].hair_color}`;
+
+ let modalAltura = document.querySelector(".modalAltura");
+ modalAltura.innerHTML = `Altura: ${arrayPersonagensLocalStorage.results[idPersonagem-1].height}`;
+
+ let modalMassa = document.querySelector(".modalMassa");
+ modalMassa.innerHTML = `Massa: ${arrayPersonagensLocalStorage.results[idPersonagem-1].mass}`;
+
+ let modalCorPele = document.querySelector(".modalCorPele");
+ modalCorPele.innerHTML = `Cor da pele: ${arrayPersonagensLocalStorage.results[idPersonagem-1].skin_color}`;
+
+ let modalMundo = document.querySelector(".modalMundo");
+ modalMundo.setAttribute('homeworld', `${arrayPersonagensLocalStorage.results[idPersonagem-1].homeworld}`);
+ fetchHomeWorld(modalMundo.getAttribute('homeworld'), modalMundo);
+
+ let modalFilmes = document.querySelector(".modalFilmes");
+ modalFilmes.setAttribute('films', `${arrayPersonagensLocalStorage.results[idPersonagem-1].films[0]}`);
+ fetchFilms(modalFilmes.getAttribute('films'), modalFilmes);
+
+ let modalEspecies = document.querySelector(".modalEspecies");
+ modalEspecies.setAttribute('especie', `${arrayPersonagensLocalStorage.results[idPersonagem-1].species[0]}`);
+ fetchSpecies(modalEspecies.getAttribute('especie'), modalEspecies);
+
+ const modal = document.querySelector(".modal-container");
+ modal.classList.add("mostrar");
+
+ modal.addEventListener('click', (e) => {
+ if(e.target.id == "modal-promocao" || e.target.className == "fechar"){
+ modal.classList.remove('mostrar');
+ }
+ })
+
+}
+
+async function fetchFilms(url, elemento){
+ return await fetch(url)
+ .then(resp => resp.json())
+ .then(filmes => {
+ elemento.innerHTML = `Filmes: ${filmes.title}`;
+ })
+ .catch(err => console.error(err))
+}
+
+async function fetchHomeWorld(url, elemento){
+ return await fetch(url)
+ .then(resp => resp.json())
+ .then(homeworld => {
+ elemento.innerHTML = `Mundo: ${homeworld.name}`;
+ })
+ .catch(err => console.error(err))
+}
+
+
+function salvarLocalStorage(personagens){
+
+ var arrayPersonagens = [];
+ arrayPersonagens = personagens;
+ localStorage.setItem("arrayPersonagens", JSON.stringify(arrayPersonagens));
+}
+
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..d77dddd
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,170 @@
+:root {
+ --corPreta: #1D1E20;
+ --corBranca: #ffffff;
+ --corAmarela: #FFC500;
+ --corCinza: #6A7575;
+ }
+html{
+ background-color: var(--corPreta);
+ font-family: 'Lexend Deca', sans-serif;
+ color:var(--corBranca);
+}
+*:focus {
+ outline: none;
+}
+
+.containerLogo{
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ margin: 2em 0em 3em 0em;
+}
+.containerLogo img{
+ height: 8em;
+}
+
+.containerFiltros{
+ display:flex;
+ justify-content: space-evenly;
+ margin: 0em 0em 2em 0em;
+}
+#filtrarPersonagem, #filtrarEspecie{
+ background-color: transparent;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-bottom: solid 1px var(--corAmarela);
+ font-size: 1.2em;
+ color: var(--corCinza);
+ padding-bottom: 0.3em;
+}
+#filtroPersonagem, #filtroEspecie{
+ position: relative;
+}
+#filtroPersonagem i, #filtroEspecie i{
+ position: absolute;
+ right: 0em;
+ top:0;
+ color: var(--corAmarela);
+}
+
+.gridPersonagens{
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0em 2em 2em 2em;
+ margin: 0em 2em 2em 2em;
+}
+.box{
+ border: solid 1px var(--corAmarela);
+ display: flex;
+ flex-direction: column;
+ flex: 0 0 calc(25% - 2em);
+
+ box-sizing: border-box;
+ /* padding: 1em 1em 1em 1em; */
+ margin: 1em 1em 1em 1em;
+ position: relative;
+ height: 10em;
+ cursor: pointer;
+}
+.box h2{
+ text-align: left;
+ color: var(--corBranca);
+ position: absolute;
+ bottom: 0em;
+ left: 1em;
+ margin-right: 0.5em;
+}
+.generoPersonagem{
+ position: absolute;
+ top:2em;
+ left: 1em;
+ text-align: left;
+ color: var(--corBranca);
+ font-size: 0.7em;
+ font-weight: bold;
+ font-style: italic;
+}
+.especiePersonagem{
+ position: absolute;
+ top: 1em;
+ right: 0em;
+ font-size: 0.7em;
+ font-weight: bold;
+ color: var(--corBranca);
+ padding: 1em 2em 1em 2em;
+ background-color: var(--corAmarela);
+}
+
+.modal-container{
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0,0,0, 0.5);
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ z-index: 2000;
+ display: none;
+ justify-content: center;
+ align-items: center;
+}
+
+.mostrar{
+ display: flex;
+}
+
+.conteudoModal{
+ background: var(--corBranca);
+ width: 60%;
+ color:var(--corPreta);
+ position: relative;
+}
+.containerInfos{
+ text-align: center;
+}
+.containerInfos h2{
+ color: var(--corAmarela);
+}
+
+
+.fechar{
+ position: absolute;
+ top: 0;
+ right: 0.2em;
+ background: transparent;
+ border: none;
+ font-size: 1.5em;
+ cursor: pointer;
+}
+
+@keyframes modal{
+ from{
+ opacity: 0;
+ transform: translate3d(0, -60px, 0)
+ }
+ to{
+ opacity: 1;
+ transform: translate3d(0, 0, 0)
+ }
+}
+.mostrar .conteudoModal{
+ animation: modal .3s;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+.invisivel{
+ display: none;
+}
+
+
diff --git a/public/img/starwarslogo.png b/public/img/starwarslogo.png
new file mode 100644
index 0000000..3105f4d
Binary files /dev/null and b/public/img/starwarslogo.png differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..d253156
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Star Wars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/js/filtrosEspecie.js b/public/js/filtrosEspecie.js
new file mode 100644
index 0000000..f59b360
--- /dev/null
+++ b/public/js/filtrosEspecie.js
@@ -0,0 +1,25 @@
+var campoFiltroEspecie = document.querySelector("#filtrarEspecie");
+campoFiltroEspecie.addEventListener("input", function() {
+
+ var arrayBox = document.querySelectorAll(".box");
+ if (this.value.length > 0) {
+ for (var i = 0; i < arrayBox.length; i++) {
+
+ var box = arrayBox[i];
+ var pEspecie = box.querySelector(".especiePersonagem");
+ var titulo = pEspecie.textContent;
+ var expressao = new RegExp(this.value, "i");
+
+ if (!expressao.test(titulo)) {
+ box.classList.add("invisivel");
+ } else {
+ box.classList.remove("invisivel");
+ }
+ }
+ } else {
+ for (var i = 0; i < arrayBox.length; i++) {
+ var box = arrayBox[i];
+ box.classList.remove("invisivel");
+ }
+ }
+});
diff --git a/public/js/filtrosPersonagens.js b/public/js/filtrosPersonagens.js
new file mode 100644
index 0000000..1330cfb
--- /dev/null
+++ b/public/js/filtrosPersonagens.js
@@ -0,0 +1,27 @@
+var campoFiltro = document.querySelector("#filtrarPersonagem");
+campoFiltro.addEventListener("input", function() {
+
+ var arrayBox = document.querySelectorAll(".box");
+ if (this.value.length > 0) {
+ for (var i = 0; i < arrayBox.length; i++) {
+
+ var box = arrayBox[i];
+ var h2Nome = box.querySelector(".nomePersonagem");
+ var nome = h2Nome.textContent;
+ var expressao = new RegExp(this.value, "i");
+
+ if (!expressao.test(nome)) {
+ box.classList.add("invisivel");
+ } else {
+ box.classList.remove("invisivel");
+ }
+ }
+ } else {
+ for (var i = 0; i < arrayBox.length; i++) {
+ var box = arrayBox[i];
+ box.classList.remove("invisivel");
+ }
+ }
+});
+
+
diff --git a/public/js/main.js b/public/js/main.js
new file mode 100644
index 0000000..2f1229a
--- /dev/null
+++ b/public/js/main.js
@@ -0,0 +1,72 @@
+async function fetchPeople(){
+ return fetch("https://swapi.co/api/people/")
+ .then(resp => resp.json())
+ .then(personagens => {
+
+ let id;
+ var campoid;
+ let nome;
+ let anoNascimento;
+ let elementoEspecie;
+
+ let novaBox;
+ let gridPersonagens;
+
+ personagens.results.forEach(personagem => {
+ novaBox = document.createElement("div");
+ novaBox.classList.add("box");
+
+
+ var url = personagem.url;
+ id = url.match(/\d/g);
+ id = id.join("");
+ campoid = document.createElement("span");
+ campoid.classList.add("campoid");
+ campoid.classList.add("invisivel");
+ campoid.innerHTML = id;
+
+ nome = document.createElement("h2");
+ nome.innerHTML = personagem.name;
+ nome.classList.add("nomePersonagem");
+
+ anoNascimento = document.createElement("p");
+ anoNascimento.classList.add("generoPersonagem");
+ anoNascimento.innerHTML = `Nasceu em ${personagem.birth_year}`;
+
+ elementoEspecie = document.createElement("p");
+ elementoEspecie.classList.add("especiePersonagem");
+ elementoEspecie.setAttribute('name', `${personagem.species[0]}`);
+
+ novaBox.appendChild(nome);
+ novaBox.appendChild(anoNascimento);
+ novaBox.appendChild(elementoEspecie);
+ novaBox.appendChild(campoid);
+
+ gridPersonagens = document.querySelector(".gridPersonagens");
+ gridPersonagens.appendChild(novaBox);
+
+ });
+
+ completarEspecies();
+ salvarLocalStorage(personagens);
+ })
+ .catch(err => console.error(err))
+}
+fetchPeople();
+
+function completarEspecies(){
+
+ var elementosEspecie = document.querySelectorAll(".especiePersonagem");
+ elementosEspecie.forEach(especieElemento => {
+ fetchSpecies(especieElemento.getAttribute('name'), especieElemento);
+ });
+}
+
+async function fetchSpecies(url, especieElemento){
+ return await fetch(url)
+ .then(resp => resp.json())
+ .then(especies => {
+ especieElemento.innerHTML = especies.name;
+ })
+ .catch(err => console.error(err))
+}
\ No newline at end of file
diff --git a/public/js/modal.js b/public/js/modal.js
new file mode 100644
index 0000000..a8fd386
--- /dev/null
+++ b/public/js/modal.js
@@ -0,0 +1,97 @@
+function pegarIdPersonagem(){
+
+ var boxPersonagens = document.querySelectorAll(".box");
+ boxPersonagens.forEach(box => {
+ box.addEventListener('click', (e) => {
+
+ var elemento = e.target;
+ var idPersonagem = elemento.children[3].innerText;
+ iniciaModal(idPersonagem);
+
+ })
+ })
+
+}
+
+
+function iniciaModal(idPersonagem){
+
+ var arrayPersonagensLocalStorage = JSON.parse(localStorage.getItem("arrayPersonagens"));
+
+ var urlPersonagem = arrayPersonagensLocalStorage.results[idPersonagem-1].url;
+ var idPersonagemLocalStorage = urlPersonagem.match(/\d/g);
+ idPersonagemLocalStorage = idPersonagemLocalStorage.join("");
+
+ let modalNome = document.querySelector(".modalNome");
+ modalNome.innerHTML = arrayPersonagensLocalStorage.results[idPersonagem-1].name;
+
+ let modalAnoNascimento = document.querySelector(".modalAnoNascimento");
+ modalAnoNascimento.innerHTML = `Nasceu em: ${arrayPersonagensLocalStorage.results[idPersonagem-1].birth_year}`;
+
+ let modalCorOlho = document.querySelector(".modalCorOlho");
+ modalCorOlho.innerHTML = `Cor do olho: ${arrayPersonagensLocalStorage.results[idPersonagem-1].eye_color}`;
+
+ let modalGenero = document.querySelector(".modalGenero");
+ modalGenero.innerHTML = `Sexo: ${arrayPersonagensLocalStorage.results[idPersonagem-1].gender}`;
+
+ let modalCorCabelo = document.querySelector(".modalCorCabelo");
+ modalCorCabelo.innerHTML = `Cor do cabelo: ${arrayPersonagensLocalStorage.results[idPersonagem-1].hair_color}`;
+
+ let modalAltura = document.querySelector(".modalAltura");
+ modalAltura.innerHTML = `Altura: ${arrayPersonagensLocalStorage.results[idPersonagem-1].height}`;
+
+ let modalMassa = document.querySelector(".modalMassa");
+ modalMassa.innerHTML = `Massa: ${arrayPersonagensLocalStorage.results[idPersonagem-1].mass}`;
+
+ let modalCorPele = document.querySelector(".modalCorPele");
+ modalCorPele.innerHTML = `Cor da pele: ${arrayPersonagensLocalStorage.results[idPersonagem-1].skin_color}`;
+
+ let modalMundo = document.querySelector(".modalMundo");
+ modalMundo.setAttribute('homeworld', `${arrayPersonagensLocalStorage.results[idPersonagem-1].homeworld}`);
+ fetchHomeWorld(modalMundo.getAttribute('homeworld'), modalMundo);
+
+ let modalFilmes = document.querySelector(".modalFilmes");
+ modalFilmes.setAttribute('films', `${arrayPersonagensLocalStorage.results[idPersonagem-1].films[0]}`);
+ fetchFilms(modalFilmes.getAttribute('films'), modalFilmes);
+
+ let modalEspecies = document.querySelector(".modalEspecies");
+ modalEspecies.setAttribute('especie', `${arrayPersonagensLocalStorage.results[idPersonagem-1].species[0]}`);
+ fetchSpecies(modalEspecies.getAttribute('especie'), modalEspecies);
+
+ const modal = document.querySelector(".modal-container");
+ modal.classList.add("mostrar");
+
+ modal.addEventListener('click', (e) => {
+ if(e.target.id == "modal-promocao" || e.target.className == "fechar"){
+ modal.classList.remove('mostrar');
+ }
+ })
+
+}
+
+async function fetchFilms(url, elemento){
+ return await fetch(url)
+ .then(resp => resp.json())
+ .then(filmes => {
+ elemento.innerHTML = `Filmes: ${filmes.title}`;
+ })
+ .catch(err => console.error(err))
+}
+
+async function fetchHomeWorld(url, elemento){
+ return await fetch(url)
+ .then(resp => resp.json())
+ .then(homeworld => {
+ elemento.innerHTML = `Mundo: ${homeworld.name}`;
+ })
+ .catch(err => console.error(err))
+}
+
+
+function salvarLocalStorage(personagens){
+
+ var arrayPersonagens = [];
+ arrayPersonagens = personagens;
+ localStorage.setItem("arrayPersonagens", JSON.stringify(arrayPersonagens));
+}
+