From 86789f5bbaf1c020d517e851dc27a5502acd83bb Mon Sep 17 00:00:00 2001
From: Yufi Ariftiyo Sidi <55576721+yufias@users.noreply.github.com>
Date: Fri, 22 Nov 2019 16:04:13 +0700
Subject: [PATCH 1/3] Tabel swapi

---
 index.html | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
diff --git a/index.html b/index.html
index d88015d..f40e197 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>Exercise 3</title>
+    <link rel="stylesheet" href="style.css">
+    </link>
 </head>
+
 <body>
     <center>
         <h1>Daftar Planet</h1>
     </center>
+
+    <input type="text" id="input" onkeyup="cari()" placeholder="Search planets here...">
+    <table id="table">
+        <thead>
+            <tr>
+                <th>First Name</th>
+                <th>Last Name</th>
+                <th>Points</th>
+            </tr>
+        </thead>
+        <tbody id="planet">
+
+        </tbody>
+    </table>
+
+    <script>
+        var output = "";
+        for (var x = 1; x <= 62; x++) {
+            fetch("https://swapi.co/api/planets/" + x)
+                .then(res => res.json())
+                .then((out) => {
+                    output = output + '<tr>'
+                    output = output + '<td>' + out.name + '</td>'
+                    output = output + '<td>' + out.diameter + '</td>'
+                    output = output + '<td>' + out.climate + '</td>'
+                    output = output + '</tr>'
+                    document.getElementById("planet").innerHTML = output;
+                }).catch(err => console.error(err));
+        }
+
+        function cari() {
+            var input = document.getElementById("input");
+            var filter = input.value.toUpperCase();
+            var table = document.getElementById("table");
+            var tr = table.getElementsByTagName("tr");
+            for (x = 0; x < tr.length; x++) {
+                td = tr[x].getElementsByTagName("td")[0];
+                if (td) {
+                    txtValue = td.textContent || td.innerText;
+                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                        tr[x].style.display = "";
+                    } else {
+                        tr[x].style.display = "";
+                    }
+                }
+            }
+        }
+    </script>
 </body>
 </html>

From 0e5bb06f0496142520aad0f0e3f6a0caec48658d Mon Sep 17 00:00:00 2001
From: Yufi Ariftiyo Sidi <55576721+yufias@users.noreply.github.com>
Date: Fri, 22 Nov 2019 16:04:43 +0700
Subject: [PATCH 2/3] Tabel swapi

---
 style.css | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 style.css

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..dc5b5c0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,25 @@
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th {
+    background-color: #4CAF50;
+    color: white;
+  }
+
+th, td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+#input {
+  width: 95%;
+  font-size: 16px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  margin-bottom: 12px;
+}
+
+tr:hover {background-color:#f5f5f5;}
\ No newline at end of file

From 3d8a6744bd23173b0fed978206e77b401396f890 Mon Sep 17 00:00:00 2001
From: Yufi Ariftiyo Sidi <55576721+yufias@users.noreply.github.com>
Date: Fri, 22 Nov 2019 16:07:50 +0700
Subject: [PATCH 3/3] Update index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f40e197..0dc461f 100644
--- a/index.html
+++ b/index.html
@@ -53,7 +53,7 @@ <h1>Daftar Planet</h1>
                     if (txtValue.toUpperCase().indexOf(filter) > -1) {
                         tr[x].style.display = "";
                     } else {
-                        tr[x].style.display = "";
+                        tr[x].style.display = "none";
                     }
                 }
             }
