Update

A lazy commit.
tiy-tpa-fee · Aug 7, 2017 · 09bf92f · 09bf92f
1 parent 6aad53f
commit 09bf92f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,11 @@
     <link rel="stylesheet" href="/screen.css">
   </head>
   <body>
-    <h1>Hello, World!</h1>
+    <h1>Adventure Time</h1>
+    <ul>
+    </ul>
+    <div class="details">
+    </div>
+    <script src="main.js" charset="utf-8"></script>
   </body>
 </html>
diff --git a/public/main.js b/public/main.js
@@ -0,0 +1,26 @@
+const ul = document.querySelector('ul')
+const details = document.querySelector('.details')
+
+const getCharacterDetails = (id) => {
+  fetch(`http://localhost:3000/characters/${id}`).then(res => res.json()).then(data => {
+    const template = `
+      <h2>${data.name}</h2>
+      <p>${data.bio}</p>
+      <img src="${data.image}" alt="">
+    `
+    details.innerHTML = template
+  })
+}
+
+fetch('http://localhost:3000/characters').then(res => res.json()).then(data => {
+  data.forEach((character) => {
+    const li = document.createElement('li')
+    const a = document.createElement('a')
+    a.textContent = character.name
+    li.appendChild(a)
+    ul.appendChild(li)
+    a.addEventListener('click', () => {
+      getCharacterDetails(character.id)
+    })
+  })
+})