pedroparadella · juniorflp · Apr 3, 2022 · Apr 3, 2022 · Apr 4, 2022 · Apr 4, 2022
diff --git a/README.md b/README.md
@@ -1,24 +1,24 @@
-# Avaliação Junior
-Olá desenvolvedor!\
-Tudo bem?! 😊\
-\
-Seja bem-vindo, o intuito do teste não é reprovar e sim conhecer seu melhor estilo de programar e resolver problemas.
-
-## O que fazer
-1. Fazer um fork desse repositório e trabalhar no seu ambiente.
-2. Replicar o layout do link abaixo, pode usar dados de um JSON local:\
-[Link para o layout](https://xd.adobe.com/view/c715f110-fbd4-4323-be0c-0e453c1450db-9246)
-2. Fazer a funcionalidade de busca funcionar.
-3. Os cliques nos botões de editar/excluir/criar card podem exibir uma mensagem pro usuário de que a funcionalidade não foi implementada.
-4. Ao finalizar a avaliação modifique esse README com as instruções de como podemos fazer o seu código rodar na nossa máquina. Ou seja, passo a passo do que instalar e de quais comandos rodar para podermos visualizar o seu trabalho!
-5. Realizar um Pull Request para o nosso repositório e mandar um e-mail para [email protected] com o assunto "Avaliação Junior", informando que finalizou a avaliação e colocando o link do Pull Request. 
-
-## Dicas
-* Não foi definido limite de linhas e colunas, portanto fique à vontade para tal escolha.
-* Gostamos de interfaces limpas e elegantes.
-
-## Quais tecnologias usar
-* Deixaremos a seu critério qual tecnologia utilizar no entanto você terá mais pontos conosco se utilizar React para criação da interface e também o uso de pré-processadores/styled-components para o CSS.
-
-## Desafios se você se sentir confiante
-* Usar alguma API na internet, tipo https://pokeapi.co/, para trazer os dados que vão aparecer nos cards da tela.
+# projeto loja com Javascript
+
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------
+Olá me chamo Eduardo e esse é meu primeiro teste, uma landing page feita com Java script, html e css (puro).
+Criei uma pagina simulando uma loja de roupas tendo como referencia o layout do teste impar [Link para o layout](https://xd.adobe.com/view/c715f110-fbd4-4323-be0c-0e453c1450db-9246)
+Nesse teste não foram usadas ferramentas como react pois ainda estou em fase de estudo, porém fiz meu melhor usando JS puro.
+A pagina tambem esta responsiva.
+
+
+### Pré-requisitos
+Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
+[Git](https://git-scm.com),  Além disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)
+
+depois que o codigo estiver aberto em seu vscode é so ir na pasta do projeto e abrir o arquivo index.html.
+ou se preferir você pode clicar no link https://juniorflp.github.io/frontendjr/  e acessar a pagina pelo navegador.
+
+Tecnologias usadas no projeto:
+*html
+*css
+*java script
+
+
+
diff --git a/acessorios.png b/acessorios.png
diff --git a/bg4.png b/bg4.png
diff --git a/bone.png b/bone.png
diff --git a/calca.png b/calca.png
diff --git a/index.html b/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<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="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" 
+    integrity="sha384-/frq1SRXYH/bSyou/HUp/hib7RVN1TawQYja658FEOodR/FQBKVqT9Ol+Oz3Olq5" crossorigin="anonymous">
+    <title>Teste Impar</title>
+</head>
+<body>
+    <header>
+        <section class="cabeça" >
+            <p id="titulo">DESAFIO IMPAR</p> <!-- logotipo-->
+            <nav>
+                <ul class="navlinks">
+                    <li class="a"><a href="#bg">HOME</a></li>
+                    <li class="a"><a href="#card-lista">SERVIÇOS</a></li>
+                    <li class="a"><a href="#contato">CONTATO</a></li> 
+                    <li><a href="https://www.impar.com.br/" target="blank"><i class="fa-brands fa-facebook-square"></i></a></li>
+                    <li><a href="https://www.impar.com.br/" target="blank"><i class="fa-brands fa-instagram-square"></i></a></li>
+                </ul>
+            </nav>
+        </section>
+    </header>  
+  <div class="bg" id="bg"></div>      <!--div do back ground-->  
+  <div class="arrow"><!--seta que volta ao topo-->
+      <div class="seta"><a href="#titulo"><i class="fa-solid fa-arrow-up"></i></a></div>
+    </div>
+    <main>      
+        <section class="container">
+            <div class="input-filter">  <!--barra de pesquisa-->
+                <input type="text" name="" id="filter"
+                 placeholder= "   Digite aqui sua busca..." onkeyup="pesquisaProduto()">
+                <div><i class="fa-solid fa-magnifying-glass"></i></div>
+            </div>
+            <section class="card-lista" id="card-lista"> <!--cartoes-->
+                <div class="row">
+                    <div class="card">
+                        <img src="tshirt.png" alt="">
+                        <div class="card-body">
+                            <h5 class="card-title">T-shirts <span>camisetas</span></h5>
+                            <div class="pe" onclick="clicar()"> <p class="p1"><i class="fa-solid fa-pencil"></i>   Editar</p> <p class="p2"><i class="fa-solid fa-trash-can"></i>   excluir</p></div> 
+                        </div> 
+                    </div>
+
+                    <div class="card">
+                        <img src="calca.png" alt="">
+                        <div class="card-body">
+                            <h5 class="card-title">Calças</h5>
+                            <div class="pe"onclick="clicar()"> <p class="p1"><i class="fa-solid fa-pencil"></i>   Editar</p> <p class="p2"><i class="fa-solid fa-trash-can"></i>   excluir</p></div>                         
+                        </div>
+                    </div>    
+                    <div class="card">
+                        <img src="shorts.png" alt="">
+                        <div class="card-body">
+                            <h5 class="card-title">Shorts<span>bermudas</span> </h5>
+                            <div class="pe"onclick="clicar()"> <p class="p1"><i class="fa-solid fa-pencil"></i>   Editar</p> <p class="p2"><i class="fa-solid fa-trash-can"></i>   excluir</p></div>                        
+                        </div>
+                    </div>        
+                    <div class="card">
+                        <img src="tenis.png" alt="">
+                        <div class="card-body">
+                            <h5 class="card-title">Tênis <span>sapatos</span></h5>
+                            <div class="pe"onclick="clicar()"> <p class="p1"><i class="fa-solid fa-pencil"></i>   Editar</p> <p class="p2"><i class="fa-solid fa-trash-can"></i>   excluir</p></div>                         
+                        </div>
+                    </div>            
+                    <div class="card">
+                        <img src="bone.png" alt="">
+                        <div class="card-body">
+                            <h5 class="card-title">Bonés</h5>
+                            <div class="pe"onclick="clicar()"> <p class="p1"><i class="fa-solid fa-pencil"></i>   Editar</p> <p class="p2"><i class="fa-solid fa-trash-can"></i>   excluir</p></div>                       
+                        </div>
+                    </div>    
+                    <div class="card">
+                        <img src="acessorios.png" alt="">
+                        <div class="card-body">
+                            <h5 class="card-title">Acessórios <span>oculos relogio</span></h5>
+                            <div class="pe"onclick="clicar()"> <p class="p1"><i class="fa-solid fa-pencil"></i>   Editar</p> <p class="p2"><i class="fa-solid fa-trash-can"></i>   excluir</p></div>                         
+                        </div>
+                    </div>        
+                </div>
+            </section>
+        </section>
+
+
+    </main>
+    <section> 
+        <div id="contato">
+            <div class="info">
+                <div class="email">
+                    <p><i class="fa-solid fa-envelope"></i></p>
+                    <h4>E-mail </h4>
+                    <p>[email protected]</p>
+                </div>
+                <div class="linkedin">
+                    <p><i class="fa-brands fa-linkedin"></i></p>
+                    <h4>Linkedin </h4>
+                    <p>www.linkedin.com/company/impar-brasil/</p>
+                </div>
+                <div class="site">
+                   <p><i class="fa-solid fa-at"></i></p>
+                    <h4>Site </h4>
+                    <p>www.impar.com.br</p>
+                </div>
+
+            </div>
+        </div>
+    </section>
+    <footer> <h4>Em breve novidades!</h4></footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,32 @@
+
+function clicar(){
+    alert('Essa funcionalidade ainda não foi implementada.')
+}
+
+function pesquisaProduto(){ 
+    const input = document.querySelector('#filter').value.toUpperCase()// pegar valor da barra de pesquisa
+    const cardcontainer = document.querySelector('#card-lista')// pegar lista de cartoes
+    console.log(cardcontainer)
+    const cards = cardcontainer.getElementsByClassName('card')//pegar cartoes usando className
+    console.log(cards)
+
+    for(let i = 0; i < cards.length; i++){//laço para percorrer todos os cartoes
+        let title = cards[i].querySelector(".card-body .card-title")//percorrer todos os titulos dos cartoes
+        console.log(title)
+
+        if(title.innerText.toUpperCase().indexOf(input) > -1 ){
+            cards[i].style.display = ""
+        }else{
+            cards[i].style.display = "none" 
+        }
+    }
+
+}
+
+
+
+
+
+
+
+
diff --git a/shorts.png b/shorts.png