MTC Logo

MTC

Canada's Finance Hub

Market Insights & Latest News

Loading market news...
const apiToken = "oKAGhNWpSN9dRgzrQA4Cv2mFRy7u3ohzQJgrds4W"; // API URL for financial news (limit set to 100) const apiUrl = `https://api.marketaux.com/v1/news/all?categories=financial&language=en&country=US&limit=100&api_token=${apiToken}`; const masonryNews = document.getElementById("masonry-news"); const loading = document.getElementById("loading"); const error = document.getElementById("error"); /** * Creates an enhanced news card with a more professional look. */ function createNewsCard(item) { // Fallback image for better visual consistency const img = item.image_url || "https://placehold.co/800x450?text=MTC+Finance+News"; // Truncate description for better card height consistency const description = item.description ? item.description.substring(0, 150) + (item.description.length > 150 ? "..." : "") : "Click to read the full article and insights."; // Use a badge for the source const sourceName = item.source.name || "Unknown Source"; // Format the date const formattedDate = new Date(item.published_at).toLocaleDateString( "en-US", { year: "numeric", month: "short", day: "numeric", } ); // The card now uses the flex column container for height stretching within the grid return `
${item.title}
${sourceName}

${item.title}

${description}

${formattedDate}

Read Full Article
`; } async function fetchNews() { // Show loading and hide error initially loading.classList.remove("hidden"); error.classList.add("hidden"); masonryNews.innerHTML = ""; // Clear old content try { const res = await fetch(apiUrl); if (!res.ok) throw new Error(`API request failed with status: ${res.status}`); const data = await res.json(); const articles = data.data || []; if (!articles.length) { loading.classList.add("hidden"); error.innerHTML = "🚨 No financial news articles were returned from the API."; error.classList.remove("hidden"); return; } // Inject cards masonryNews.innerHTML = articles.map(createNewsCard).join(""); } catch (err) { console.error("Fetch error:", err); error.innerHTML = `🚨 Failed to load news. ${err.message}. Please try again later.`; error.classList.remove("hidden"); } finally { // Hide loading whether success or failure loading.classList.add("hidden"); } } document.addEventListener("DOMContentLoaded", fetchNews);