From e009c1ca1d4e810c5536edbe0862bcfb7eb7767c Mon Sep 17 00:00:00 2001
From: wali91 <53268679+wali91@users.noreply.github.com>
Date: Thu, 28 Nov 2019 00:44:24 +0700
Subject: [PATCH] membuat table data dari swapi people

---
 index.html | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index d88015d..086d534 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,99 @@
 <html lang="en">
 <head>
     <title>Exercise 3</title>
+<style>
+* {
+  box-sizing: border-box;
+}
+ 
+#myInput 
+{
+  background-image: url('/css/searchicon.png');
+  background-position: 10px 10px;
+  background-repeat: no-repeat;
+  width: 100%;
+  font-size: 16px;
+  padding: 12px 20px 12px 40px;
+  border: 1px solid #ddd;
+  margin-bottom: 12px;
+}
+ 
+#myTable {
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #ddd;
+  font-size: 18px;
+}
+ 
+#myTable th, #myTable td {
+  text-align: left;
+  padding: 12px;
+}
+ 
+#myTable tr {
+  border-bottom: 1px solid #ddd;
+}
+ 
+#myTable tr.header, #myTable tr:hover {
+  background-color: #f1f1f1;
+}
+</style>
 </head>
 <body>
-    <center>
-        <h1>Daftar Planet</h1>
-    </center>
+  <center>
+        <h1>Daftar People</h1>
+        <h1>People List</h1>
+ </center>
+ <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for people names..">
+ <table id="myTable">
+<thead>
+<tr class="header">
+    <th style="width: 20%;">Name</th>
+    <th style="width: 20%;">Gender</th>
+    <th style="width: 20%;">Height</th>
+    <th style="width: 20%;">Skin Color</th>
+    <th style="width: 20%;">Hair Color</th>
+</tr>
+</thead>
+<tbody id="datapeoples">
+</tbody>
+</table>
+
+<script>
+var display="";
+for(var i=1;i<100;i++)
+    {
+    fetch("https://swapi.co/api/people/"+i)
+        .then(data => { return data.json() })
+        .then(res => { display += '<tr><td>'+res.name+'</td>'
+            display += '<td>'+ res.gender+'</td>'
+            display += '<td>'+ res.height+'</td>'
+            display += '<td>'+ res.skin_color+'</td>'
+            display += '<td>'+ res.hair_color+'</td></tr>'
+            console.log('peoples: ', res.name,i);
+            document.getElementById("datapeoples").innerHTML = display;
+        }).catch(err => console.error(err));
+    }
+function myFunction() {
+            var input, filter, table, tr, td, i, txtValue;
+            input = document.getElementById("myInput");
+            filter = input.value.toUpperCase();
+            table = document.getElementById("myTable");
+            tr = table.getElementsByTagName("tr");
+            for (i = 0; i < tr.length; i++) {
+              td = tr[i].getElementsByTagName("td")[0];
+              if (td) 
+              {
+                txtValue = td.textContent || td.innerText;
+                if (txtValue.toUpperCase().indexOf(filter) > -1) 
+                {
+                  tr[i].style.display = "";
+                } else {
+                  tr[i].style.display = "none";
+                }
+              }
+            }
+          }
+</script>
 </body>
 </html>
