eyy/vue-gh-random-users.html

## vue-gh-random-users.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>GitHub Users, A Selection</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <style>
    body {
      margin: 0;
      padding: 2em;
      font-size: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a {
      color: #233656;
      text-decoration: none;
    }
    a:hover {
      color: #171b30;
      text-decoration: underline;
    }
    #app {
      max-width: 500px;
      margin: 0 auto;
    }
    .user-list {
      padding: 0;
    }
    .user {
      display: inline-block;
      position: relative;
      width: 100%;
      margin-bottom: 1em;
      padding: 1em;
      background: #E4ECEB;
      border-radius: .2em;
      border-bottom: 4px solid #7B9BA6;
    }
    .user img {
      max-height: 80px;
      margin-right: 1em;
      border-radius: 50%;
      border: 2px solid white;
      vertical-align: middle;
    }
    .user a.remove {
      position: absolute;
      right: .5em;
      top: .5em;
    }

    .list-enter-active, .list-leave-active {
      transition: all 1s;
    }
    .list-enter, .list-leave-to {
      opacity: 0;
      transform: translateX(-30px);
    }
    .list-move {
      transition: transform 1s;
    }
  </style>
</head>
<body>

<div id="app">
  <p>A (Semi-Random) Selection of GitHub Users</p>
  <p v-if="!users.length">
    Loading...
  </p>
  <article class="user-list">
    <transition-group name="list" tag="div">
      <div v-for="(user, index) in users" class="user" v-bind:key="user.login">
        <img v-bind:src="user.avatar_url" alt="">
        <a v-bind:href="user.html_url">{{ user.login }}</a>
        <a href="#" v-on:click="remove(index)" class="remove">No thanks</a>
      </div>
    </transition-group>
  </article>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      users: [],
      random_users: [],
    },

    async created () {
      this.random_users = await this.fetchUsers()
      this.users = [
        this.random_users.pop(),
        this.random_users.pop(),
        this.random_users.pop()
      ]
    },

    methods: {
      remove (index) {
        this.users.splice(index, 1)
        // if (!this.users.length)

        this.users.push(this.random_users.pop())
        return false
      },
      async fetchUsers () {
        // github has no random user api, therefore we fetch the last 100 gists' authors and shuffle them
        let gists = await fetch('https://api.github.com/gists/public?per_page=100')
          .then(res => res.json())

        // remove duplicates
        let duplicate_watch = {}

        return shuffle(gists)
          .map(gist => gist.owner)
          .filter(user => {
            if (duplicate_watch[user.login])
              return false
            duplicate_watch[user.login] = true
            return true
          })
      }
    }
  })

  // from https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array#6274398
  function shuffle (array) {
    let counter = array.length

    // While there are elements in the array
    while (counter > 0) {
      // Pick a random index
      let index = Math.floor(Math.random() * counter)

      // Decrease counter by 1
      counter--

      // And swap the last element with it
      let temp = array[counter]
      array[counter] = array[index]
      array[index] = temp
    }

    return array
  }
</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>GitHub Users, A Selection</title>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<style>
	body {
	margin: 0;
	padding: 2em;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
	"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
	sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
	a {
	color: #233656;
	text-decoration: none;
	}
	a:hover {
	color: #171b30;
	text-decoration: underline;
	}
	#app {
	max-width: 500px;
	margin: 0 auto;
	}
	.user-list {
	padding: 0;
	}
	.user {
	display: inline-block;
	position: relative;
	width: 100%;
	margin-bottom: 1em;
	padding: 1em;
	background: #E4ECEB;
	border-radius: .2em;
	border-bottom: 4px solid #7B9BA6;
	}
	.user img {
	max-height: 80px;
	margin-right: 1em;
	border-radius: 50%;
	border: 2px solid white;
	vertical-align: middle;
	}
	.user a.remove {
	position: absolute;
	right: .5em;
	top: .5em;
	}

	.list-enter-active, .list-leave-active {
	transition: all 1s;
	}
	.list-enter, .list-leave-to {
	opacity: 0;
	transform: translateX(-30px);
	}
	.list-move {
	transition: transform 1s;
	}
	</style>
	</head>
	<body>

	<div id="app">
	<p>A (Semi-Random) Selection of GitHub Users</p>
	<p v-if="!users.length">
	Loading...
	</p>
	<article class="user-list">
	<transition-group name="list" tag="div">
	<div v-for="(user, index) in users" class="user" v-bind:key="user.login">
	<img v-bind:src="user.avatar_url" alt="">
	<a v-bind:href="user.html_url">{{ user.login }}</a>
	<a href="#" v-on:click="remove(index)" class="remove">No thanks</a>
	</div>
	</transition-group>
	</article>
	</div>

	<script>
	new Vue({
	el: '#app',
	data: {
	users: [],
	random_users: [],
	},

	async created () {
	this.random_users = await this.fetchUsers()
	this.users = [
	this.random_users.pop(),
	this.random_users.pop(),
	this.random_users.pop()
	]
	},

	methods: {
	remove (index) {
	this.users.splice(index, 1)
	// if (!this.users.length)

	this.users.push(this.random_users.pop())
	return false
	},
	async fetchUsers () {
	// github has no random user api, therefore we fetch the last 100 gists' authors and shuffle them
	let gists = await fetch('https://api.github.com/gists/public?per_page=100')
	.then(res => res.json())

	// remove duplicates
	let duplicate_watch = {}

	return shuffle(gists)
	.map(gist => gist.owner)
	.filter(user => {
	if (duplicate_watch[user.login])
	return false
	duplicate_watch[user.login] = true
	return true
	})
	}
	}
	})

	// from https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array#6274398
	function shuffle (array) {
	let counter = array.length

	// While there are elements in the array
	while (counter > 0) {
	// Pick a random index
	let index = Math.floor(Math.random() * counter)

	// Decrease counter by 1
	counter--

	// And swap the last element with it
	let temp = array[counter]
	array[counter] = array[index]
	array[index] = temp
	}

	return array
	}
	</script>

	</body>
	</html>