{"id":26558278,"url":"https://github.com/yasmim-coimbra/fetch-github-api","last_synced_at":"2026-04-18T01:32:05.885Z","repository":{"id":281920313,"uuid":"946876200","full_name":"Yasmim-Coimbra/fetch-github-api","owner":"Yasmim-Coimbra","description":"Projeto focado em usar o fetch para coletar, via github API, os dados do usuário da plataforma","archived":false,"fork":false,"pushed_at":"2025-03-18T01:36:34.000Z","size":2733,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-22T03:36:25.210Z","etag":null,"topics":["css","fetch-api","flexbox","github-api","html","javascript","responsive-layout"],"latest_commit_sha":null,"homepage":"https://yasmim-coimbra.github.io/fetch-github-api/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yasmim-Coimbra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-11T20:13:09.000Z","updated_at":"2025-05-27T11:18:02.000Z","dependencies_parsed_at":"2025-10-13T18:44:51.230Z","dependency_job_id":"9c679ee7-37e2-4ce9-b8c2-03e5938293f3","html_url":"https://github.com/Yasmim-Coimbra/fetch-github-api","commit_stats":null,"previous_names":["yasmim-coimbra/fetch-github-api"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Yasmim-Coimbra/fetch-github-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yasmim-Coimbra%2Ffetch-github-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yasmim-Coimbra%2Ffetch-github-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yasmim-Coimbra%2Ffetch-github-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yasmim-Coimbra%2Ffetch-github-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yasmim-Coimbra","download_url":"https://codeload.github.com/Yasmim-Coimbra/fetch-github-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yasmim-Coimbra%2Ffetch-github-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31953511,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"ssl_error","status_checked_at":"2026-04-18T00:39:20.671Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","fetch-api","flexbox","github-api","html","javascript","responsive-layout"],"created_at":"2025-03-22T12:32:13.429Z","updated_at":"2026-04-18T01:32:05.852Z","avatar_url":"https://github.com/Yasmim-Coimbra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fetch Github API 🔎\n\nProjeto criado como forma de avaliar o aprendizado de JavaScript no curso DevQuest. 👾\n\n## Objetivo 🎯\n\nO objetivo deste projeto é criar um formulário que recebe o nome de um usuário do GitHub e exibe suas informações, repositórios e atividades recentes.\n\n## Requisitos 📝\n\n- O formulário deve ter um campo de entrada para o nome de um usuário do GitHub.\n\n- Quando o formulário for enviado, o nome do usuário deve ser buscado na API do GitHub.\n  - Caso o botao seja clicado sem digitar o nome de um usuário, uma mensagem de erro deve ser exibida na tela.\n  - Caso o usuário não seja encontrado, uma mensagem de erro deve ser exibida na tela.\n\n- As informações do usuário devem ser exibidas na tela.\n  - Avatar\n  - Nome (caso não houver, mostrar uma mensagem indicando isso)\n  - Biografia (caso não houver, mostrar uma mensagem indicando isso)\n  - Quantidade de seguidores\n  - Quantidade de seguindos\n  - Quantidade de repositórios\n\n- Os repositórios do usuário devem ser exibidos na tela (caso não houver, mostrar uma mensagem indicando isso).\n  - Nome\n  - Link\n  - Quantidade de forks\n  - Quantidade de estrelas\n  - Quantidade de watchers\n  - Linguagem (caso não houver, mostrar uma mensagem indicando isso)\n\n- As atividades recentes do usuário devem ser exibidas na tela (caso não houver, mostrar uma mensagem indicando isso).\n  - Nome do repositório\n  - Tipo de evento\n  - Mensagem de commit se o evento for do tipo 'PushEvent'\n  - Mensagem diferente se o evento for do tipo 'CreateEvent'\n\n## Tecnologias utilizadas 🛠️\n\n- HTML\n\n- CSS\n\n- JavaScript\n\n- API\n  - [GitHub API](https://docs.github.com/en/rest)\n\n## Aprendizado 📚\n\n- Aprendi a organizar melhor meus scripts em:\n  - index (arquivo principal, contém o formulário e a chamada das funções)\n  - variables (arquivo que contém variáveis globais)\n  - objects (pasta que contém objetos e armazenam seus dados e métodos)\n  - services (pasta que contém funções que fazem as chamadas das APIs e seus respectivos tratamentos)\n\n- Pratiquei a exportação e importação de variáveis, objetos e funções entre arquivos.\n\n- Pratiquei a utilização de objetos para armazenar dados e métodos importantes para o projeto. Exemplo:\n\n  ``` javascript\n  const userData = {\n    avatarUrl: \"\",\n    name: \"\",\n    bio: \"\",\n    userName: \"\",\n    followers: 0,\n    following: 0,\n    repositoriesQuantity: 0,\n    repositories: [],\n    events: [],\n    setInfo(githubUser) {\n        this.avatarUrl = githubUser.avatar_url;\n        this.name = githubUser.name;\n        this.bio = githubUser.bio;\n        this.userName = githubUser.login;\n        this.followers = githubUser.followers;\n        this.following = githubUser.following;\n        this.repositoriesQuantity = githubUser.public_repos;\n    },\n    setRepositories(repos) {\n        this.repositories = repos;\n    },\n    setEvents(events) {\n        this.events = events;\n    }\n  } \n  ```\n\n- Pratiquei a utilização da propriedade `innerHTML` para alterar o conteúdo de elementos HTML, além de métodos como `appendChild`, `replaceWith`, `createElement` e `CreateTextNode`. Exemplo:\n\n  ``` javascript\n    renderEvents(events) {\n\t\t  this.profileData.innerHTML += `\n            \u003cdiv class=\"events section\"\u003e\n                \u003ch2\u003eEventos\u003c/h2\u003e\n                ul id=\"events-list\"\u003e\u003c/ul\u003e\n            \u003c/div\u003e`;\n\t\t  const eventsList = this.profileData.querySelector(\"#events-list\");\n\n\t\t  if (events.length === 0) {\n\t\t\t  const p = document.createElement(\"p\");\n\t\t\t  p.textContent = \"Este usuário não possui nenhuma atividade recente.\";\n\t\t\t  eventsList.replaceWith(p);\n\t\t\t  return;\n\t\t  }\n\n\t\t  for (const event of events) {\n\t\t\t  const li = document.createElement(\"li\");\n\t\t\t  const strong = document.createElement(\"strong\");\n\t\t\t  strong.textContent = event.repo.name;\n\n\t\t\t  li.appendChild(strong);\n\t\t\t  li.appendChild(\n\t\t\t\t  document.createTextNode(\n\t\t\t\t\t  event.type === \"PushEvent\"\n\t\t\t\t\t\t  ? ` - ${event.payload.commits[0].message}`\n\t\t\t\t\t\t  : \" - Sem mensagem de commit\",\n\t\t\t\t  ),\n\t\t\t  );\n\n\t\t\t  eventsList.appendChild(li);\n\t\t  }\n    }\n\n  ```\n\n## Preview do site 👀\n\n![Preview Gif](./src/design/fetch-github-api-preview.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyasmim-coimbra%2Ffetch-github-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyasmim-coimbra%2Ffetch-github-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyasmim-coimbra%2Ffetch-github-api/lists"}