Continued with the repos page

ElBi21 · Apr 5, 2024 · 7726b34 · 7726b34
1 parent c73ef9d
commit 7726b34
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 27 deletions.
diff --git a/repos/github.svg b/repos/github.svg
diff --git a/repos/repos.css b/repos/repos.css
@@ -21,7 +21,20 @@
     margin: 10px;
 }
 
-.repotitle !important {
+.repotitlebox {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: center;
+}
+
+.repolinkimage {
+    width: 25px;
+    margin: 0 0 0 10px;
+}
+
+.repotitle {
     color: white;
     font-size: 14px;
 }

diff --git a/repos/repos.html b/repos/repos.html
@@ -11,37 +11,12 @@
         <!--CSS Style Sheets-->
         <link rel="stylesheet" href="../styles/text_style.css">
         <link rel="stylesheet" href="repos.css">
-        <!--<link rel="script" href="repos.json">-->
-
-        <!--Scripts-->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     </head>
     <body>
-        <script>
-$.getJSON("repos.json", function(json) {
-    let repoGrid = document.getElementsByClassName("repogrid")
-    for (let item of json.repos) {
-        // Create box
-        let repoBox = document.createElement('div');
-        repoBox.classList.add("repo");
-        repoGrid[0].appendChild(repoBox);
-
-        // Add title
-        let repoTitleNode = document.createElement("p");    
-        let boldTitle = document.createElement("b");
-        let repoTitle = document.createTextNode(item.title);
-
-        repoTitleNode.classList.add("repotitle");
-        repoTitleNode.appendChild(boldTitle);
-        boldTitle.appendChild(repoTitle);
-        repoBox.appendChild(repoTitleNode);
-
-    }
-});
-        </script>
         <div>
             <div class="repogrid">
             </div>
+            <script src="repos.js"></script>
         </div>
     </body>
 </html>
diff --git a/repos/repos.js b/repos/repos.js
@@ -0,0 +1,31 @@
+document.addEventListener("DOMContentLoaded", function () {
+    fetch('repos.json')
+        .then(response => response.json())
+        .then(data => {
+            let repoGrid = document.getElementsByClassName("repogrid")
+            for (let item of data.repos) {
+                // Create box
+                let repoBox = document.createElement('div');
+                repoBox.classList.add("repo");
+                repoGrid[0].appendChild(repoBox);
+
+                // Create title DIV
+                let repoTitleBox = document.createElement("div");
+                repoTitleBox.classList.add("repotitlebox");
+                repoBox.appendChild(repoTitleBox)
+
+                // Add title
+                let repoTextTitle = document.createElement("p");
+                repoTextTitle.textContent = `${item.title}`;
+                repoTextTitle.classList.add("repotext");
+                repoTitleBox.appendChild(repoTextTitle);
+
+                // Add link
+                let repoLinkImg = document.createElement("img");
+                repoLinkImg.src = "github.svg";
+                repoLinkImg.classList.add("repolinkimage");
+                repoTitleBox.appendChild(repoLinkImg);
+            }
+        })
+        .catch(error => console.error("Error fetching JSON data:", error));
+});
diff --git a/repos/repos.json b/repos/repos.json
@@ -16,6 +16,15 @@
                 "HTML": "42.96%",
                 "JavaScript": "2.90%"
             }
+        },
+        {
+            "title": "R All Over It",
+            "link": "https://github.com/ElBi21/R-All-Over-It/",
+            "languages" : {
+                "CSS": "54.14%",
+                "HTML": "42.96%",
+                "JavaScript": "2.90%"
+            }
         }
     ]
 }