json_placeholder api implementation added

dishamodi0910 · May 27, 2024 · 65bacd9 · 65bacd9
1 parent d0cf41f
commit 65bacd9
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 0 deletions.
diff --git a/Existing_API_Collection/JSON_Placeholder_API/README.md b/Existing_API_Collection/JSON_Placeholder_API/README.md
@@ -0,0 +1,24 @@
+# JSONPlaceholder CRUD App
+
+This is a simple CRUD (Create, Read, Update, Delete) application built using HTML, CSS, and JavaScript. It allows you to interact with the JSONPlaceholder API to perform CRUD operations on posts.
+
+## Features
+
+- View a list of posts fetched from JSONPlaceholder API.
+- Create new posts with a title and body.
+- Update existing posts.
+- Delete posts.
+
+## Usage
+
+1. Clone the repository:
+
+    ```bash
+    git clone <repository-url>
+    ```
+
+2. Open `index.html` in your web browser.
+
+3. Interact with the application by creating, updating, and deleting posts.
+
+
diff --git a/Existing_API_Collection/JSON_Placeholder_API/index.html b/Existing_API_Collection/JSON_Placeholder_API/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSONPlaceholder CRUD</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body class="bg-light">
+    <div id="container" class="container py-4">
+        <h1 class="text-center mb-4">JSONPlaceholder CRUD</h1>
+        <form id="postForm" class="mb-4">
+            <div class="form-group">
+                <input type="text" id="title" placeholder="Title" class="form-control mb-2">
+            </div>
+            <div class="form-group">
+                <textarea id="body" placeholder="Body" class="form-control mb-2" rows="4"></textarea>
+            </div>
+            <button type="submit" class="btn btn-primary btn-lg btn-block">Create Post</button>
+        </form>
+        <hr>
+        <h2 class="text-center mb-4">Posts</h2>
+        <div id="posts" class="list-group"></div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/JSON_Placeholder_API/script.js b/Existing_API_Collection/JSON_Placeholder_API/script.js
@@ -0,0 +1,111 @@
+const postForm = document.getElementById('postForm');
+const postsContainer = document.getElementById('posts');
+let posts = [];
+
+async function fetchAndRenderPosts() {
+    posts = await fetchPosts();
+    renderPosts(posts);
+}
+
+async function fetchPosts() {
+    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
+    const data = await response.json();
+    return data.slice(0, 50);
+}
+
+// Function to render posts
+function renderPosts(posts) {
+    postsContainer.innerHTML = '';
+    posts.forEach((post, index) => {
+        const postElement = document.createElement('div');
+        postElement.classList.add('list-group-item');
+        postElement.innerHTML = `
+            <h4 class="mb-1">${index + 1}. ${post.title}</h4>
+            <p class="mb-1">${post.body}</p>
+            <button type="button" class="btn btn-primary btn-sm mr-2" onclick="updatePost(${post.id})">Update</button>
+            <button type="button" class="btn btn-danger btn-sm" onclick="deletePost(${post.id})">Delete</button>
+        `;
+        postsContainer.appendChild(postElement);
+        if (index > 0) {
+            postsContainer.insertBefore(document.createElement('hr'), postElement);
+        }
+        $(postElement.querySelector('h4')).popover({
+            content: `<strong>Title:</strong> ${post.title}<br><strong>Body:</strong> ${post.body}`,
+            trigger: 'click',
+            html: true,
+        });
+    });
+}
+
+// Function to create a new post
+async function createPost(title, body) {
+    await fetch('https://jsonplaceholder.typicode.com/posts', {
+        method: 'POST',
+        body: JSON.stringify({
+            title,
+            body,
+            userId: 1 
+        }),
+        headers: {
+            'Content-type': 'application/json; charset=UTF-8',
+        },
+    });
+    fetchAndRenderPosts(); 
+}
+
+// Function to delete a post
+async function deletePost(id) {
+    await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
+        method: 'DELETE',
+    });
+    posts = posts.filter(post => post.id !== id); 
+    renderPosts(posts); 
+}
+
+// Function to update a post
+async function updatePost(id) {
+    const newTitle = prompt('Enter the new title:');
+    const newBody = prompt('Enter the new body:');
+    if (newTitle !== null && newBody !== null) {
+        await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
+            method: 'PUT',
+            body: JSON.stringify({
+                id,
+                title: newTitle,
+                body: newBody,
+                userId: 1
+            }),
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            },
+        });
+        const updatedPostIndex = posts.findIndex(post => post.id === id);
+        if (updatedPostIndex !== -1) {
+            posts[updatedPostIndex].title = newTitle;
+            posts[updatedPostIndex].body = newBody;
+            renderPosts(posts); 
+        }
+    }
+}
+
+// Event listener for form submission
+postForm.addEventListener('submit', async function (event) {
+    event.preventDefault();
+    const title = document.getElementById('title').value;
+    const body = document.getElementById('body').value;
+    if (posts.length >= 500) { 
+        await createPost(title, body);
+    } else { 
+        const newPost = {
+            id: posts.length + 1, 
+            title,
+            body
+        };
+        posts.push(newPost);
+        renderPosts(posts);
+    }
+    postForm.reset();
+});
+
+
+fetchAndRenderPosts();
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -17,5 +17,6 @@
 |[Bored API](./BoredAPI/)|Bored API is a versatile tool designed to provide users with random activity suggestions when they're feeling bored. With this API, users can access a wide range of activities to spark inspiration and alleviate boredom. From creative hobbies to outdoor adventures, Bored API offers something for everyone.|
 |[Unsplash API](./unsplashApi/)| An API that enables users to retrieve high quality and copyright free Images from Unsplash and also get random Images |
 |[NewsBuster](./news-buster-api/)|This API helps you gain worldly knowledge with a better frontend by fetching API |
+|[JSON_Plaeholder_API](./JSON_Plaeholder_API/)| this api is used to test basic crud operations on fake data posts |
 |[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.|