// event binding + initial load function init() renderPlaylistUI(); updateDisplay(); updateTextContent();
<!-- Playback controls --> <div class="playlist-panel"> <div class="playback-buttons"> <button id="prevBtn" title="Previous Font">⏮️ Prev</button> <button id="playBtn" class="btn-primary">▶️ Play</button> <button id="pauseBtn">⏸️ Pause</button> <button id="nextBtn" title="Next Font">⏭️ Next</button> <button id="darkModeBtn">🌙 Dark/Light</button> </div> <div class="counter" id="fontCounter">Font 1 of 6</div> </div> font playlist script
function stopAutoRotate() if (intervalId) clearInterval(intervalId); intervalId = null; isPlaying = false; // event binding + initial load function init()
function nextFont() if (!playlist.length) return; currentIndex = (currentIndex + 1) % playlist.length; updateDisplay(); if (isPlaying) stopAutoRotate(); startAutoRotate(); // restart timer to avoid skipping beat else updateDisplay(); !-- Playback controls -->
// refresh font list UI (with remove & reorder stub) function renderPlaylistUI() fontListContainer.innerHTML = ''; playlist.forEach((font, idx) => const itemDiv = document.createElement('div'); itemDiv.className = 'font-item'; const nameSpan = document.createElement('span'); nameSpan.className = 'font-name'; nameSpan.innerText = font; nameSpan.style.fontFamily = `'$font', monospace`; // click on font name => jump to that font & pause nameSpan.addEventListener('click', () => if (playlist.length) currentIndex = idx; updateDisplay(); stopAutoRotate(); ); const removeBtn = document.createElement('button'); removeBtn.innerText = '✖️'; removeBtn.className = 'remove-font'; removeBtn.addEventListener('click', (e) => e.stopPropagation(); if (playlist.length <= 1) alert("Cannot remove last font – add another first."); return; playlist.splice(idx, 1); if (currentIndex >= playlist.length) currentIndex = playlist.length - 1; if (currentIndex < 0) currentIndex = 0; renderPlaylistUI(); updateDisplay(); stopAutoRotate(); ); itemDiv.appendChild(nameSpan); itemDiv.appendChild(removeBtn); fontListContainer.appendChild(itemDiv); );