From 65bacd9a53798bd9b7fdb063315092e7bfb0c905 Mon Sep 17 00:00:00 2001 From: Yashgabani845 Date: Mon, 27 May 2024 19:02:12 +0530 Subject: [PATCH 1/2] json_placeholder api implementation added --- .../JSON_Placeholder_API/README.md | 24 ++++ .../JSON_Placeholder_API/index.html | 30 +++++ .../JSON_Placeholder_API/script.js | 111 ++++++++++++++++++ Existing_API_Collection/README.md | 1 + 4 files changed, 166 insertions(+) create mode 100644 Existing_API_Collection/JSON_Placeholder_API/README.md create mode 100644 Existing_API_Collection/JSON_Placeholder_API/index.html create mode 100644 Existing_API_Collection/JSON_Placeholder_API/script.js diff --git a/Existing_API_Collection/JSON_Placeholder_API/README.md b/Existing_API_Collection/JSON_Placeholder_API/README.md new file mode 100644 index 0000000..7a9a62a --- /dev/null +++ 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 + ``` + +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 new file mode 100644 index 0000000..ff51084 --- /dev/null +++ b/Existing_API_Collection/JSON_Placeholder_API/index.html @@ -0,0 +1,30 @@ + + + + + + JSONPlaceholder CRUD + + + +
+

JSONPlaceholder CRUD

+
+
+ +
+
+ +
+ +
+
+

Posts

+
+
+ + + + + + diff --git a/Existing_API_Collection/JSON_Placeholder_API/script.js b/Existing_API_Collection/JSON_Placeholder_API/script.js new file mode 100644 index 0000000..6d28c06 --- /dev/null +++ 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 = ` +

${index + 1}. ${post.title}

+

${post.body}

+ + + `; + postsContainer.appendChild(postElement); + if (index > 0) { + postsContainer.insertBefore(document.createElement('hr'), postElement); + } + $(postElement.querySelector('h4')).popover({ + content: `Title: ${post.title}
Body: ${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 index ee919a6..c60a0f9 100644 --- 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.| From 412f88dd47d412668f80cde8ffaccd01899f93f5 Mon Sep 17 00:00:00 2001 From: Yashgabani845 Date: Sat, 1 Jun 2024 15:49:11 +0530 Subject: [PATCH 2/2] chnaged spelling in readme --- Existing_API_Collection/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md index c60a0f9..ff4ec88 100644 --- a/Existing_API_Collection/README.md +++ b/Existing_API_Collection/README.md @@ -17,6 +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 | +|[JSON_Placeholder_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.|