Luizpedro challenge

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!**
+# Star Wars Luiz

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;
+}
+
+

index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Star Wars</title>
+
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <div class="containerLogo">
+        <img src="img/starwarslogo.png" alt="Star Wars Logo">
+    </div>
+
+    <div class="containerFiltros">
+        <span id="filtroPersonagem">
+            <input type="text" name="filtro" id="filtrarPersonagem" placeholder="Filtre por personagem">
+            <i class="fa fa-search"></i>
+        </span>
+
+        <span id="filtroEspecie">
+            <input type="text" name="filtro2" id="filtrarEspecie" placeholder="Filtre por espécie">
+            <i class="fa fa-search"></i>
+        </span>
+    </div>
+
+    <section class="gridPersonagens" onclick="pegarIdPersonagem()"></section>
+
+    <div id="modal-promocao" class="modal-container">
+        <div class="conteudoModal">
+            <button class="fechar">x</button>
+            <div class="containerInfos">
+                <h2 class="modalNome"></h2>
+                <p class="modalEspecies"></p>
+                <p class="modalAnoNascimento"></p>
+                <p class="modalCorOlho"></p>
+                <p class="modalGenero"></p>
+                <p class="modalCorCabelo"></p>
+                <p class="modalAltura"></p>
+                <p class="modalMassa"></p>
+                <p class="modalCorPele"></p>
+                <p class="modalMundo"></p>
+                <p class="modalFilmes"></p>
+            </div>
+        </div>
+    </div>
+
+
+    <script src="js/main.js"></script>
+    <script src="js/filtrosPersonagens.js"></script>
+    <script src="js/filtrosEspecie.js"></script>
+    <script src="js/modal.js"></script>
+
+</body>
+
+</html>

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");
+        }
+    }
+});

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");
+        }
+    }
+});
+
+