From 5b284e2eed3e199366b3d42fe847711b3231a5a2 Mon Sep 17 00:00:00 2001
From: Anton Livaja <anton@livaja.me>
Date: Thu, 28 Dec 2023 13:42:30 -0500
Subject: [PATCH] clean up js

---
 _layouts/landing.html |  2 +-
 _sass/base.scss       |  2 +-
 assets/js/main.js     | 23 ++++++++++++++++-------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/_layouts/landing.html b/_layouts/landing.html
index 1e323c4..d8ce614 100644
--- a/_layouts/landing.html
+++ b/_layouts/landing.html
@@ -19,7 +19,7 @@
                     </div>
                 </div>
                 <div class="flex-container-inner carousel-container">
-                    <div class="carousel"></div>
+                    <div id="carousel"></div>
                     <br>
                     <div style="margin-left: 10px; font-size: 14px">
                         <a style="color: rgb(73, 73, 73)" href="../assets/js/carousel-items.json">Full list of articles</a>
diff --git a/_sass/base.scss b/_sass/base.scss
index 259da72..d1ee07f 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -840,7 +840,7 @@ pre {
    padding-left: 80px;
 }
 
-.carousel {
+#carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
diff --git a/assets/js/main.js b/assets/js/main.js
index a8ad828..c99fe57 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -20,17 +20,26 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 
 function createCarouselItems(items) {
-    const carousel = document.querySelector('.carousel');
+    const carousel = document.querySelector('#carousel');
     items.forEach(item => {
         const itemDiv = document.createElement('div');
-        itemDiv.className = 'carousel-item';
-        itemDiv.innerHTML = `<a class="carousel-link" target="_blank" rel="noopener noreferrer" href="${item.link}">${item.description}</a>`;
+        itemDiv.className = 'carousel-item'
+
+        const link = document.createElement('a');
+        link.className = 'carousel-link';
+        link.href = item.link;
+        link.target = '_blank';
+        link.rel = 'noopener noreferrer';
+        const linkText = document.createTextNode(item.description);
+
+        link.appendChild(linkText);
+        itemDiv.appendChild(link);
         carousel.appendChild(itemDiv);
     });
 }
 
 function initializeCarousel() {
-    const carousel = document.querySelector('.carousel');
+    const carousel = document.querySelector('#carousel');
     const items = Array.from(carousel.children);
     const totalItems = items.length;
     const middleIndex = Math.floor(totalItems / 2);
@@ -45,12 +54,12 @@ function initializeCarousel() {
         items.forEach((item, index) => {
             let positionIndex = (currentIndex + index + totalItems) % totalItems;
             let offset = positionIndex - middleIndex;
-            item.style.transform = `translateY(${offset * 100}%)`; 
+            item.style.transform = `translateY(${offset * 100}%)`;
             item.classList.toggle('active', positionIndex === middleIndex);
-            item.style.visibility = 'visible'; 
+            item.style.visibility = 'visible';
         });
     }
 
     updateCarouselItems();
-    setInterval(cycleItems, 7000); 
+    setInterval(cycleItems, 7000);
 }
\ No newline at end of file