Modify Blog

function addBlog(blog) {
  const blogList = document.querySelector('.blog-list');
  const newBox = document.createElement('div');
  newBox.classList.add('blog-box');

  const newBlogPost = document.createElement('div');
  newBlogPost.classList.add('blog-post');
  newBox.appendChild(newBlogPost);

  const newBlogHeader = document.createElement('div');
  newBlogHeader.classList.add('blog-header');
  newBlogPost.appendChild(newBlogHeader);

  const newBlogTitle = document.createElement('h2');
  newBlogTitle.classList.add('blog-title');
  newBlogTitle.textContent = blog.title;
  newBlogHeader.appendChild(newBlogTitle);

  const newBlogDate = document.createElement('p');
  newBlogDate.classList.add('blog-date');
  newBlogDate.textContent = blog.date;
  newBlogHeader.appendChild(newBlogDate);

  const newBlogContent = document.createElement('p');
  newBlogContent.classList.add('blog-content');
  newBlogContent.textContent = blog.content;
  newBlogPost.appendChild(newBlogContent);

  // Create buttons div
  const buttonsDiv = document.createElement('div');
  buttonsDiv.classList.add('blog-buttons');

  // Create move-up button
  const moveUpButton = document.createElement('button');
  moveUpButton.classList.add('blog-button', 'move-up');
  moveUpButton.textContent = 'Move Up';
  moveUpButton.onclick = function() {
    const prevBlogBox = newBox.previousElementSibling;
    if (prevBlogBox) {
      blogList.insertBefore(newBox, prevBlogBox);
    }
  };

  // Create move-down button
  const moveDownButton = document.createElement('button');
  moveDownButton.classList.add('blog-button', 'move-down');
  moveDownButton.textContent = 'Move Down';
  moveDownButton.onclick = function() {
    const nextBlogBox = newBox.nextElementSibling;
    if (nextBlogBox) {
      blogList.insertBefore(nextBlogBox, newBox);
    }
  };

  // Create delete button
  const deleteButton = document.createElement('button');
  deleteButton.classList.add('blog-button', 'delete');
  deleteButton.textContent = 'Delete';
  deleteButton.onclick = function() {
    newBox.remove();
  };

  // Append buttons to buttons div
  buttonsDiv.appendChild(moveUpButton);
  buttonsDiv.appendChild(moveDownButton);
  buttonsDiv.appendChild(deleteButton);

  // Append buttons div to newBox
  newBox.appendChild(buttonsDiv);

  // Append newBox to the blog list
  blogList.appendChild(newBox);
}

const blogData = [
  {
    title: 'First Blog Post',
    date: 'January 1, 2022',
    content: 'This is the content of the first blog post.'
  },
  {
    title: 'Second Blog Post',
    date: 'February 1, 2022',
    content: 'This is the content of the second blog post.'
  },
  {
    title: 'Third Blog Post',
    date: 'March 1, 2022',
    content: 'This is the content of the third blog post.'
  }
];

blogData.forEach(blog => addBlog(blog));