-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (99 loc) · 5.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>IGME 330: Project 2</title>
<!--VUE AND BOOTSTRAP-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<!-- OUR STYLESHEET AND WEB FONT-->
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<b-container fluid id="root">
<b-row>
<header>
<h1>bookWatch</h1>
<p>input the title of a book to receive movie recommendations</p>
</header>
</b-row>
<!-- SEARCH AND SELECTION -->
<b-row class="searchArea">
<!--search input field + search button-->
<b-col align-h="left">
<b-input-group id="searchbar">
<b-form-input id="searchInput" placeholder="Enter book title here..." v-model.trim="bookName" v-model.trim="query"></b-form-input>
<b-input-group-append>
<b-button variant="primary" id="search" @click="search">Search</b-button>
</b-input-group-append>
</b-input-group>
</b-col>
<!-- selection dropdown to pick how many movie suggestions user wants-->
<b-col cols="1" align-h="right" id="limitSel">
<b-input-group>
<b-input-group-prepend>
<b-badge class="function" variant="primary"># of Results</b-badge>
</b-input-group-prepend>
<b-form-select v-model="selected" :options="options" id="limit" size="sm" class="mt-3"></b-form-select>
</b-input-group>
</b-col>
</b-row>
<!-- BOOK INFO-->
<b-row>
<b-col id="book">
<!-- loading spinner that spins on search -->
<div v-bind:style="styleLoad" id="loading" class="text-center">
<b-spinner variant="primary" style="width: 5rem; height: 5rem;" type="grow" label="Spinning"></b-spinner>
</div>
<!-- error message if a book can't be found-->
<div v-if="!bookFound" v-bind:style="error" class="text-center">
<b-alert show variant="danger">Sorry, we were unable to find your book. Please make sure you've entered the title correctly and try again.</b-alert>
</div>
<!-- actual book info component-->
<div id="bookHTML" v-bind:style="styleInfo">
<book-title v-bind:title="bookHeader" v-bind:imgLink="bookPic"></book-title>
<book-info v-bind:author="bookAuthor" v-bind:descrip="bookDescrip"></book-info>
</div>
<!--button to cycle through book results to find the right one-->
<div id="control2" class="text-center">
<b-button variant="primary" id="retry" :disabled="searchGoing" @click="tryAgain">Wrong Book?</b-button>
<p id="disclaimer">Due to the databases being used for this project, we may not be able to access every book or even some
common books.
</p>
</div>
</b-col>
<!-- MOVIE INFO -->
<b-col cols="7" id="movies">
<!--movie component-->
<div v-for="movie in movieObjects">
<movie v-bind:title="movie.title" v-bind:rating="movie.rating" v-bind:descrip="movie.descrip" v-bind:score="movie.score"></movie>
</div>
<!--can't find any movies error message-->
<div v-if="!moviesFound" v-bind:style="movieError" class="text-center">
<b-alert show variant="danger">Obscure taste? Or just our database? <br> Either way, there are no suggestions for this book, sorry!</b-alert>
</div>
</b-col>
</b-row>
<!--its us-->
<b-row>
<footer>
<p>Created by Jin Jin Heipler and Julia Hotaling © 2019</p>
</footer>
</b-row>
</b-container>
<!--main and component scripts-->
<script src="scripts/components.js"></script>
<script src="scripts/movie.js"></script>
<!--FIREBASE SERVER-->
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>