api-basics

PeomDutta · PeomDutta · commit 53bce5bf4aaa · 2021-08-30T20:16:52.000+06:00
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API-javascript</title>
+</head>
+
+<body>
+    <h1 style="text-align: center;">Javascript API</h1>
+
+    <ul id="users">
+
+    </ul>
+
+    <button onclick="loadData()">Load Data</button>
+    <button onclick="loadUsers()">Load Users</button>
+    <button onclick="loadPosts()">Load Posts</button>
+
+
+    <script src="js/app.js"></script>
+</body>
+
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,33 @@
+function loadData() {
+    fetch('https://jsonplaceholder.typicode.com/todos/1')
+        .then(response => response.json())
+        .then(json => console.log(json))
+}
+
+function loadUsers() {
+    fetch('https://jsonplaceholder.typicode.com/users')
+        .then(response => response.json())
+        .then(data => displayUser(data));
+}
+
+function loadPosts() {
+    fetch('https://jsonplaceholder.typicode.com/posts')
+        .then(response => response.json())
+        .then(json => console.log(json));
+}
+
+
+function displayUser(data) {
+    const ul = document.getElementById('users');
+    for (const users of data) {
+        console.log(users.name);
+        const li = document.createElement('li');
+        li.innerText = `name: ${users.name}
+        email: ${users.email}
+        
+        `
+        ul.appendChild(li);
+    }
+
+
+}
diff --git a/js/post.js b/js/post.js
@@ -0,0 +1,21 @@
+function loadPosts() {
+    fetch('https://jsonplaceholder.typicode.com/posts')
+        .then(response => response.json())
+        .then(data => displayPosts(data));
+}
+
+loadPosts();
+
+function displayPosts(post) {
+    console.log(post);
+    const section = document.getElementById('section');
+    for (const data of post) {
+        const div = document.createElement('div');
+        div.classList.add('design');
+        div.innerHTML = `
+        <h3>${data.title}</h3>
+        <p>${data.body}</p>
+        `
+        section.appendChild(div);
+    }
+}
diff --git a/js/stringify-parse.js b/js/stringify-parse.js
@@ -0,0 +1,20 @@
+const shop = {
+    name: "Peom Dutta",
+    address: "Chittagong",
+    profit: 15000,
+    owner: {
+        names: "HBD",
+        profession: "banker",
+        id: 10
+    },
+    isExpensive: true,
+};
+
+console.log(shop);
+
+const shopStringified = JSON.stringify(shop);
+console.log(shopStringified);
+
+const shopParsed = JSON.parse(shopStringified);
+console.log(shopParsed);
+
diff --git a/post.html b/post.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>post-javascript</title>
+
+    <style>
+        .design {
+            background-color: bisque;
+            padding: 10px;
+            margin: 10px;
+            border: 1px solid rgb(204, 33, 33);
+            border-radius: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Post Displaying</h1>
+
+    <section id="section">
+
+    </section>
+
+    <script src="js/post.js"></script>
+</body>
+
+</html>
