const tasks = [
  { title: 'Review pull request', owner: 'Maya', status: 'open' },
  { title: 'Write release notes', owner: 'Theo', status: 'done' },
  { title: 'Check mobile layout', owner: 'Lina', status: 'open' }
];

const list = document.querySelector('#task-list');
const count = document.querySelector('#task-count');

function renderTasks() {
  list.innerHTML = tasks.map((task) => `<article class="task" data-status="${task.status}"><div><h3>${task.title}</h3><p>Owner: ${task.owner}</p></div><span class="task-meta">${task.status}</span></article>`).join('');
  count.textContent = `${tasks.length} tasks`;
}

renderTasks();