update all project

GuiTavs7 · Nov 1, 2024 · 8b97df1 · 8b97df1
1 parent 0962dc1
commit 8b97df1
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 59 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+
 <html lang="pt-br">
 
 <head>
@@ -12,25 +13,32 @@
 
     <link rel="stylesheet" href="src/css/reset.css">
     <link rel="stylesheet" href="src/css/styles.css">
+    <link rel="stylesheet" href="src/css/responsive.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
 </head>
 
 <body>
+
     <main>
+
         <i class="devicon-github-original"></i>
 
         <section class="container">
+
             <header>
                 <h2>Buscar Usuário</h2>
                 <input type="text" id="input-search" placeholder="Digite o nome do usuário no GitHub">
                 <input type="button" value="Buscar" id="btn-search">
             </header>
 
             <div class="profile-data"></div>
+
         </section>
+
     </main>
 
     <script type="module" src="src/scripts/index.js"></script>
+
 </body>
 
 </html>
diff --git a/src/css/responsive.css b/src/css/responsive.css
@@ -0,0 +1,41 @@
+@media (max-width: 1280px) {
+    .container {
+      flex-direction: column;
+      width: 90%;
+      border-radius: 20px;
+    }
+
+    .container header {
+      width: 100%;
+    }
+
+    .container header h1 {
+      font-size: 24px;
+      text-align: center;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .container header #input-search,
+    .container header #btn-search
+    {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 425px) {
+    main {
+      padding: 15% 0;    
+    }
+
+    .container .profile-data .info img{
+      margin-bottom: 20px;
+    }
+
+    .container .profile-data .info img,
+    .container .profile-data .info .data
+    {
+      width: 100%;
+      padding: 0;
+    }
+  }
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,5 +1,9 @@
+/* IMPORTAÇÃO DA FONTE */
+
 @import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");
 
+/* ESTILOS PARA O DOCUMENTO HTML */
+
 * {
   margin: 0;
   padding: 0;
@@ -85,6 +89,8 @@ main {
   border-color: #ffffff;
 }
 
+/* INFORMAÇÕES DO USUÁRIO */
+
 .container .profile-data{
   display: flex;
   flex-direction: column;
@@ -121,6 +127,8 @@ main {
   line-height: 23px;
 }
 
+/* INFORMAÇÕES DO USUÁRIO - SEGUIDORES */
+
 .container .profile-data .info .follow{
   width: 100%;
   display: flex;
@@ -142,7 +150,12 @@ main {
   color: #fff;
 }
 
-/* REPOSITORIES */
+/* REPOSITÓRIOS DO USUÁRIO */
+
+.container .profile-data .repositories{
+  display: flex;
+  flex-direction: column;
+}
 
 .container .profile-data .repositories h2{
   margin-bottom: 30px;
@@ -155,82 +168,73 @@ main {
   justify-content: center;
 }
 
-.container .profile-data .repositories ul li a{
-  padding: 20px;
+.container .profile-data .repositories ul li{
+  padding: 10px;
   border: 1px solid grey;  
   margin: 20px;
   display: block;
   border-radius: 7px;
   transition: 0.3s ease-in-out;
 }
 
-.container .profile-data .repositories ul li a:hover{
+.container .profile-data .repositories ul li:hover{
   background-color:hotpink;
-  color: #fff
+  color: #fff;
 }
 
 .container .profile-data.hide{
   display: none;
 }
 
-/* EVENTS */
+.container .profile-data .repositories ul li .repo-container{
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.container .profile-data .repositories ul li .repo-info{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  gap: 10px;
+}
+
+.container .profile-data .repositories ul li p{
+  padding: 5px;
+  background-color: slateblue;
+  border-radius: 5px;
+}
+
+/* EVENTOS DO USUÁRIO */
 
 .container .profile-data .events h2{
+  margin-top: -80px;
   margin-bottom: 20px;
   text-align: center;
 }
 
 .container .profile-data .events ul{
   display: flex;
   flex-direction: column;
-  gap:20px;
   justify-content: center;
 }
 
-.container .profile-data .events ul li a:hover{
-  background-color:hotpink;
-  color: #fff
-}
-
-
-@media (max-width: 1280px) {
-  .container {
-    flex-direction: column;
-    width: 90%;
-    border-radius: 20px;
-  }
-
-  .container header {
-    width: 100%;
-  }
-
-  .container header h1 {
-    font-size: 24px;
-    text-align: center;
-  }
+.container .profile-data .events ul li{
+  padding: 10px;
+  border: 1px solid grey;  
+  margin: 10px;
+  display: block;
+  border-radius: 7px;
 }
 
-@media (max-width: 768px) {
-  .container header #input-search,
-  .container header #btn-search
-  {
-    width: 100%;
-  }
+.container .profile-data .events ul li a{
+  font-weight: 600;
+  transition: 0.3s ease-in-out;
 }
 
-@media (max-width: 425px) {
-  main {
-    padding: 15% 0;    
-  }
-
-  .container .profile-data .info img{
-    margin-bottom: 20px;
-  }
-
-  .container .profile-data .info img,
-  .container .profile-data .info .data
-  {
-    width: 100%;
-    padding: 0;
-  }
-}
+.container .profile-data .events ul li a:hover{
+  background-color:hotpink;
+  color: #fff;
+  padding: 5px;
+  border-radius: 7px;
+}
diff --git a/src/scripts/objects/screen.js b/src/scripts/objects/screen.js
@@ -1,10 +1,12 @@
+// OBJETO RESPONSÁVEL POR RENDERIZAR AS INFORMAÇÕES NA PÁGINA - MODIFICA O HTML
+
 const screen = {
 
     userProfile: document.querySelector(".profile-data"),
 
     renderUser(user){
 
-        // Usuário
+        // USUÁRIO
 
         this.userProfile.innerHTML = `<div class = "info">
 
@@ -23,34 +25,55 @@ const screen = {
 
                                     </div>`
 
-        // Repositórios
+        // REPOSITÓRIOS
 
         let repositoriesItens = ""
 
-        user.repositories.forEach(repo => repositoriesItens += `<li><a href="${repo.html_url}" target = "_blank">${repo.name}</a></li>`);
+        user.repositories.forEach(repo => repositoriesItens += `<li>
+
+                                                                    <div class="repo-container">
+
+                                                                        <a href="${repo.html_url}" target = "_blank">${repo.name}</a>
+
+                                                                        <div class="repo-info">
+                                                                            <p>🍴 ${repo.forks_count}</p>
+                                                                            <p>🌟 ${repo.stargazers_count}</p>
+                                                                            <p>👀 ${repo.watchers_count}</p>
+                                                                            <p>💻 ${repo.language}</p>                                                                                                                                    
+                                                                        </div>
+
+                                                                    </div>
+                                                                    
+                                                
+                                                                </li>`);
 
         if(user.repositories.length > 0){
             this.userProfile.innerHTML += `<div class="repositories section">
-                                                <h2>Repositórios</h2>
+                                                <h2>📚 Repositórios 📚</h2>
                                                 <ul>${repositoriesItens}</ul>
                                             </div>`
         }
 
+        // EVENTOS
+
         let eventsItens = ""
 
         user.events.filter(event => event.type === "CreateEvent" || event.type === "PushEvent").forEach(event => {
+
             if (event.type === "PushEvent"){
-                eventsItens += `<li> Push no repositório <a href="https://github.com/${event.repo.name}" target="_blank"> ${event.repo.name}</a> ${event.payload.commits.slice(-1)[0].message} </li>`;
+                eventsItens += `<li> <a href="https://github.com/${event.repo.name}" target="_blank"> ${event.repo.name}</a> - ${event.payload.commits.slice(-1)[0].message} </li>`;
                 console.log(eventsItens);
             }
+
             else if (event.type === "CreateEvent"){
                 eventsItens += `<li> Create ${event.payload.ref_type} (Sem mensagem de commit!) </li>`;
             }
+
         });
 
         if (eventsItens){
             this.userProfile.innerHTML += ` <div class="events section">
-                                                <h2>Eventos</h2>
+                                                <h2>🔄 Eventos 🔄</h2>
                                                 <ul>${eventsItens}</ul>
                                             </div>`;
         }

diff --git a/src/scripts/objects/user.js b/src/scripts/objects/user.js
@@ -1,3 +1,5 @@
+// OBJETO PARA AJUNTAR TODAS PROPRIEDADES DO USUÁRIO
+
 const user = {
     avatarUrl: '',
     name: '',

diff --git a/src/scripts/services/repositories.js b/src/scripts/services/repositories.js
@@ -3,7 +3,7 @@
 import { baseUrl, repositoriesQuantity } from "../variables.js";
 
 async function getRepositories(userName){
-    const response = await fetch(`${baseUrl}/${userName}/repos?per_page=${repositoriesQuantity}`);
+    const response = await fetch(`${baseUrl}/${userName}/repos?per_page=${repositoriesQuantity}&sort=updated`);
     return await response.json();
 }
 

diff --git a/src/scripts/variables.js b/src/scripts/variables.js
@@ -1,5 +1,5 @@
 const baseUrl = "https://api.github.com/users";
-const repositoriesQuantity = 10;
-const eventsQuantity = 15;
+const repositoriesQuantity = 16;
+const eventsQuantity = 16;
 
 export {baseUrl, repositoriesQuantity, eventsQuantity};