document.addEventListener('DOMContentLoaded', () => { const waterfallContainer = document.getElementById('waterfallContainer'); const addCard = document.getElementById('addCard'); // Fetch data from API and render cards fetchDataAndRenderCards(); // Add new group card click handler addCard.addEventListener('click', () => { alert('Add new group functionality will be implemented here.'); }); }); async function fetchDataAndRenderCards() { try { const response = await fetch('https://api.example.com/cards'); const data = await response.json(); renderCards(data); } catch (error) { console.error('Error fetching card data:', error); } } function renderCards(data) { const waterfallContainer = document.getElementById('waterfallContainer'); data.forEach(item => { const card = document.createElement('div'); card.classList.add('card'); card.innerHTML = ` <img src="${item.imageUrl}" alt="${item.title}"> <h3>${item.title}</h3> <p>${item.description}</p> `; waterfallContainer.appendChild(card); }); }