projeto finalizado

app.js

@@ -0,0 +1,189 @@
+//Variáveis globais utilizadas por funções diversas-----------------------------
+const profileContainer = document.querySelector('#show-profile')
+const profileShowRepositories = document.querySelector('#show-repositories')
+const profileShowFavorities = document.querySelector('#show-favorities')
+const profilenotfoundContainer = document.querySelector('#profilenotfound')
+const background = document.querySelector('.show-totalInfo').classList
+background["value"] = "show-totalInfoInicial"
+const api = `https://api.github.com/users/`
+
+//Buscando o perfil do usuário com chamada em outras funções--------------------
+const getProfile = async (user) => {
+  const responseProfile = await fetch(api + user)  
+  if(responseProfile["status"] === 404){    
+      return "not found"
+  }
+  return responseProfile.json()  
+}
+
+//Buscando repositórios---------------------------------------------------------
+const getRepositories = async (user) => {
+  const profile = await getProfile(user)
+  const responseRepositories = await fetch(profile["repos_url"])
+  const listRepositories = await responseRepositories.json()
+  const nameRepositories = listRepositories.map(item => item.name)
+  return nameRepositories
+}
+
+//Buscando favoritos------------------------------------------------------------
+const getFavorities = async (user) => {
+  const responseStarred = await fetch(`${api}${user}/starred`)
+  const listStarred = await responseStarred.json()
+  const nameStarred = listStarred.map(item => item.name)
+  return nameStarred
+}
+
+//Campo de busca de usuários com chamada imediata de função---------------------
+const searchProfile = (() => {  
+  const searchInput = document.querySelector('#search')
+  const emptyContainer = document.querySelector('#formEmpty')
+  form.addEventListener('submit', event => {
+    event.preventDefault()
+    const searchTerm = searchInput.value.trim()
+
+    /*Abaixo ocorre a limpeza de dados do DOM.A cada nova busca, o display na tela 
+    do DOM é eliminado, dando lugar a novos dados buscados*/
+    profileContainer.innerHTML = ''
+    profileShowRepositories.innerHTML = ''
+    profileShowFavorities.innerHTML = ''
+    emptyContainer.innerHTML = ''
+    profilenotfoundContainer.innerHTML = ''
+    if(!searchTerm){
+      background["value"] = "show-totalInfoInicial"
+      emptyContainer.innerHTML = `
+        <div class="warning-message">Digite um nome válido.</div>
+      `
+      return
+    }
+
+    /*Caso o nome buscado exista, as funções abaixo irão exibir o display com informações*/
+    addProfileInDOM(searchTerm) 
+    addRepositoriesInDOM(searchTerm)
+    addFavoritiesInDOM(searchTerm)
+    searchInput.value = ''
+  })
+})()
+
+//Adicionando o display principal de perfil com foto ao DOM---------------------
+const addProfileInDOM = async (user) => {  
+  const profile = await getProfile(user)  
+  if(profile === 'not found'){
+    background["value"] = "show-totalInfoInicial"
+    profilenotfoundContainer.innerHTML += `
+        <div class="warning-message">Perfil não encontrado.</div>
+      `
+      return
+  }
+  background["value"] = "show-totalInfo" 
+
+  const profileTemplate = `    
+    <div class="profile">
+      <img src="${profile["avatar_url"]}" class="avatar"/>
+      <a href="${profile["html_url"]}" target="_blank" class="visit-profile">
+        Visitar Perfil
+      </a>
+      <div class="repo">
+        <div class="repo-number">REPOSITÓRIOS: ${profile["public_repos"]}</div>
+        <div class="followers">SEGUIDORES: ${profile["followers"]}</div>
+        <div class="following">SEGUINDO: ${profile["following"]}</div>
+      </div>
+      <div class="repo-button">
+        <input type="button" id="repo-list" onclick="toggleRepo()" value="ESCONDER REPOSITÓRIO"/>          
+        <input type="button" id="repo-starred" onclick="toggleFav()" href="#show-favorities" value="ESCONDER FAVORITOS"/>      
+      </div>
+    </div>  
+  `  
+  profileContainer.innerHTML += profileTemplate
+}
+
+//Adicionando o display de repositórios ao DOM--------------------------------------------------------------------------*/
+const addRepositoriesInDOM = async (user) => {  
+  const repositories = await getRepositories(user)
+    let showRepositoriesTemplate = []
+    let contadorRep = 0
+    for(item of repositories){   
+      if(contadorRep % 2 === 0){
+        color = "itemRepositories1"
+        contadorRep += 1
+      }else{
+        color = "itemRepositories2"
+        contadorRep += 1
+      }
+      showRepositoriesTemplate +=`<div class=${color}>${item}</div>`
+    } 
+
+  profileShowRepositories.innerHTML += `
+    <div class="profileShowRepositories">
+      <div class="titleListRepositories">LISTA DE REPOSITÓRIO</div>
+      ${showRepositoriesTemplate}
+    </div>
+  `
+}
+
+//Adicionando o display de favoritos ao DOM-------------------------------------
+const addFavoritiesInDOM = async (user) => {  
+  const starred = await getFavorities(user)
+    let showFavoritiesTemplate = []
+    let contadorFav = 0;
+      for(item of starred){  
+        if(contadorFav % 2 === 0){
+          color = "itemRepositories1"
+          contadorFav += 1
+        }else{
+          color = "itemRepositories2"
+          contadorFav += 1
+        }  
+        showFavoritiesTemplate +=`<div class=${color}>${item}</div>`
+      } 
+
+  profileShowFavorities.innerHTML += `
+    <div class="profileShowFavorities">
+      <div class="titleListFavorities">LISTA DE FAVORITOS</div>
+      ${showFavoritiesTemplate}
+    </div>
+  `   
+}
+
+/*Função para alternância entre mostrar e não mostrar os repositórios-----------
+Chamada na funçao addProfileInDOM*/
+let flagRepo = 1
+const toggleRepo = () => {      
+  if(flagRepo === 1){
+    document.getElementById('show-repositories').style.display='none'
+    document.getElementById('repo-list').value = 'VER REPOSITÓRIO'
+    flagRepo = 0      
+  }else{      
+    document.getElementById('show-repositories').style.display='block'      
+    document.getElementById('repo-list').value = 'ESCONDER REPOSITÓRIO'
+    flagRepo = 1
+  }
+}
+
+/*Função para alternância entre mostrar e não mostrar os favoritos--------------
+Chamada na funçao addProfileInDOM*/
+let flagFav = 1
+const toggleFav = () => {       
+  if(flagFav === 1){
+    document.getElementById('show-favorities').style.display='none'
+    document.getElementById('repo-starred').value = 'VER FAVORITOS'
+    flagFav = 0
+  }else{
+    document.getElementById('show-favorities').style.display='block'
+    document.getElementById('repo-starred').value = 'ESCONDER FAVORITOS'
+    flagFav = 1
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

index.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Visualizador de Perfil</title>
+  <link rel="stylesheet" href="main.css">
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to view the full site.</noscript>
+  <div class="grid-container">
+    <!--header header header header header header header header header header header header header -->
+    <header class="header">
+      <nav class="header-navegacao">
+        <div class="header-nome">LEONARDO MUROS DO NASCIMENTO</div>
+        <div class="header-atalhos">          
+          <div><a href="#home" name="home">Home</a></div>
+          <div><a href="#sobre">Sobre</a></div>
+          <div><a href="#desafio">Desafio</a></div>    
+        </div> 
+      </nav>
+
+      <div class="header-informacao">
+        <div>Desenvolvedor Front End</div>
+        <div>Desafio Qconcursos.com</div>
+      </div> 
+
+      <nav class="header-links">
+        <a href="https://www.linkedin.com/in/leonardo-muros/" target="_blank">
+          <img src="image/linkedin.jpg"/>
+        </a>
+        <a href="https://github.com/LeonardoPerson?tab=repositories" target="_blank">
+          <img src="image/github.jpg"/>
+        </a>
+        <a href="https://www.facebook.com/leonardo.person.nascimento/" target="_blank">
+          <img src="image/facebook.jpg"/>
+        </a>
+      </nav>
+    </header>
+    <!--main main main main main main main main main main main main main main main main main main -->
+    <main class="main">
+      <section class="section-sobre">      
+        <h1><a name="sobre">Sobre</a></h1>
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
+          when an unknown printer took a galley of type and scrambled it to make a type 
+          specimen book. It has survived not only five centuries, but also the leap into 
+          electronic typesetting, remaining essentially unchanged. It was popularised 
+          in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
+          and more recently with desktop publishing software like Aldus PageMaker including 
+          versions of Lorem Ipsum.
+        </p>
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
+          when an unknown printer took a galley of type and scrambled it to make a type 
+          specimen book. It has survived not only five centuries, but also the leap into 
+          electronic typesetting, remaining essentially unchanged. It was popularised 
+          in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
+          and more recently with desktop publishing software like Aldus PageMaker including 
+          versions of Lorem Ipsum.
+        </p>
+
+        </p>
+      </section>
+      <!----------------------------------------------------------------------------------------->
+      <section class="section-desafio">
+        <h1>
+          <a name="desafio">Desafio</a>
+        </h1>
+        <!--------------------------------------------------------------------->
+        <form id="form">
+          <input            
+            id="search"
+            type="text"
+            placeholder="Insira o nome do perfil Github aqui . . ."            
+          />
+        </form>      
+        <!--------------------------------------------------------------------->    
+        <div id="formEmpty"></div>
+        <div id="profilenotfound"></div>
+        <!--------------------------------------------------------------------->
+        <div class="show-totalInfo">
+          <div id="show-profile"></div>
+          <div id="show-repositories" ></div>
+          <div id="show-favorities"></div>
+        </div>
+        <!--------------------------------------------------------------------->
+      </section>    
+    </main>
+    <!--footer footer footer footer footer footer footer footer footer footer footer footer footer -->
+    <footer class="footer">
+      <div>Desafio Desenvolvedor Front End</div>
+      <div>Qconcursos.com</div>
+    </footer>  
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>