17 AcounT Search App > To Do List > add

DrMadWill · Jan 4, 2022 · 6b6ce90 · 6b6ce90
1 parent e5da88d
commit 6b6ce90
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 8 deletions.
diff --git a/17_Acount_Search_App/HTML/will.html b/17_Acount_Search_App/HTML/will.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>Title</title>
+    <title>Profile Finder</title>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

diff --git a/17_Acount_Search_App/Js/Profil.js b/17_Acount_Search_App/Js/Profil.js
@@ -7,11 +7,17 @@ class Profile{
 
     async getProfile(username){
 
+        // profile Respons
         const profileRispons = await fetch(`https://jsonplaceholder.typicode.com/users?username=${username}`)
         // Parse JSON
         const profile = await profileRispons.json()
 
-        return profile
+
+        const todoRespons = await fetch(`https://jsonplaceholder.typicode.com/todos/?userId=${profile[0].id}`)
+
+        const todo = await todoRespons.json();
+
+        return {profile : profile,todo : todo}
 
     }
 

diff --git a/17_Acount_Search_App/Js/UI.js b/17_Acount_Search_App/Js/UI.js
@@ -11,8 +11,8 @@ class UI{
             <div class="card">
                 <div class="card-body">
                     <div class="row">
-                        <div class="col-md-3">
-                            <img src="https://picsum.photos/200/300" class="img-thumbnail" alt="">  
+                        <div class="col-md-3 ">
+                            <img src="https://picsum.photos/200/300" class="img-thumbnail m-auto" alt="">  
                         </div>
 
                         <div class="col-md-9">
@@ -45,6 +45,10 @@ class UI{
                                     Website : ${profile.website}
                                 </li>
                             </ul>
+                            <h4 class="mt-3"> To Do List</h4>
+                            <ul id="todo" class="list-group">
+                            
+                            </ul>
                         </div>
 
                     </div>
@@ -62,6 +66,32 @@ class UI{
         this.alert.innerHTML=""
         this.profileContainer.innerHTML=""
     }
+
+    ShowToDo(info){
+
+        let html=""
+
+        info.forEach((element)=>{
+            if(element.completed){
+                html+=`
+                <li class="list-group-item bg-success">
+                    ${element.title}
+                </li>
+                `
+            }else{
+                html+=`
+                <li class="list-group-item bg-secondary">
+                    ${element.title}
+                </li>
+                `
+            }
+        })
+
+        this.profileContainer.querySelector('#todo').innerHTML=html;
+
+
+    }
+
 }
 
 
diff --git a/17_Acount_Search_App/Js/app.js b/17_Acount_Search_App/Js/app.js
@@ -44,14 +44,14 @@ $(document).ready(function () {
             profile.getProfile(info).then(res => {
                 if (res.length === 0){
                     ui.AlertInfo(info)
+                    console.log(info)
                 }else{
-                    ui.ShowProfile(res[0]);
+                    ui.ShowProfile(res.profile[0]);
+                    ui.ShowToDo(res.todo)
                 }
-            })
+            }).catch(error => ui.AlertInfo(info))
         }
 
-
-        // console.log(info)
     })