script.js

document.getElementById('postForm').addEventListener('submit', function(event) {
      event.preventDefault();
      const title = document.getElementById('title').value;
      const content = document.getElementById('content').value;

      if (!title || !content) {
        alert('Please fill in both fields');
        return;
      }

      const post = { title, content };
      fetch('http://127.0.0.1:5000/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(post)
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById('title').value = '';
        document.getElementById('content').value = '';
        loadPosts();
      })
      .catch(error => console.error('Error creating post:', error));
    });

    function loadPosts() {
      fetch('http://127.0.0.1:5000/posts')
        .then(response => response.json())
        .then(data => {
          posts = data;
          displayPosts();
        })
        .catch(error => console.error('Error loading posts:', error));
    }

    function displayPosts() {
      const postsContainer = document.getElementById('posts');
      postsContainer.innerHTML = '';
      posts.forEach(post => {
        const postElement = document.createElement('div');
        postElement.className = 'post';
        postElement.innerHTML = `
          <h3>${post.title}</h3>
          <p>${post.content}</p>
          <button onclick="deletePost(${post.id})">Delete</button>
        `;
        postsContainer.appendChild(postElement);
      });
    }

    function deletePost(id) {
      fetch(`http://127.0.0.1:5000/posts/${id}`, {
        method: 'DELETE'
      })
      .then(response => response.json())
      .then(data => {
        loadPosts();
      })
      .catch(error => console.error('Error deleting post:', error));
    }