list top podcast completed

Gleider · Apr 28, 2018 · 59c4147 · 59c4147
1 parent 1cc2816
commit 59c4147
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/exemples/css/search.css b/exemples/css/search.css
@@ -35,7 +35,7 @@ body{
 }
 #bd{
   background-color: white;
-  height: 500px;
+  height: auto;
   border: 5px solid #4b86b4;
   border-radius: 20px;
 }

diff --git a/exemples/css/top.css b/exemples/css/top.css
@@ -17,7 +17,17 @@ button{
   margin: 0 auto;
 }
 
+.img{
+  border: 3px solid #2a4d69;
+  margin: 1px 30px;
+  width: 150px;
+  list-style: none;
+  display: inline-block;
+  padding: 5px 5px 0 5px;
+
+}
 .topImg{
-  width: 100px;
-  height: 100px;
-}
+  width: 150px;
+  height: 150px;
+}
+
diff --git a/exemples/top.html b/exemples/top.html
@@ -21,7 +21,7 @@
   <div id="bd">
     <div id="topCorpo">
       <div id="topTitulo">
-        <h1>Listar Top Podcasts</h1>
+        <h1>List Top Podcasts</h1>
       </div>
       <button id="top10">10</button>
       <button id="top20">20</button>
@@ -54,7 +54,9 @@ <h1>Listar Top Podcasts</h1>
       podcast.then(result => {
         $list.innerHTML = '';
         for(let i = 0; i < n; i++){
-          $list.innerHTML += `<li><img class="topImg" src="${result[i].logo_url}"></li>`;
+          $list.innerHTML += `<div class="img">
+            <li><img class="topImg" src="${result[i].logo_url}"></li>
+            </div>`;
         }
 
       });
@@ -63,6 +65,24 @@ <h1>Listar Top Podcasts</h1>
     $top10.addEventListener("click", () => {
       callTop(10);
     });
+    $top20.addEventListener("click", () => {
+      callTop(20);
+    });
+    $top50.addEventListener("click", () => {
+      callTop(50);
+    });
+    $top100.addEventListener("click", () => {
+      callTop(100);
+    });
+    $top200.addEventListener("click", () => {
+      callTop(200);
+    });
+    $top500.addEventListener("click", () => {
+      callTop(500);
+    });
+    $top1000.addEventListener("click", () => {
+      callTop(1000);
+    });
   </script>
 </body>
 </html>