33º Desafio: Exibição de Perfis do Github - Peso 2

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, crianças inocentes! Hoje o desafio é criar um app super bacana, o Github Profiles, utilizando CSS, JS e HTML. Mas, antes de começarmos, vamos entender um pouco sobre a importância do Github e de como as chamadas de APIs podem ser úteis no desenvolvimento web.

O Github é uma plataforma de hospedagem de código-fonte e repositórios, utilizada por desenvolvedores em todo o mundo. É uma ferramenta fundamental para a colaboração em projetos de software livre e também é amplamente utilizado em empresas para controle de versão e gerenciamento de projetos.

Já as chamadas de APIs permitem que os desenvolvedores acessem dados de outros serviços ou aplicativos, o que pode ser muito útil para complementar as funcionalidades de um projeto. No caso do Github Profiles, vamos utilizar a API do Github para obter as informações básicas do perfil de um usuário.

Agora, vamos ao desafio! Vocês devem criar um site onde o usuário possa digitar o nome de um usuário do Github em um campo de pesquisa e, ao clicar em um botão, as informações básicas do perfil desse usuário serão exibidas. Vocês devem utilizar CSS para estilizar o site e deixá-lo com um visual incrível, JS para fazer as chamadas de API do Github e HTML para a estrutura do site.

Para ajudá-los, vou dar algumas dicas de possíveis comandos de CSS e JS que podem ser utilizados:

CSS: Utilizar classes para estilizar os diferentes elementos do site; Usar o seletor "hover" para adicionar efeitos quando o usuário passar o mouse sobre algum elemento; Utilizar "position: fixed" para fixar elementos na página.

JS: Utilizar a função "fetch" para fazer as chamadas de API do Github, ou a biblioteca axios; Criar elementos HTML dinamicamente com o método "createElement"; Usar o método "appendChild" para adicionar elementos criados dinamicamente à página.

Lembrem-se de não utilizar soluções prontas e colocar a mão na massa, crianças! Com um pouco de criatividade e esforço, tenho certeza que vocês vão conseguir criar um Github Profiles incrível. Boa sorte!

Exemplo

https://user-images.githubusercontent.com/30157522/224494591-f96f889a-0292-474f-9dc7-6b1741bcd9a7.mp4

Additional tips

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Github Profiles</title>
  </head>
  <body>
    <form class="user-form" id="form">
      <input type="text" id="search" placeholder="Search a Github User">
    </form>

    <main id="main"></main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</html>

Equipe: Resistech Alunas: Simone Breeman e Lorenna Guedes

Explicação :

Construímos um site simples que realiza uma busca de informações de perfil de um usuário do Github, conforme solicitado no desafio, utilizando a API para exibir informações da consulta.

O HTML define a estrutura da página.. O CSS foi utilizado para definir a aparência visual da página e adicionar estilos de animação ao botão de busca e ao campo de entrada de texto quando o mouse passa sobre eles. Outro recurso usado foi a fixação de elementos na página. Para isso, usamos a categoria de histórico de buscas.

No JavaScript , usamos a função "fetch" e "createElement" conforme solicitado no desafio.

Deafio33.zip

iurygdeoliveira / Web-development-classes