exercice 1: solution

vueschool · Mar 13, 2019 · aeebad4 · aeebad4 · dovelm · Apr 26, 2021
1 parent 8ecdb8b
commit aeebad4
Showing 1 changed file with 78 additions and 0 deletions.
diff --git a/gihub-profile-card/solution.html b/gihub-profile-card/solution.html
@@ -0,0 +1,78 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+</head>
+
+<body>
+
+  <div id="app" class="ui container">
+    <h1>GitHub Profiles</h1>
+    <div class="ui cards">
+      <github-user-card 
+        v-for="username in usernames"
+        :username="username"
+      ></github-user-card>
+    </div>
+  </div>
+
+  <script type="text/x-template" id="github-user-card-template">
+    <div class="ui card">
+      <div class="image">
+        <img :src="user.avatar_url">
+      </div>
+      <div class="content">
+        <a :href="`https://github.com/${username}`" class="header">{{user.name}}</a>
+        <div class="meta">
+          <span class="date">Joined in {{user.created_at}}</span>
+        </div>
+        <div class="description">
+          {{user.bio}}
+        </div>
+      </div>
+      <div class="extra content">
+        <a :href="`https://github.com/${username}?tab=followers`">
+          <i class="user icon"></i>
+          {{user.followers}} Friends
+        </a>
+      </div>
+    </div>
+  </script>
+
+  <!-- Import Vue.js and axios -->
+  <script src="https://unpkg.com/vue"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+  <!-- Your JavaScript Code :) -->
+  <script>
+    Vue.component('github-user-card', {
+      template: '#github-user-card-template',
+      props: {
+        username: {
+          type: String,
+          required: true
+        }
+      },
+      data() {
+        return {
+          user: {}
+        }
+      },
+      created() {
+        axios.get(`https://api.github.com/users/${this.username}`)
+          .then(response => {
+            this.user = response.data
+          })
+      }
+    })
+
+    new Vue({
+      el: '#app',
+      data: {
+        usernames: ['hootlex', 'rahaug', 'sdras', 'akryum']
+      }
+    })
+  </script>
+</body>
+
+</html>