- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -175,24 +175,38 @@
     function createQRCard(track) {
         const card = document.createElement('div');
         card.className = 'card';
-        card.innerHTML = `
-                <div class="card-inner">
-                    <div class="card-front" id="qr-${track.id}"></div>
-                    <div class="card-back">
-                        <div class="p-4">
-                            <h3 class="text-xl font-bold">${track.name}</h3>
-                            <p class="text-gray-600">${track.artist}</p>
-                            <p class="text-gray-500">${track.year}</p>
-                        </div>
-                    </div>
-                </div>
-            `;
-
-        new QRCode(document.getElementById(`qr-${track.id}`), {
-            text: `https://www.gptgames.dev/tools/spotify_test.html?track=${track.id}`,
-            width: 200,
-            height: 200
-        });
+
+        // Create the inner structure first
+        const cardInner = document.createElement('div');
+        cardInner.className = 'card-inner';
+
+        const cardFront = document.createElement('div');
+        cardFront.className = 'card-front';
+        cardFront.id = `qr-${track.id}`;
+
+        const cardBack = document.createElement('div');
+        cardBack.className = 'card-back';
+        cardBack.innerHTML = `
+        <div class="p-4">
+            <h3 class="text-xl font-bold">${track.name}</h3>
+            <p class="text-gray-600">${track.artist}</p>
+            <p class="text-gray-500">${track.year}</p>
+        </div>
+    `;
+
+        // Assemble the card
+        cardInner.appendChild(cardFront);
+        cardInner.appendChild(cardBack);
+        card.appendChild(cardInner);
+
+        // Generate QR code after the element is in the DOM
+        setTimeout(() => {
+            new QRCode(cardFront, {
+                text: `https://www.gptgames.dev/tools/spotify_test.html?track=${track.id}`,
+                width: 200,
+                height: 200
+            });
+        }, 0);
 
         return card;
     }