質問編集履歴

2

書式の改善

2021/06/02 11:43

投稿

tamaharu31
tamaharu31

スコア4

test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  <meta charset="utf-8">
54
54
 
55
- <title>Book Finder</title>
55
+ <title>My Favorite Books</title>
56
56
 
57
57
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
58
58
 
@@ -66,31 +66,67 @@
66
66
 
67
67
  <body>
68
68
 
69
+  <header>
70
+
71
+ <div class="hamburger-menu" id="favoshelf">
72
+
73
+ <input type="checkbox" id="menu-btn-check">
74
+
75
+ <label for="menu-btn-check" class="menu-btn"><span></span></label>
76
+
77
+ <div class="menu-content">
78
+
79
+ <ul>
80
+
81
+ <li>
82
+
83
+ <p>気になるリスト</p>
84
+
85
+ </li>
86
+
87
+ <li v-for="booksFav in booksFavs"
88
+
89
+ v-bind:key="booksFav">
90
+
91
+  {{booksFav}}
92
+
93
+ </li>
94
+
95
+ </ul>
96
+
97
+ </div>
98
+
99
+ </div>
100
+
101
+ </header>
102
+
69
103
  <div class="container" id="app">
70
104
 
71
- <h3 class="text-center">Book Finder</h3>
105
+ <h3 class="text-center">My Favorite Books</h3>
72
-
106
+
73
- <p> Search:<form v-on:submit.prevent="getResult(query)">
107
+ <form v-on:submit.prevent="getResult(query)">
108
+
74
-
109
+ <div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
110
+
111
+ <input id="search-box" type="text" class="form-control" placeholder="検索文字を入力" v-model="query">
112
+
75
- <input type="text" placeholder="Type in your search" v-model="query" /></p>
113
+ <button id="search" class="btn btn-primary" onclick="">検索</button>
114
+
115
+ </div>
76
116
 
77
117
  <div class="book_wrapper">
78
118
 
79
119
  <div class="book_card" v-for="item in items">
80
120
 
81
-
82
-
83
-
84
-
85
121
  <div class="row no-gutters">
86
122
 
87
123
  <div class="col-md-4">
88
124
 
89
- <img class="card-img" v-bind:src="item.volumeInfo.imageLinks.thumbnail" />
125
+ <img class="card-img" v-bind:src="item.volumeInfo.imageLinks?.thumbnail" />
90
126
 
91
127
  </div>
92
128
 
93
-
129
+   
94
130
 
95
131
  <div class="col-md-8">
96
132
 
@@ -98,7 +134,9 @@
98
134
 
99
135
  <h5 class="card-title">{{item.volumeInfo.title}}</h5>
100
136
 
101
- <p class="card-text">{{item.volumeInfo.authors}}</p>
137
+ <p class="card-text">{{item.volumeInfo.authors}}</p>
138
+
139
+ <p>{{item.id}}</p>
102
140
 
103
141
  <p class="card-text"><small class="text-muted">{{item.volumeInfo.publisher}}</small></p>
104
142
 
@@ -112,6 +150,12 @@
112
150
 
113
151
  </div>
114
152
 
153
+ <button v-on:click="addFavorite(item.id,item.volumeInfo.title)" class="btn btn-light">気になる</button>
154
+
155
+
156
+
157
+
158
+
115
159
  </div>
116
160
 
117
161
  </div>
@@ -122,9 +166,49 @@
122
166
 
123
167
  </div>
124
168
 
169
+
170
+
125
-
171
+ <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
172
+
126
-
173
+ <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
174
+
175
+ <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
176
+
177
+ <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
178
+
179
+
180
+
181
+ <script>
182
+
183
+ //Your web app's Firebase configuration
184
+
185
+ const firebaseConfig = {
186
+
187
+ apiKey: "””””””",
188
+
189
+ authDomain: "orizinal-site.firebaseapp.com",
190
+
191
+ databaseURL: "https://orizinal-site-default-rtdb.firebaseio.com",
192
+
193
+ projectId: "orizinal-site",
194
+
195
+ storageBucket: "orizinal-site.appspot.com",
196
+
197
+ messagingSenderId: "97156991131",
198
+
199
+ appId: "1:97156991131:web:59a83b8e9a1dcec82b5e3e"
200
+
201
+ };
202
+
203
+ // Initialize Firebase
204
+
205
+ firebase.initializeApp(firebaseConfig);
206
+
207
+ </script>
208
+
209
+
210
+
127
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
211
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
128
212
 
129
213
  <script src="main.js"></script>
130
214
 
@@ -138,6 +222,8 @@
138
222
 
139
223
 
140
224
 
225
+
226
+
141
227
  ```
142
228
 
143
229
  Javascript

1

書式の改善

2021/06/02 11:43

投稿

tamaharu31
tamaharu31

スコア4

test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  <meta charset="utf-8">
54
54
 
55
- <title>My Favorite Books</title>
55
+ <title>Book Finder</title>
56
56
 
57
57
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
58
58
 
@@ -66,128 +66,78 @@
66
66
 
67
67
  <body>
68
68
 
69
-  <header>
70
-
71
- <div class="hamburger-menu" id="favoshelf">
69
+ <div class="container" id="app">
70
+
72
-
71
+ <h3 class="text-center">Book Finder</h3>
72
+
73
+ <p> Search:<form v-on:submit.prevent="getResult(query)">
74
+
75
+ <input type="text" placeholder="Type in your search" v-model="query" /></p>
76
+
77
+ <div class="book_wrapper">
78
+
73
- <input type="checkbox" id="menu-btn-check">
79
+ <div class="book_card" v-for="item in items">
74
-
75
- <label for="menu-btn-check" class="menu-btn"><span></span></label>
80
+
76
-
81
+
82
+
83
+
84
+
77
- <div class="menu-content">
85
+ <div class="row no-gutters">
78
-
79
- <ul>
86
+
80
-
81
- <li>
82
-
83
- <p>気になるリスト</p>
87
+ <div class="col-md-4">
88
+
84
-
89
+ <img class="card-img" v-bind:src="item.volumeInfo.imageLinks.thumbnail" />
90
+
85
- </li>
91
+ </div>
86
-
87
- <li v-for="booksFav in booksFavs"
92
+
88
-
93
+
94
+
89
- v-bind:key="booksFav">
95
+ <div class="col-md-8">
90
-
96
+
91
-  {{booksFav}}
97
+ <div class="card-body">
98
+
92
-
99
+ <h5 class="card-title">{{item.volumeInfo.title}}</h5>
100
+
101
+ <p class="card-text">{{item.volumeInfo.authors}}</p>
102
+
103
+ <p class="card-text"><small class="text-muted">{{item.volumeInfo.publisher}}</small></p>
104
+
93
- </li>
105
+ </div>
106
+
107
+
108
+
94
-
109
+ <div class="book_button">
110
+
111
+ <a v-bind:href="item.volumeInfo.previewLink" class="waves-effect waves-light btn" target="_blank">show detail</a>
112
+
95
- </ul>
113
+ </div>
114
+
115
+ </div>
116
+
117
+ </div>
96
118
 
97
119
  </div>
98
120
 
121
+ </div>
122
+
99
123
  </div>
100
124
 
125
+
126
+
101
- </header>
127
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
102
-
128
+
103
- <div class="container" id="app">
129
+ <script src="main.js"></script>
104
-
105
- <h3 class="text-center">My Favorite Books</h3>
130
+
106
-
107
- <form v-on:submit.prevent="getResult(query)">
108
-
109
- <div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
110
-
111
- <input id="search-box" type="text" class="form-control" placeholder="検索文字を入力" v-model="query">
112
-
113
- <button id="search" class="btn btn-primary" onclick="">検索</button>
131
+ <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
114
-
132
+
115
- </div>
133
+ </body>
116
-
117
- <div class="book_wrapper">
134
+
118
-
119
- <div class="book_card" v-for="item in items">
135
+
120
-
121
- <div class="row no-gutters">
136
+
122
-
123
- <div class="col-md-4">
124
-
125
- <img class="card-img" v-bind:src="item.volumeInfo.imageLinks?.thumbnail" />
126
-
127
- </div>
137
+ </html>
128
-
129
-   
130
-
131
- <div class="col-md-8">
132
-
133
- <div class="card-body">
134
-
135
- <h5 class="card-title">{{item.volumeInfo.title}}</h5>
136
-
137
- <p class="card-text">{{item.volumeInfo.authors}}</p>
138
-
139
- <p>{{item.id}}</p>
140
-
141
- <p class="card-text"><small class="text-muted">{{item.volumeInfo.publisher}}</small></p>
142
-
143
- </div>
144
-
145
-
146
-
147
- <div class="book_button">
148
-
149
- <a v-bind:href="item.volumeInfo.previewLink" class="waves-effect waves-light btn" target="_blank">show detail</a>
150
-
151
- </div>
152
-
153
- <button v-on:click="addFavorite(item.id,item.volumeInfo.title)" class="btn btn-light">気になる</button>
154
-
155
-
156
-
157
-
158
-
159
- </div>
160
-
161
- </div>
162
-
163
- </div>
164
-
165
- </div>
166
-
167
- </div>
168
138
 
169
139
 
170
140
 
171
- <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
172
-
173
- <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
174
-
175
- <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
176
-
177
- <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
178
-
179
-
180
-
181
-
182
-
183
- </body>
184
-
185
-
186
-
187
- </html>
188
-
189
-
190
-
191
141
  ```
192
142
 
193
143
  Javascript