diff --git a/repos/github.svg b/repos/github.svg new file mode 100644 index 0000000..e12d2cb --- /dev/null +++ b/repos/github.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/repos/repos.css b/repos/repos.css index ad63aa9..e23c8ab 100644 --- 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 index 9dc82b2..4b32d41 100644 --- a/repos/repos.html +++ b/repos/repos.html @@ -11,37 +11,12 @@ - - - - -
+
\ No newline at end of file diff --git a/repos/repos.js b/repos/repos.js new file mode 100644 index 0000000..3754f19 --- /dev/null +++ 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)); +}); \ No newline at end of file diff --git a/repos/repos.json b/repos/repos.json index 7a4ec8d..ee871fa 100644 --- 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%" + } } ] } \ No newline at end of file