Challenge with Promises and Fetch

AhmadAshrf · web-flow · commit 4983423097fc · 2022-04-18T00:01:16.000+02:00
diff --git a/Fetch & Promises/index.html b/Fetch & Promises/index.html
@@ -0,0 +1,23 @@
+<!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>Promises & Fetch</title>
+</head>
+
+<body>
+    <input type="button" id="primInput" onclick="AjaxCall()" value="Get Users Name" style="display: block;">
+    <label for="users">Web App Users</label>
+    <select name="users" id="users">
+    </select>
+    <input type="button" id="show" disabled value="Show All Data" style="display: block;">
+    <div id="data"></div>
+    <input type="button" onclick="AjaxPost()" value="Post Data" style="display: block;">
+    <p id="suc"></p>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/Fetch & Promises/main.js b/Fetch & Promises/main.js
@@ -0,0 +1,55 @@
+/**Calling Data From API Using Fetch Object */
+function AjaxCall() {
+    let url = 'https://jsonplaceholder.typicode.com/users'
+    fetch(url, { method: 'GET' })
+        .then((response) => {
+            return response.json()
+        })
+        .then((resJson) => {
+            let user = document.getElementById('users')
+            let primBtn = document.getElementById('primInput')
+            primBtn.setAttribute('disabled', '')
+
+            for (let i = 0; i < resJson.length; i++) {
+                user.innerHTML += `<option value="${resJson[i].name}">${resJson[i].name}</option>`
+            }
+
+            let show = document.getElementById('show')
+            let domData = document.getElementById('data')
+            show.removeAttribute('disabled','')
+
+            show.onclick = () => {
+                domData.innerHTML = `User ID Is : ${resJson[user.selectedIndex].id}
+                & Email is : ${resJson[user.selectedIndex].email}
+                & Phone Number Is :${resJson[user.selectedIndex].phone} `
+            }
+        })
+        .catch(err => err)
+}
+/** Sending Data Using HttpReq Method 'POST' */
+function AjaxPost() {
+    let url = 'https://jsonplaceholder.typicode.com/posts'
+    let bodyy = {
+        title: prompt('Enter Your Name'),
+        body: prompt('Enter Color'),
+        userId: 2
+    }
+    fetch(url, {
+        method: 'POST',
+        body: JSON.stringify(bodyy), 
+        headers:{'content-type' : 'application/json'}})
+        .then((response) => {
+            return response.json()
+        })
+        .then((res) => {
+            let msg = document.getElementById('suc')
+            msg.innerHTML = `Information Added Successfully!<br> 
+            Name : ${res.title}<br>
+            Color : ${res.body}<br>
+            ID : ${res.userId}<br>
+            `
+            console.log(res)
+        })
+        
+
+}
