.stock-widget { max-width: 400px; margin: 20px auto; padding: 15px; background: #ffffff; /* Explicitly set to white */ border-radius: 4px; font-family: 'League Spartan', sans-serif; /* League Spartan font */ color: #000000; /* Default text color for consistency */ } .stock-widget h3 { margin: 0 0 10px; font-size: 1.2em; color: #000000; /* Black text for title as requested */ text-align: center; font-weight: 500; } .stock-list { display: flex; flex-direction: column; gap: 8px; } .stock-item { display: flex; justify-content: space-between; padding: 8px; background: transparent; border-bottom: 1px solid #e0e0e0; } .stock-name { font-weight: 500; color: #333; } .stock-price { color: #2ecc71; /* Green for price, customizable */ } document.addEventListener('DOMContentLoaded', async function() { const stockList = document.getElementById('stock-list'); const apiKey = 'GUIO9TTDODDZRYBA'; // Your Alpha Vantage API key const symbols = ['AMZN', 'AAPL', 'GOOGL']; // Stock symbols you want to display stockList.innerHTML = 'Beurskoersen worden geladen...'; // Loading message in Dutch try { const responses = await Promise.all( symbols.map(symbol => fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${apiKey}`) .then(res => res.json()) ) ); stockList.innerHTML = ''; // Clear loading message const stocks = responses.map((data, index) => ({ name: symbols[index], price: parseFloat(data['Global Quote']['05. price'])?.toFixed(2) || 'N/A' // Handle potential missing data })); stocks.forEach(stock => { if (stock.price !== 'N/A') { // Only display stocks with valid prices const stockItem = document.createElement('div'); stockItem.className = 'stock-item'; stockItem.innerHTML = ` ${stock.name} €${stock.price} `; stockList.appendChild(stockItem); } }); if (stocks.every(stock => stock.price === 'N/A')) { stockList.innerHTML = 'Fout bij het laden van beurskoersen'; // Error message in Dutch } } catch (error) { stockList.innerHTML = 'Fout bij het laden van beurskoersen'; console.error('API Error:', error); } });