teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

書式の改善

2021/06/02 11:43

投稿

tamaharu31
tamaharu31

スコア4

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>Book Finder</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">Book Finder</h3>
53
+ <h3 class="text-center">My Favorite Books</h3>
37
- <p> Search:<form v-on:submit.prevent="getResult(query)">
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
- <input type="text" placeholder="Type in your search" v-model="query" /></p>
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
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
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

書式の改善

2021/06/02 11:43

投稿

tamaharu31
tamaharu31

スコア4

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>My Favorite Books</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">My Favorite Books</h3>
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
- <button id="search" class="btn btn-primary" onclick="">検索</button>
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?.thumbnail" />
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
- <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
63
+
87
- <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
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://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
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>