質問編集履歴
2
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -25,49 +25,92 @@
|
|
|
25
25
|
<html lang="en">
|
|
26
26
|
<head>
|
|
27
27
|
<meta charset="utf-8">
|
|
28
|
-
<title>
|
|
28
|
+
<title>My Favorite Books</title>
|
|
29
29
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
|
30
30
|
<link rel="stylesheet" href="main.css">
|
|
31
31
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
32
32
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
33
33
|
</head>
|
|
34
34
|
<body>
|
|
35
|
+
<header>
|
|
36
|
+
<div class="hamburger-menu" id="favoshelf">
|
|
37
|
+
<input type="checkbox" id="menu-btn-check">
|
|
38
|
+
<label for="menu-btn-check" class="menu-btn"><span></span></label>
|
|
39
|
+
<div class="menu-content">
|
|
40
|
+
<ul>
|
|
41
|
+
<li>
|
|
42
|
+
<p>気になるリスト</p>
|
|
43
|
+
</li>
|
|
44
|
+
<li v-for="booksFav in booksFavs"
|
|
45
|
+
v-bind:key="booksFav">
|
|
46
|
+
{{booksFav}}
|
|
47
|
+
</li>
|
|
48
|
+
</ul>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</header>
|
|
35
52
|
<div class="container" id="app">
|
|
36
|
-
<h3 class="text-center">
|
|
53
|
+
<h3 class="text-center">My Favorite Books</h3>
|
|
37
|
-
<
|
|
54
|
+
<form v-on:submit.prevent="getResult(query)">
|
|
55
|
+
<div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
|
|
56
|
+
<input id="search-box" type="text" class="form-control" placeholder="検索文字を入力" v-model="query">
|
|
38
|
-
|
|
57
|
+
<button id="search" class="btn btn-primary" onclick="">検索</button>
|
|
58
|
+
</div>
|
|
39
59
|
<div class="book_wrapper">
|
|
40
60
|
<div class="book_card" v-for="item in items">
|
|
41
|
-
|
|
42
|
-
|
|
43
61
|
<div class="row no-gutters">
|
|
44
62
|
<div class="col-md-4">
|
|
45
|
-
<img class="card-img" v-bind:src="item.volumeInfo.imageLinks.thumbnail" />
|
|
63
|
+
<img class="card-img" v-bind:src="item.volumeInfo.imageLinks?.thumbnail" />
|
|
46
64
|
</div>
|
|
47
|
-
|
|
65
|
+
|
|
48
66
|
<div class="col-md-8">
|
|
49
67
|
<div class="card-body">
|
|
50
68
|
<h5 class="card-title">{{item.volumeInfo.title}}</h5>
|
|
51
|
-
<p class="card-text">{{item.volumeInfo.authors}}</p>
|
|
69
|
+
<p class="card-text">{{item.volumeInfo.authors}}</p>
|
|
70
|
+
<p>{{item.id}}</p>
|
|
52
71
|
<p class="card-text"><small class="text-muted">{{item.volumeInfo.publisher}}</small></p>
|
|
53
72
|
</div>
|
|
54
73
|
|
|
55
74
|
<div class="book_button">
|
|
56
75
|
<a v-bind:href="item.volumeInfo.previewLink" class="waves-effect waves-light btn" target="_blank">show detail</a>
|
|
57
76
|
</div>
|
|
77
|
+
<button v-on:click="addFavorite(item.id,item.volumeInfo.title)" class="btn btn-light">気になる</button>
|
|
78
|
+
|
|
79
|
+
|
|
58
80
|
</div>
|
|
59
81
|
</div>
|
|
60
82
|
</div>
|
|
61
83
|
</div>
|
|
62
84
|
</div>
|
|
85
|
+
|
|
63
|
-
|
|
86
|
+
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
|
|
87
|
+
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
|
|
88
|
+
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
|
|
89
|
+
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
|
|
90
|
+
|
|
91
|
+
<script>
|
|
92
|
+
//Your web app's Firebase configuration
|
|
93
|
+
const firebaseConfig = {
|
|
94
|
+
apiKey: "””””””",
|
|
95
|
+
authDomain: "orizinal-site.firebaseapp.com",
|
|
96
|
+
databaseURL: "https://orizinal-site-default-rtdb.firebaseio.com",
|
|
97
|
+
projectId: "orizinal-site",
|
|
98
|
+
storageBucket: "orizinal-site.appspot.com",
|
|
99
|
+
messagingSenderId: "97156991131",
|
|
100
|
+
appId: "1:97156991131:web:59a83b8e9a1dcec82b5e3e"
|
|
101
|
+
};
|
|
102
|
+
// Initialize Firebase
|
|
103
|
+
firebase.initializeApp(firebaseConfig);
|
|
104
|
+
</script>
|
|
105
|
+
|
|
64
|
-
|
|
106
|
+
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
|
|
65
107
|
<script src="main.js"></script>
|
|
66
108
|
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
|
|
67
109
|
</body>
|
|
68
110
|
|
|
69
111
|
</html>
|
|
70
112
|
|
|
113
|
+
|
|
71
114
|
```
|
|
72
115
|
Javascript
|
|
73
116
|
```
|
1
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -25,70 +25,45 @@
|
|
|
25
25
|
<html lang="en">
|
|
26
26
|
<head>
|
|
27
27
|
<meta charset="utf-8">
|
|
28
|
-
<title>
|
|
28
|
+
<title>Book Finder</title>
|
|
29
29
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
|
30
30
|
<link rel="stylesheet" href="main.css">
|
|
31
31
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
32
32
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
33
33
|
</head>
|
|
34
34
|
<body>
|
|
35
|
-
<header>
|
|
36
|
-
<div class="hamburger-menu" id="favoshelf">
|
|
37
|
-
<input type="checkbox" id="menu-btn-check">
|
|
38
|
-
<label for="menu-btn-check" class="menu-btn"><span></span></label>
|
|
39
|
-
<div class="menu-content">
|
|
40
|
-
<ul>
|
|
41
|
-
<li>
|
|
42
|
-
<p>気になるリスト</p>
|
|
43
|
-
</li>
|
|
44
|
-
<li v-for="booksFav in booksFavs"
|
|
45
|
-
v-bind:key="booksFav">
|
|
46
|
-
{{booksFav}}
|
|
47
|
-
</li>
|
|
48
|
-
</ul>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</header>
|
|
52
35
|
<div class="container" id="app">
|
|
53
|
-
<h3 class="text-center">
|
|
36
|
+
<h3 class="text-center">Book Finder</h3>
|
|
54
|
-
<form v-on:submit.prevent="getResult(query)">
|
|
37
|
+
<p> Search：<form v-on:submit.prevent="getResult(query)">
|
|
55
|
-
<div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
|
|
56
|
-
<input id="search-box" type="text" class="form-control" placeholder="検索文字を入力" v-model="query">
|
|
57
|
-
|
|
38
|
+
<input type="text" placeholder="Type in your search" v-model="query" /></p>
|
|
58
|
-
</div>
|
|
59
39
|
<div class="book_wrapper">
|
|
60
40
|
<div class="book_card" v-for="item in items">
|
|
41
|
+
|
|
42
|
+
|
|
61
43
|
<div class="row no-gutters">
|
|
62
44
|
<div class="col-md-4">
|
|
63
|
-
<img class="card-img" v-bind:src="item.volumeInfo.imageLinks
|
|
45
|
+
<img class="card-img" v-bind:src="item.volumeInfo.imageLinks.thumbnail" />
|
|
64
46
|
</div>
|
|
65
|
-
|
|
47
|
+
|
|
66
48
|
<div class="col-md-8">
|
|
67
49
|
<div class="card-body">
|
|
68
50
|
<h5 class="card-title">{{item.volumeInfo.title}}</h5>
|
|
69
|
-
<p class="card-text">{{item.volumeInfo.authors}}</p>
|
|
51
|
+
<p class="card-text">{{item.volumeInfo.authors}}</p>
|
|
70
|
-
<p>{{item.id}}</p>
|
|
71
52
|
<p class="card-text"><small class="text-muted">{{item.volumeInfo.publisher}}</small></p>
|
|
72
53
|
</div>
|
|
73
54
|
|
|
74
55
|
<div class="book_button">
|
|
75
56
|
<a v-bind:href="item.volumeInfo.previewLink" class="waves-effect waves-light btn" target="_blank">show detail</a>
|
|
76
57
|
</div>
|
|
77
|
-
<button v-on:click="addFavorite(item.id,item.volumeInfo.title)" class="btn btn-light">気になる</button>
|
|
78
|
-
|
|
79
|
-
|
|
80
58
|
</div>
|
|
81
59
|
</div>
|
|
82
60
|
</div>
|
|
83
61
|
</div>
|
|
84
62
|
</div>
|
|
85
|
-
|
|
86
|
-
|
|
63
|
+
|
|
87
|
-
<script src="https://
|
|
64
|
+
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
|
|
65
|
+
<script src="main.js"></script>
|
|
88
|
-
<script src="https://
|
|
66
|
+
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
|
|
89
|
-
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
|
|
90
|
-
|
|
91
|
-
|
|
92
67
|
</body>
|
|
93
68
|
|
|
94
69
|
</html>
|