update: card list index sistem

j4marcos · Dec 14, 2023 · d578c81 · d578c81
1 parent c2a4676
commit d578c81
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 110 deletions.
diff --git a/index.html b/index.html
@@ -5,76 +5,19 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        body {
-            background-color: rgb(40, 35, 61);
-            color: white;
-        }
-
-        a {
-            color: yellow
-        }
-
-        .projectslink {
-            display: flex;
-            flex-wrap: wrap;
-            overflow-x: hidden;
-            justify-content: center;
-
-        }
-
-        h1 {
-            justify-content: center;
-            text-align: center;
-        }
-
-        div.card {
-            background-color: rgb(38, 38, 82);
-            font-family: Arial, Helvetica, sans-serif;
-            width: 150px;
-            height: 150px;
-            margin: 20px;
-            padding: 10px;
-            border-radius: 10px;
-            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.226);
-
-        }
-
-        div.finalMsg {
-            background-color: rgb(40, 19, 59);
-            width: auto;
-            padding: 10px;
-            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.226);
-            margin-top: 0;
-            margin: 50px;
-            color: yellow;
-            font-family: Arial, Helvetica, sans-serif;
-            font-size: 1.5rem;
-        }
-
-        div#faltaProjetos {
-            margin-top: 0;
-        }
-
-        @media (max-width: 700px) {
-            div.card {
-                margin: 7px;
-            }
-        }
-    </style>
+    <link rel="stylesheet" href="src/style.css">
     <title>projects hub</title>
 </head>
 
 <body>
     <h1>Hub dos projetos</h1>
 
-
     <div class="projectslink"></div>
     <div id="msgFinal"></div>
 
     <!-- <img src="https://media.tenor.com/yhUkQ85oxDsAAAAd/cachorro-brasil.gif" alt="menino e cachorro caramelo dançando"> -->
 
-    <script src="script.js"></script>
+    <script src="src/script.js"></script>
 
 </body>
 

diff --git a/script.js b/script.js
diff --git a/src/script.js b/src/script.js
@@ -0,0 +1,38 @@
+
+ const divLinkCards = document.querySelector('.projectslink')
+ const projectslinks = []
+
+ for (let num = 1 of 50) {
+    projectslinks.push(`https://j4marcos.github.io/50-projects-in-50-days/project${num.padStart(2,'0')}/index.html`)
+ }
+
+const pegarSite = new Promise()
+
+projectslinks.forEach((link, num) => { 
+    pegarSite((sucesso, falha) => {
+    const site = require(link)  
+    sucesso(site)
+    falha(site)
+})
+.then(site => site.text())
+.then(data => {
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(data, 'text/html');
+
+    var pageTitle = doc.title
+    inserirCard(num, link, pageTitle)
+})
+.catch(error => console.error(error))
+
+})
+
+
+
+
+function inserirCard(num, title, pLink) {
+    const card = document.createElement("div.card")
+    const pLink = document.createElement('h3')
+    pLink.innerHTML = `<a href="project${num.padStart(2,"0")}/index.html" target="_blank" rel="next">${numpadStart(2,"0")} : ${title}</a>`
+    pLink.appendChild(card)
+    card.appendChild(divLinkCards)
+}
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,55 @@
+body {
+    background-color: rgb(40, 35, 61);
+    color: white;
+}
+
+a {
+    color: yellow
+}
+
+.projectslink {
+    display: flex;
+    flex-wrap: wrap;
+    overflow-x: hidden;
+    justify-content: center;
+
+}
+
+h1 {
+    justify-content: center;
+    text-align: center;
+}
+
+div.card {
+    background-color: rgb(38, 38, 82);
+    font-family: Arial, Helvetica, sans-serif;
+    width: 150px;
+    height: 150px;
+    margin: 20px;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.226);
+
+}
+
+div.finalMsg {
+    background-color: rgb(40, 19, 59);
+    width: auto;
+    padding: 10px;
+    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.226);
+    margin-top: 0;
+    margin: 50px;
+    color: yellow;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 1.5rem;
+}
+
+div#faltaProjetos {
+    margin-top: 0;
+}
+
+@media (max-width: 700px) {
+    div.card {
+        margin: 7px;
+    }
+}