Skip to content

Instantly share code, notes, and snippets.

@mentix02

mentix02/index.html

Created February 11, 2021 07:35
Show Gist options
  • Save mentix02/ccbb29527d928c77d3517277c8181824 to your computer and use it in GitHub Desktop.
Save mentix02/ccbb29527d928c77d3517277c8181824 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DJ Book Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
</head>
<body>
<div id="app">
<b-container>
<br />
<b-form @submit="handleSubmit">
<b-row class="justify-content-center">
<b-col cols="6">
<b-form-input v-model="q" type="search" :disabled="loading"
placeholder="Search for Books" autoComplete="off" autoFocus></b-form-input>
</b-col>
</b-row>
</b-form>
<b-row class="justify-content-center mt-4">
<b-col cols="6">
<b-list-group>
<b-list-group-item v-for="(book, idx) in books" :key="idx">
<div v-if="loading">
<b-skeleton width="25%"></b-skeleton>
<b-skeleton width="55%"></b-skeleton>
</div>
<div v-else>[[ book.title ]]</div>
</b-list-group-item>
</b-list-group>
</b-col>
</b-row>
</b-container>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: {
q: '',
books: [],
loading: false,
},
methods: {
async handleSubmit(e) {
e.preventDefault();
this.loading = true;
this.books = new Array(10);
const q = this.q.replace(/\s+/g, " ").trim();
const data = await fetch(`/api/search/?q=${encodeURI(q)}`);
const books = await data.json();
console.table(books);
this.books = books;
this.loading = false;
}
},
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment