پروژه ۲: ساخت کلاینت وبلاگ

const postsContainer = document.getElementById('posts-container');
const API_URL = 'http://localhost:3000/api/posts'; // آدرس API ما

async function fetchAndDisplayPosts() {
  try {
    const response = await fetch(API_URL);
    const posts = await response.json();

    postsContainer.innerHTML = ''; // پاک کردن محتوای قبلی

    posts.forEach(post => {
      const postElement = document.createElement('div');
      postElement.className = 'post-card'; // یه کلاس برای استایل‌دهی
      postElement.innerHTML = `
        <h3>${post.title}</h3>
        <p>${post.content}</p>
      `;
      postsContainer.appendChild(postElement);
    });

  } catch (error) {
    postsContainer.innerHTML = '<p>خطا در بارگذاری پست‌ها!</p>';
  }
}

// اجرای تابع در زمان بارگذاری صفحه
fetchAndDisplayPosts();