My Blog

function addBlog(blog) {
  // Create the main blog post div
  const blogPostDiv = document.createElement('div');
  blogPostDiv.className = 'blog-post';

  // Create the blog header div
  const blogHeaderDiv = document.createElement('div');
  blogHeaderDiv.className = 'blog-header';

  // Create the blog title h2
  const blogTitleH2 = document.createElement('h2');
  blogTitleH2.className = 'blog-title';
  blogTitleH2.textContent = blog.title;

  // Create the blog date paragraph
  const blogDateP = document.createElement('p');
  blogDateP.className = 'blog-date';
  blogDateP.textContent = blog.date;

  // Append the title and date to the blog header
  blogHeaderDiv.appendChild(blogTitleH2);
  blogHeaderDiv.appendChild(blogDateP);

  // Create the blog content paragraph
  const blogContentP = document.createElement('p');
  blogContentP.className = 'blog-content';
  blogContentP.textContent = blog.content;

  // Append the header and content to the main blog post div
  blogPostDiv.appendChild(blogHeaderDiv);
  blogPostDiv.appendChild(blogContentP);

  // Append the blog post div to the blog list
  const blogList = document.querySelector('.blog-list');
  blogList.appendChild(blogPostDiv);
}

// Iterate over the blogData array and call addBlog for each blog post
blogData.forEach(blog => {
  addBlog(blog);
});