schalkneethling/users-correct.html

## users-correct.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub Users</title>
    <style>
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>WaterBear</h1>
      <table>
        <caption>
          Contributors
        </caption>
        <thead>
          <tr>
            <th>Username</th>
            <th>Bio</th>
            <th>Public repos</th>
            <th>Public gists</th>
            <th>Number of followers</th>
            <th>Joined</th>
          </tr>
        </thead>
        <tbody>
          <tr
            is="vue:github-user-row"
            v-for="username in usernames"
            :username="username"
          ></tr>
        </tbody>
      </table>
    </div>

    <script id="github-user-row-template" type="text/x-template">
      <tr>
          <td><img :src="user.avatar_url" height="100" width="100" />
            <a :href="user.html_url">{{ user.name }}</a>

            </td>
          <td>{{ user.bio }}</td>
          <td><a :href="user.repos_url">{{ user.public_repos }}</a></td>
          <td>{{ user.public_gists }}</td>
          <td>{{ user.followers }}</td>
          <td>{{ new Date(user.created_at).toLocaleDateString() }}</td>
      </tr>
    </script>

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      Vue.createApp({
        data() {
          return {
            usernames: ["schalkneethling"],
          };
        },
      })
        .component("github-user-row", {
          template: "#github-user-row-template",
          props: ["username"],
          data() {
            return {
              user: {},
            };
          },
          async created() {
            const userAPI = "https://api.github.com/users";
            try {
              const response = await axios.get(`${userAPI}/${this.username}`);
              this.user = response.data;
            } catch (error) {
              console.log(error);
            }
          },
        })
        .mount("#app");
    </script>
  </body>
</html>

## users-incorrect.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub Users</title>
    <style>
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>WaterBear</h1>
      <table>
        <caption>
          Contributors
        </caption>
        <thead>
          <tr>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <github-user-row
            v-for="username in usernames"
            :username="username"
          ></github-user-row>
        </tbody>
      </table>
    </div>

    <script id="github-user-row-template" type="text/x-template">
      <tr>
          <td>{{ user.name }}</td>
      </tr>
    </script>

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      Vue.createApp({
        data() {
          return {
            usernames: ["schalkneethling"],
          };
        },
      })
        .component("github-user-row", {
          template: "#github-user-row-template",
          props: ["username"],
          data() {
            return {
              user: {},
            };
          },
          async created() {
            const userAPI = "https://api.github.com/users";
            try {
              const response = await axios.get(`${userAPI}/${this.username}`);
              this.user = response.data;
            } catch (error) {
              console.log(error);
            }
          },
        })
        .mount("#app");
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>GitHub Users</title>
	<style>
	table {
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="app">
	<h1>WaterBear</h1>
	<table>
	<caption>
	Contributors
	</caption>
	<thead>
	<tr>
	<th>Username</th>
	<th>Bio</th>
	<th>Public repos</th>
	<th>Public gists</th>
	<th>Number of followers</th>
	<th>Joined</th>
	</tr>
	</thead>
	<tbody>
	<tr
	is="vue:github-user-row"
	v-for="username in usernames"
	:username="username"
	></tr>
	</tbody>
	</table>
	</div>

	<script id="github-user-row-template" type="text/x-template">
	<tr>
	<td><img :src="user.avatar_url" height="100" width="100" />
	<a :href="user.html_url">{{ user.name }}</a>

	</td>
	<td>{{ user.bio }}</td>
	<td><a :href="user.repos_url">{{ user.public_repos }}</a></td>
	<td>{{ user.public_gists }}</td>
	<td>{{ user.followers }}</td>
	<td>{{ new Date(user.created_at).toLocaleDateString() }}</td>
	</tr>
	</script>

	<script src="https://unpkg.com/vue@3"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<script>
	Vue.createApp({
	data() {
	return {
	usernames: ["schalkneethling"],
	};
	},
	})
	.component("github-user-row", {
	template: "#github-user-row-template",
	props: ["username"],
	data() {
	return {
	user: {},
	};
	},
	async created() {
	const userAPI = "https://api.github.com/users";
	try {
	const response = await axios.get(`${userAPI}/${this.username}`);
	this.user = response.data;
	} catch (error) {
	console.log(error);
	}
	},
	})
	.mount("#app");
	</script>
	</body>
	</html>