Quickstart Guide

// Obtain access token on page load
async function getAccessToken() {
    const response = await fetch('https://jsnode-ab0e.onrender.com', { 
        method: 'POST' 
    });
    const data = await response.json();
    accessToken = data.access_token;
}

window.onload = getAccessToken;

function debounce(func, wait) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

document.getElementById('song-name').addEventListener('input', debounce(function () {
    const songName = this.value;
    suggestionsContainer.innerHTML = '';

    if (songName) {
        originalSearchTerm = songName.toLowerCase();
        fetchSuggestions(songName);
    } else {
        clearSuggestionsAndResults();
    }
}, 300)); // 300ms delay

document.getElementById('spotifyForm').addEventListener('submit', async function (event) {
    event.preventDefault();

    const spotifyUrl = document.getElementById('spotifyUrl').value;
    const errorMessage = document.getElementById('errorMessage');
    const result = document.getElementById('result');
    const audioPlayer = document.getElementById('audioPlayer');

    // Clear previous messages
    errorMessage.textContent = '';
    result.textContent = '';
    audioPlayer.style.display = 'none';

    if (!spotifyUrl) {
        errorMessage.textContent = 'Spotify URL is required!';
        return;
    }
    
    // Continue with fetch...
});

body {
    background-color: #121212; /* Dark background */
    color: white;
}

button {
    background-color: #1db954; /* Spotify green */
}

button:hover {
    background-color: #14833b; /* Darker green */
}