Working with JSON and REST APIs

GET    /posts       → List all posts
GET    /posts/1     → Get post #1
POST   /posts       → Create new post
PUT    /posts/1     → Replace post #1 completely
PATCH  /posts/1     → Update specific fields of post #1
DELETE /posts/1     → Delete post #1

// src/lib/services/blogApi.js
const BASE_URL = 'https://jsonplaceholder.typicode.com';

async function request(endpoint, options = {}) {
  const response = await fetch(`${BASE_URL}${endpoint}`, {
    headers: { 'Content-Type': 'application/json', ...options.headers },
    ...options
  });
  if (!response.ok) throw new Error(`API Error: ${response.status}`);
  return response.json();
}

export const blogApi = {
  getPosts: () => request('/posts?_limit=10'),
  getPost: (id) => request(`/posts/${id}`),
  createPost: (data) => request('/posts', { method: 'POST', body: JSON.stringify(data) }),
  updatePost: (id, data) => request(`/posts/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
  deletePost: (id) => request(`/posts/${id}`, { method: 'DELETE' })
};

<!-- BlogApp.svelte -->
<script>
  import { onMount } from &#039;svelte';
  import { blogApi } from &#039;$lib/services/blogApi.js';

  let posts = [];
  let loading = true;
  let error = &#039;';
  let editingPost = null;
  let showForm = false;
  let form = { title: &#039;', body: '' };

  onMount(async () => {
    try { posts = await blogApi.getPosts(); }
    catch (e) { error = e.message; }
    finally { loading = false; }
  });

  async function createPost() {
    try {
      const newPost = await blogApi.createPost({ ...form, userId: 1 });
      posts = [newPost, ...posts];
      resetForm();
    } catch (e) { error = e.message; }
  }

  async function updatePost() {
    try {
      const updated = await blogApi.updatePost(editingPost.id, { ...editingPost, ...form });
      posts = posts.map(p => p.id === editingPost.id ? updated : p);
      resetForm();
    } catch (e) { error = e.message; }
  }

  async function deletePost(id) {
    if (!confirm(&#039;Delete this post?')) return;
    try {
      await blogApi.deletePost(id);
      posts = posts.filter(p => p.id !== id);
    } catch (e) { error = e.message; }
  }

  function startEdit(post) {
    editingPost = post;
    form = { title: post.title, body: post.body };
    showForm = true;
  }

  function resetForm() {
    form = { title: &#039;', body: '' };
    editingPost = null;
    showForm = false;
  }

  function handleSubmit() {
    if (editingPost) updatePost();
    else createPost();
  }
</script>

<div class="blog-app">
  <div class="header">
    <h1>📝 Blog Manager</h1>
    <button on:click={() => { showForm = !showForm; resetForm(); }}>
      {showForm ? &#039;✕ Cancel' : '+ New Post'}
    </button>
  </div>

  {#if error}<div class="error">{error}</div>{/if}

  {#if showForm}
    <form on:submit|preventDefault={handleSubmit} class="post-form">
      <h2>{editingPost ? &#039;Edit Post' : 'New Post'}</h2>
      <input bind:value={form.title} placeholder="Title" required />
      <textarea bind:value={form.body} placeholder="Content..." rows="4" required></textarea>
      <div class="form-actions">
        <button type="button" on:click={resetForm}>Cancel</button>
        <button type="submit">{editingPost ? &#039;Update' : 'Create'}</button>
      </div>
    </form>
  {/if}

  {#if loading}
    <p>Loading posts...</p>
  {:else}
    <div class="post-list">
      {#each posts as post (post.id)}
        <article class="post-card">
          <h3>{post.title}</h3>
          <p>{post.body.slice(0, 120)}...</p>
          <div class="actions">
            <button on:click={() => startEdit(post)}>✏️ Edit</button>
            <button class="danger" on:click={() => deletePost(post.id)}>🗑️ Delete</button>
          </div>
        </article>
      {/each}
    </div>
  {/if}
</div>