File size: 3,300 Bytes
051c595 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | document.addEventListener('DOMContentLoaded', () => {
fetchTeamData();
setupEventListeners();
feather.replace();
});
// Fetch Data from Public API (RandomUser.me)
async function fetchTeamData() {
const grid = document.getElementById('team-grid');
const btn = document.getElementById('refresh-team');
// Add loading state visual
if(btn) {
const icon = btn.querySelector('[data-feather]');
if(icon) icon.classList.add('animate-spin');
btn.disabled = true;
btn.innerHTML = 'Loading...';
}
try {
const response = await fetch('https://randomuser.me/api/?results=4&nat=us,gb,ca,au,de');
const data = await response.json();
renderTeam(data.results);
} catch (error) {
console.error('Error fetching team:', error);
grid.innerHTML = `
<div class="col-span-full text-center text-red-500 p-8 bg-red-50 rounded-xl border border-red-100">
<i data-feather="alert-circle" class="inline-block mb-2"></i>
<p>Failed to load team data. Please try again.</p>
</div>
`;
feather.replace();
} finally {
// Reset button state
if(btn) {
btn.disabled = false;
btn.innerHTML = `<i data-feather="refresh-cw" class="w-4 h-4"></i> Refresh Team`;
feather.replace();
}
}
}
// Render Team Cards
function renderTeam(users) {
const grid = document.getElementById('team-grid');
grid.innerHTML = '';
users.forEach((user, index) => {
const card = document.createElement('div');
card.className = 'bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-all duration-300 group animate-fade-in';
card.style.animationDelay = `${index * 100}ms`;
card.innerHTML = `
<div class="relative w-24 h-24 mx-auto mb-4">
<img src="${user.picture.large}" alt="${user.name.first}" class="w-full h-full rounded-full object-cover ring-4 ring-indigo-50 group-hover:ring-primary transition-all">
<div class="absolute bottom-0 right-0 w-6 h-6 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<h3 class="font-bold text-lg text-slate-800 capitalize">${user.name.first} ${user.name.last}</h3>
<p class="text-primary text-sm font-medium mb-3">Product Designer</p>
<p class="text-slate-500 text-xs mb-4">${user.location.city}, ${user.location.country}</p>
<div class="flex justify-center gap-3">
<a href="#" class="text-slate-400 hover:text-blue-500 transition-colors"><i data-feather="linkedin" class="w-4 h-4"></i></a>
<a href="#" class="text-slate-400 hover:text-gray-800 transition-colors"><i data-feather="github" class="w-4 h-4"></i></a>
<a href="#" class="text-slate-400 hover:text-blue-400 transition-colors"><i data-feather="twitter" class="w-4 h-4"></i></a>
</div>
`;
grid.appendChild(card);
});
feather.replace();
}
function setupEventListeners() {
const refreshBtn = document.getElementById('refresh-team');
if (refreshBtn) {
refreshBtn.addEventListener('click', fetchTeamData);
}
} |