juice500ml/index.html

## index.html
<!doctype html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>

<body>
    <div id="app">
        <header class="navbar navbar-expand navbar-light bg-dark justify-content-between">
            <a class="navbar-brand" href="" class="display-4" style="color:white;">or<b>git</b></a>
            <form class="form-inline" v-on:submit.prevent="">
                <input v-on:keyup.enter="findOrg()" v-model="githubOrg" class="form-control mr-sm-2" placeholder="Github Organization">
                <div v-on:click="findOrg()" class="btn btn-outline-success my-2 my-sm-0">Watch</div>
            </form>
        </header>

        <div class="container-fluid">
            <div class="row">
                <div class="col-3 p-3">
                    <div v-if="users.length === 0">
                        No Users.
                    </div>
                    <a v-for="user in users" v-bind:href="user.link" target="_blank" type="button" class="btn btn-light btn-lg btn-block" style="display:inline-block">
                        <img v-bind:src="user.img" class="float-left" style="display:block; height:4rem;">
                        <p style="text-align:center; vertical-align:middle"> {{user.name}} </p>
                    </a>
                </div>
                <div class="col-9 p-3">
                    <div v-if="events.length === 0">
                        No Events.
                    </div>
                    <div v-for="event in events" class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{event.title}} by {{event.user}} at <a v-bind:href="event.link" class="card-text" target="_blank">{{event.repo}}</a></h4>
                            <h6 class="card-subtitle text-muted float-right">{{event.time}}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        class User {
            constructor(name, link, img) {
                this.name = name;
                this.link = link;
                this.img = img;
            }
        }
        class Event {
            constructor(data) {
                this.title = data.type;
                this.time = data.created_at;
                this.user = data.actor.login;
                this.repo = data.repo.name;
                this.link = 'https://github.com/' + data.repo.name;
            }
        }
        var app = new Vue({
            el: '#app',
            data: {
                users: [],
                events: [],
                githubOrg: '',
            },
            methods: {
                findOrg() {
                    axios.get('https://api.github.com/orgs/' + app.githubOrg)
                        .then((response) => {
                            app.findUser();
                        })
                        .catch((error) => {
                            alert("No such organization!");
                        });
                },
                findUser() {
                    axios.get('https://api.github.com/orgs/' + app.githubOrg + '/public_members')
                        .then((response) => {
                            app.users = [];
                            for (let i = 0; i < response.data.length; i++) {
                                app.users.push(
                                    new User(
                                        response.data[i].login,
                                        response.data[i].html_url,
                                        response.data[i].avatar_url
                                    )
                                );
                            }
                        });
                },
                clickLink(link) {
                    window.open(link, '_blank');
                }
            },
            watch: {
                users: (val) => {
                    app.events = [];
                    for (let i = 0; i < val.length; i++) {
                        axios.get('https://api.github.com/users/' + val[i].name + '/events/public')
                            .then((response) => {
                                for (let j = 0; j < response.data.length; j++) {
                                    app.events.push(new Event(response.data[j]));
                                    app.events.sort((l, r) => {
                                        return Date.parse(l.time) < Date.parse(r.time);
                                    });
                                }
                            });
                    }
                },
            }
        });
    </script>
</body>

</html>
	<!doctype html>
	<html>

	<head>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
	</head>

	<body>
	<div id="app">
	<header class="navbar navbar-expand navbar-light bg-dark justify-content-between">
	<a class="navbar-brand" href="" class="display-4" style="color:white;">or<b>git</b></a>
	<form class="form-inline" v-on:submit.prevent="">
	<input v-on:keyup.enter="findOrg()" v-model="githubOrg" class="form-control mr-sm-2" placeholder="Github Organization">
	<div v-on:click="findOrg()" class="btn btn-outline-success my-2 my-sm-0">Watch</div>
	</form>
	</header>

	<div class="container-fluid">
	<div class="row">
	<div class="col-3 p-3">
	<div v-if="users.length === 0">
	No Users.
	</div>
	<a v-for="user in users" v-bind:href="user.link" target="_blank" type="button" class="btn btn-light btn-lg btn-block" style="display:inline-block">
	<img v-bind:src="user.img" class="float-left" style="display:block; height:4rem;">
	<p style="text-align:center; vertical-align:middle"> {{user.name}} </p>
	</a>
	</div>
	<div class="col-9 p-3">
	<div v-if="events.length === 0">
	No Events.
	</div>
	<div v-for="event in events" class="card">
	<div class="card-body">
	<h4 class="card-title">{{event.title}} by {{event.user}} at <a v-bind:href="event.link" class="card-text" target="_blank">{{event.repo}}</a></h4>
	<h6 class="card-subtitle text-muted float-right">{{event.time}}</h6>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script>
	class User {
	constructor(name, link, img) {
	this.name = name;
	this.link = link;
	this.img = img;
	}
	}
	class Event {
	constructor(data) {
	this.title = data.type;
	this.time = data.created_at;
	this.user = data.actor.login;
	this.repo = data.repo.name;
	this.link = 'https://github.com/' + data.repo.name;
	}
	}
	var app = new Vue({
	el: '#app',
	data: {
	users: [],
	events: [],
	githubOrg: '',
	},
	methods: {
	findOrg() {
	axios.get('https://api.github.com/orgs/' + app.githubOrg)
	.then((response) => {
	app.findUser();
	})
	.catch((error) => {
	alert("No such organization!");
	});
	},
	findUser() {
	axios.get('https://api.github.com/orgs/' + app.githubOrg + '/public_members')
	.then((response) => {
	app.users = [];
	for (let i = 0; i < response.data.length; i++) {
	app.users.push(
	new User(
	response.data[i].login,
	response.data[i].html_url,
	response.data[i].avatar_url
	)
	);
	}
	});
	},
	clickLink(link) {
	window.open(link, '_blank');
	}
	},
	watch: {
	users: (val) => {
	app.events = [];
	for (let i = 0; i < val.length; i++) {
	axios.get('https://api.github.com/users/' + val[i].name + '/events/public')
	.then((response) => {
	for (let j = 0; j < response.data.length; j++) {
	app.events.push(new Event(response.data[j]));
	app.events.sort((l, r) => {
	return Date.parse(l.time) < Date.parse(r.time);
	});
	}
	});
	}
	},
	}
	});
	</script>
	</body>

	</html>