Added top 3 coding languages to each project with colors

rashelrr · Dec 14, 2023 · a9897b7 · a9897b7
1 parent f355953
commit a9897b7
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 9 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -741,8 +741,6 @@ section {
 }
 
 .projects .icon-box .language-color {
-  background-color: #3572A5;
-  border: 1px solid #3572A5;
   display: inline-block;
   width: 10px;
   height: 10px;
@@ -753,6 +751,7 @@ section {
   font-size: 14px;
   display: inline-block;
   font-weight: 600;
+  padding-right: 10px;
 }
 
 .projects .icon-box p {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -175,6 +175,7 @@
       "rashelrr/Amoeba": "Amoeba"
     };
 
+    // Add project details by updating html/css
     let i = 1;
     for (const repo of repos) {
       if (Object.keys(projectNames).includes(repo.full_name)) {
@@ -184,15 +185,41 @@
         var p = select("#project" + i + " .about");
         p.innerHTML = repo.description;
 
-        var p = select("#project" + i + " .language");
-        p.innerHTML = repo.language;
+        // Get top 3 coding languages in this repo
+        const urlLanguages = repo.languages_url;
+        let resLangs = await fetch(urlLanguages);
+        let dataLangs = await resLangs.json();
+        var arrLangs = Object.keys(dataLangs).slice(0, 3);
 
+        // Add coding languages to HTML text
+        var pMatches = select("#project" + i + " .language", true);
+        let langIdx = 0;
+        pMatches.forEach((p) => {
+          if (typeof arrLangs[langIdx] !== "undefined") {
+            p.innerHTML = arrLangs[langIdx];
+            langIdx++;
+          }
+        });
 
-        let color = dataColors[repo.language].color;
-        var span = select("#project" + i + " .language-color");
-        span.style.backgroundColor = color;
-        span.style.border = "1px solid " + color;
+        // Get colors for each coding language using online JSON
+        let arrColors = []
+        for (const lang of arrLangs) {
+          let color = dataColors[lang].color;
+          arrColors.push(color);
+        };
 
+        // Add color next to each language
+        var spanMatches = select("#project" + i + " .language-color", true);
+        let colorIdx = 0;
+        spanMatches.forEach((span) => {
+          if (typeof arrColors[colorIdx] !== "undefined") {
+            span.style.backgroundColor = arrColors[colorIdx];
+            span.style.border = "1px solid " + arrColors[colorIdx];
+            colorIdx++;
+          }
+        });
+
+        // Open project's github url when clicked
         on('click', "#project" + i, function(e) {
           window.open(repo.html_url, "_blank");
         });

diff --git a/index.html b/index.html
@@ -241,6 +241,10 @@ <h4 class="projectName"></h4>
               <footer>
                 <span class="language-color"></span>
                 <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
               </footer>
             </div>
           </div>
@@ -257,6 +261,10 @@ <h4 class="projectName"></h4>
               <footer>
                 <span class="language-color"></span>
                 <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
               </footer>
             </div>
           </div>
@@ -273,6 +281,10 @@ <h4 class="projectName"></h4>
               <footer>
                 <span class="language-color"></span>
                 <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
               </footer>
             </div>
           </div>
@@ -289,6 +301,10 @@ <h4 class="projectName"></h4>
               <footer>
                 <span class="language-color"></span>
                 <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
               </footer>
             </div>
           </div>
@@ -305,6 +321,10 @@ <h4 class="projectName"></h4>
               <footer>
                 <span class="language-color"></span>
                 <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
+                <span class="language-color"></span>
+                <p class="language"></p>
               </footer>
             </div>
           </div>
@@ -319,7 +339,7 @@ <h4 class="projectName">Latin Music App</h4>
                 <br><br>
               </header>
               <footer>
-                <span class="language-color"></span>
+                <span class="language-color" style="background-color: #3572A5; border: 1px solid #3572A5;"></span>
                 <p class="language">Python</p>
               </footer>
             </div>