se1983/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello API!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>

    <section class="section">
        <div id="app">
            <div class="columns">
                <div class="column is-three-quarters">
                    <input class="input" type="text" placeholder="Text input" ref="input_url"
                        value="https://gist.githubusercontent.com/sebsch/d0ab09f306f3b2db83369456bd7baba2/raw/0bcc8a1e9b253df611a819c70e6bd0435d524084/boxed_cacher_part_of_struct.rs">
                </div>
                <div class="column">
                    <poll-button></poll-button>
                </div>
            </div>
            <div class="box">
                <pre>{{ output }}</pre>
            </div>
        </div>
    </section>

    <script>

        Vue.component('poll-button', {
            data: function () {
                return {
                    isLoading: true,
                    isError: false
                }
            },

            created() { this.pollStatus() },
            methods: {
                pollStatus() {
                    this.attrs = setInterval(() => {
                        axios.get(
                            this.$root.$refs.input_url.value,
                            { validateStatus: false }
                        ).then(response => {
                            this.isLoading = response.status != 200;
                            this.isError = response.status >= 400
                        }).catch(function (error) {
                            this.isError = true
                        })
                    }, 3000)
                },
                submit() {
                    console.log(this.$root.$refs.input_url.value)
                    axios.get(this.$root.$refs.input_url.value)
                        .then(response => (this.$root.output = response.data))
                },
            },
            template: `<button
            class="button is-large is-fullwidth is-rounded is-outlined"
            v-on:click="submit"
            v-bind:class="{
                'is-loading': isLoading,
                'is-success': !isError && !isLoading,
                'is-danger': isError,
            }"
            >Submit</button>`
        });

        new Vue({
            el: '#app',
            data: function () {
                return {
                    output: null
                }
            }
        })

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello API!</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>

	<body>

	<section class="section">
	<div id="app">
	<div class="columns">
	<div class="column is-three-quarters">
	<input class="input" type="text" placeholder="Text input" ref="input_url"
	value="https://gist.githubusercontent.com/sebsch/d0ab09f306f3b2db83369456bd7baba2/raw/0bcc8a1e9b253df611a819c70e6bd0435d524084/boxed_cacher_part_of_struct.rs">
	</div>
	<div class="column">
	<poll-button></poll-button>
	</div>
	</div>
	<div class="box">
	<pre>{{ output }}</pre>
	</div>
	</div>
	</section>

	<script>

	Vue.component('poll-button', {
	data: function () {
	return {
	isLoading: true,
	isError: false
	}
	},

	created() { this.pollStatus() },
	methods: {
	pollStatus() {
	this.attrs = setInterval(() => {
	axios.get(
	this.$root.$refs.input_url.value,
	{ validateStatus: false }
	).then(response => {
	this.isLoading = response.status != 200;
	this.isError = response.status >= 400
	}).catch(function (error) {
	this.isError = true
	})
	}, 3000)
	},
	submit() {
	console.log(this.$root.$refs.input_url.value)
	axios.get(this.$root.$refs.input_url.value)
	.then(response => (this.$root.output = response.data))
	},
	},
	template: `<button
	class="button is-large is-fullwidth is-rounded is-outlined"
	v-on:click="submit"
	v-bind:class="{
	'is-loading': isLoading,
	'is-success': !isError && !isLoading,
	'is-danger': isError,
	}"
	>Submit</button>`
	});

	new Vue({
	el: '#app',
	data: function () {
	return {
	output: null
	}
	}
	})

	</script>
	</body>

	</html>