김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
leeseohyun(lee)
becc7835 1 parent 09e0ba5b

Apply open API and modify html layout/ 

Apply open API (food menu of rest area) to display food menu in website and modify layout and design of 'menu.html'
Inline Side-by-side
Showing 1 changed file with 234 additions and 46 deletions
...@@ -35,93 +35,212 @@ ...@@ -35,93 +35,212 @@
35 </ul> 35 </ul>
36 </li> 36 </li>
37 <li class="nav-item dropdown"> 37 <li class="nav-item dropdown">
38 - <a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a> 38 + <a class="nav-link dropdown-toggle" id="navbarDropdownLogin" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Login</a>
39 - <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio"> 39 + <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownLogin">
40 - <li><a class="dropdown-item" href="portfolio-overview.html">Portfolio Overview</a></li> 40 + <li><a class="dropdown-item" href="/login">Login</a></li>
41 - <li><a class="dropdown-item" href="portfolio-item.html">Portfolio Item</a></li> 41 + <li><a class="dropdown-item" href="/signup">Sign-up</a></li>
42 </ul> 42 </ul>
43 </li> 43 </li>
44 </ul> 44 </ul>
45 </div> 45 </div>
46 </div> 46 </div>
47 </nav> 47 </nav>
48 +
48 <!-- Header--> 49 <!-- Header-->
49 <header class="py-5"> 50 <header class="py-5">
50 <div class="container px-5"> 51 <div class="container px-5">
51 <div class="row justify-content-center"> 52 <div class="row justify-content-center">
52 <div class="col-lg-8 col-xxl-6"> 53 <div class="col-lg-8 col-xxl-6">
53 <div class="text-center my-5"> 54 <div class="text-center my-5">
54 - <h1 class="fw-bolder mb-3">휴게소 메뉴 정보 .</h1> 55 + <h1 class="fw-bolder mb-3">휴게소 메뉴 정보</h1>
55 - <p class="lead fw-normal text-muted mb-4">Start Bootstrap was built on the idea that quality, functional website templates and themes should be available to everyone. Use our open source, free products, or support us by purchasing one of our premium products or services.</p> 56 + <p class="lead fw-normal text-muted mb-4">Just search the name of the rest stop,<br>You'll find out what kind of food there is at the rest area.</p>
56 - <a class="btn btn-primary btn-lg" href="#scroll-target">이 자리에 드랍다운 2개 넣고, 각 고속도로, 휴게소 선택하도록</a> 57 + <p><h3>검색할 휴게소의 이름을 입력하세요</h3></p>
58 +
59 + <input type="text" placeholder="내용을 입력하세요" id="menuname"><input type="button" onclick="Showmenu()" value="확인">
60 + </a>
57 </div> 61 </div>
58 </div> 62 </div>
59 </div> 63 </div>
60 </div> 64 </div>
61 </header> 65 </header>
62 - <!-- About section one--> 66 +
63 - <section class="py-5 bg-light" id="scroll-target"> 67 + <!--추천메뉴-->
64 - <div class="container px-5 my-5">
65 - <div class="row gx-5 align-items-center">
66 - <div class="col-lg-6"><img class="img-fluid rounded mb-5 mb-lg-0" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
67 - <div class="col-lg-6">
68 - <h2 class="fw-bolder">Our founding</h2>
69 - <p class="lead fw-normal text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto est, ut esse a labore aliquam beatae expedita. Blanditiis impedit numquam libero molestiae et fugit cupiditate, quibusdam expedita, maiores eaque quisquam.</p>
70 - </div>
71 - </div>
72 - </div>
73 - </section>
74 - <!-- About section two-->
75 - <section class="py-5">
76 - <div class="container px-5 my-5">
77 - <div class="row gx-5 align-items-center">
78 - <div class="col-lg-6 order-first order-lg-last"><img class="img-fluid rounded mb-5 mb-lg-0" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
79 - <div class="col-lg-6">
80 - <h2 class="fw-bolder">Growth &amp; beyond</h2>
81 - <p class="lead fw-normal text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto est, ut esse a labore aliquam beatae expedita. Blanditiis impedit numquam libero molestiae et fugit cupiditate, quibusdam expedita, maiores eaque quisquam.</p>
82 - </div>
83 - </div>
84 - </div>
85 - </section>
86 - <!-- Team members section-->
87 <section class="py-5 bg-light"> 68 <section class="py-5 bg-light">
88 - <div class="container px-5 my-5"> 69 + <div class="container px-2 my-2">
89 <div class="text-center"> 70 <div class="text-center">
90 - <h2 class="fw-bolder">Our team</h2> 71 + <h2 class="fw-bolder">추천메뉴</h2>
91 - <p class="lead fw-normal text-muted mb-5">Dedicated to quality and your success</p> 72 + <p class="lead fw-normal text-muted mb-5">Recommend the menu you can eat at the rest stop</p>
92 </div> 73 </div>
93 <div class="row gx-5 row-cols-1 row-cols-sm-2 row-cols-xl-4 justify-content-center"> 74 <div class="row gx-5 row-cols-1 row-cols-sm-2 row-cols-xl-4 justify-content-center">
94 <div class="col mb-5 mb-5 mb-xl-0"> 75 <div class="col mb-5 mb-5 mb-xl-0">
95 <div class="text-center"> 76 <div class="text-center">
96 <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." /> 77 <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
97 - <h5 class="fw-bolder">Ibbie Eckart</h5> 78 + <h5 class="fw-bolder"><recommend1></recommend1></h5>
98 - <div class="fst-italic text-muted">Founder &amp; CEO</div> 79 + <div class="fst-italic text-muted"><rec1></rec1></div>
99 </div> 80 </div>
100 </div> 81 </div>
101 <div class="col mb-5 mb-5 mb-xl-0"> 82 <div class="col mb-5 mb-5 mb-xl-0">
102 <div class="text-center"> 83 <div class="text-center">
103 <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." /> 84 <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
104 - <h5 class="fw-bolder">Arden Vasek</h5> 85 + <h5 class="fw-bolder"><recommend2></recommend2></h5>
105 - <div class="fst-italic text-muted">CFO</div> 86 + <div class="fst-italic text-muted"><rec2></rec2></div>
106 </div> 87 </div>
107 </div> 88 </div>
108 <div class="col mb-5 mb-5 mb-sm-0"> 89 <div class="col mb-5 mb-5 mb-sm-0">
109 <div class="text-center"> 90 <div class="text-center">
110 <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." /> 91 <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
111 - <h5 class="fw-bolder">Toribio Nerthus</h5> 92 + <h5 class="fw-bolder"><recommend3></recommend3></h5>
112 - <div class="fst-italic text-muted">Operations Manager</div> 93 + <div class="fst-italic text-muted"><rec3></rec3></div>
113 </div> 94 </div>
114 </div> 95 </div>
115 - <div class="col mb-5">
116 - <div class="text-center">
117 - <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
118 - <h5 class="fw-bolder">Malvina Cilla</h5>
119 - <div class="fst-italic text-muted">CTO</div>
120 </div> 96 </div>
121 </div> 97 </div>
122 </div> 98 </div>
123 </div> 99 </div>
124 </section> 100 </section>
101 +
102 +
103 + <!--menu1-->
104 + <section class="py-3">
105 + <div class="container px-0.1 my-0.1">
106 + <div class="text-center">
107 + <h4 class="fw-bolder"> <menu1></menu1></h4>
108 + </div>
109 + </section>
110 +
111 + <section class="py-5 bg-light" id="scroll-target">
112 + <div class="container px-2 my-2">
113 + <div class="text-center">
114 + <h2 class="fw-bolder"><foodname1></foodname1></h2>
115 + <p class="lead fw-normal text-muted mb-0"><foodcost1></foodcost1></p>
116 + </div>
117 + </div>
118 + </section>
119 +
120 +
121 + <!--menu2-->
122 + <section class="py-3">
123 + <div class="container px-0.1 my-0.1">
124 + <div class="text-center">
125 + <h4 class="fw-bolder"> <menu2></menu2></h4>
126 + </div>
127 + </section>
128 +
129 + <section class="py-5 bg-light" id="scroll-target">
130 + <div class="container px-2 my-2">
131 + <div class="text-center">
132 + <h2 class="fw-bolder"><foodname2></foodname2></h2>
133 + <p class="lead fw-normal text-muted mb-0"><foodcost2></foodcost2></p>
134 + </div>
135 + </div>
136 + </section>
137 +
138 +
139 + <!--menu3-->
140 + <section class="py-3">
141 + <div class="container px-0.1 my-0.1">
142 + <div class="text-center">
143 + <h4 class="fw-bolder"> <menu3></menu3> </h4>
144 + </div>
145 + </section>
146 +
147 + <section class="py-5 bg-light" id="scroll-target">
148 + <div class="container px-2 my-2">
149 + <div class="text-center">
150 + <h2 class="fw-bolder"><foodname3></foodname3></h2>
151 + <p class="lead fw-normal text-muted mb-0"><foodcost3></foodcost3></p>
152 + </div>
153 + </div>
154 + </section>
155 +
156 +
157 + <!--menu4-->
158 + <section class="py-3">
159 + <div class="container px-0.1 my-0.1">
160 + <div class="text-center">
161 + <h4 class="fw-bolder"> <menu4></menu4></h4>
162 + </div>
163 + </section>
164 +
165 + <section class="py-5 bg-light" id="scroll-target">
166 + <div class="container px-2 my-2">
167 + <div class="text-center">
168 + <h2 class="fw-bolder"><foodname4></foodname4></h2>
169 + <p class="lead fw-normal text-muted mb-0"><foodcost4></foodcost4></p>
170 + </div>
171 + </div>
172 + </section>
173 +
174 +
175 + <!--menu5-->
176 + <section class="py-3">
177 + <div class="container px-0.1 my-0.1">
178 + <div class="text-center">
179 + <h4 class="fw-bolder"> <menu5></menu5> </h4>
180 + </div>
181 + </section>
182 +
183 + <section class="py-5 bg-light" id="scroll-target">
184 + <div class="container px-2 my-2">
185 + <div class="text-center">
186 + <h2 class="fw-bolder"><foodname5></foodname5></h2>
187 + <p class="lead fw-normal text-muted mb-0"><foodcost5></foodcost5></p>
188 + </div>
189 + </div>
190 + </section>
191 +
192 +
193 + <!--menu6-->
194 + <section class="py-3">
195 + <div class="container px-0.1 my-0.1">
196 + <div class="text-center">
197 + <h4 class="fw-bolder"> <menu6></menu6> </h4>
198 + </div>
199 + </section>
200 +
201 + <section class="py-5 bg-light" id="scroll-target">
202 + <div class="container px-2 my-2">
203 + <div class="text-center">
204 + <h2 class="fw-bolder"><foodname6></foodname6></h2>
205 + <p class="lead fw-normal text-muted mb-0"><foodcost6></foodcost6></p>
206 + </div>
207 + </div>
208 + </section>
209 +
210 + <!--menu7-->
211 + <section class="py-3">
212 + <div class="container px-0.1 my-0.1">
213 + <div class="text-center">
214 + <h4 class="fw-bolder"> <menu7></menu7> </h4>
215 + </div>
216 + </section>
217 +
218 + <section class="py-5 bg-light" id="scroll-target">
219 + <div class="container px-2 my-2">
220 + <div class="text-center">
221 + <h2 class="fw-bolder"><foodname7></foodname7></h2>
222 + <p class="lead fw-normal text-muted mb-0"><foodcost7></foodcost6></p>
223 + </div>
224 + </div>
225 + </section>
226 +
227 + <!--menu8-->
228 + <section class="py-3">
229 + <div class="container px-0.1 my-0.1">
230 + <div class="text-center">
231 + <h4 class="fw-bolder"> <menu8></menu8> </h4>
232 + </div>
233 + </section>
234 +
235 + <section class="py-5 bg-light" id="scroll-target">
236 + <div class="container px-2 my-2">
237 + <div class="text-center">
238 + <h2 class="fw-bolder"><foodname8></foodname8></h2>
239 + <p class="lead fw-normal text-muted mb-0"><foodcost8></foodcost8></p>
240 + </div>
241 + </div>
242 + </section>
243 +
125 </main> 244 </main>
126 <!-- Footer--> 245 <!-- Footer-->
127 <footer class="bg-dark py-4 mt-auto"> 246 <footer class="bg-dark py-4 mt-auto">
...@@ -138,6 +257,75 @@ ...@@ -138,6 +257,75 @@
138 </div> 257 </div>
139 </div> 258 </div>
140 </footer> 259 </footer>
260 +
261 + <!--fetch로 오픈 api 데이터 끌어오기-->
262 + <script>
263 +
264 + function Showmenu() {
265 + menuname = document.getElementById('menuname').value
266 +
267 + fetch('http://data.ex.co.kr/openapi/restinfo/restBestfoodList?key=6806352377&type=json&numOfRows=1000' + '&stdRestNm='+menuname).then(function(response){
268 + method: 'GET';
269 + body: JSON.stringify(this.obj)
270 + response.text().then(function(text){
271 +
272 + //데이터 정렬 및 text data-> array data 변환
273 + index1=text.indexOf('[')
274 + index2=text.indexOf(']')
275 + ndata=text.substr(index1+1, index2-index1+1)
276 + nndata=ndata.split('},');
277 +
278 + for(let i=0; i<8; i++){
279 + index3=nndata[i].indexOf('"foodNm":"')
280 + index4=nndata[i].indexOf('"foodCost":"')
281 + index5=nndata[i].indexOf('"etc"')
282 + foodname=nndata[i].substr(index3+10, index4-index3-12)
283 + foodcost=nndata[i].substr(index4+12, index5-index4-14)
284 + console.log(foodname,foodcost)
285 +
286 + //foodname
287 + document.querySelector('foodname'+String(i+1)).innerHTML = foodname;
288 + //foodcost
289 + document.querySelector('foodcost'+String(i+1)).innerHTML = foodcost+"원";
290 +
291 + }
292 +
293 + //recommend menu
294 + index3=nndata[1].indexOf('"foodNm":"')
295 + index4=nndata[1].indexOf('"foodCost":"')
296 + index5=nndata[1].indexOf('"etc"')
297 + foodname1=nndata[1].substr(index3+10, index4-index3-12)
298 + foodcost1=nndata[1].substr(index4+12, index5-index4-14)
299 + document.querySelector('recommend1').innerHTML = foodname1;
300 + document.querySelector('rec1').innerHTML = foodcost1+"원";
301 +
302 + index3=nndata[4].indexOf('"foodNm":"')
303 + index4=nndata[4].indexOf('"foodCost":"')
304 + index5=nndata[4].indexOf('"etc"')
305 + foodname1=nndata[4].substr(index3+10, index4-index3-12)
306 + foodcost1=nndata[4].substr(index4+12, index5-index4-14)
307 + document.querySelector('recommend2').innerHTML = foodname1;
308 + document.querySelector('rec2').innerHTML = foodcost1+"원";
309 +
310 + index3=nndata[5].indexOf('"foodNm":"')
311 + index4=nndata[5].indexOf('"foodCost":"')
312 + index5=nndata[5].indexOf('"etc"')
313 + foodname1=nndata[5].substr(index3+10, index4-index3-12)
314 + foodcost1=nndata[5].substr(index4+12, index5-index4-14)
315 + document.querySelector('recommend3').innerHTML = foodname1;
316 + document.querySelector('rec3').innerHTML = foodcost1+"원";
317 +
318 + for(let i=1; i<9; i++)
319 + document.querySelector('menu'+String(i)).innerHTML = "< "+"menu"+String(i)+" >";
320 +
321 + }
322 +
323 +
324 + )
325 + })
326 + }
327 + </script>
328 +
141 <!-- Bootstrap core JS--> 329 <!-- Bootstrap core JS-->
142 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> 330 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
143 <!-- Core theme JS--> 331 <!-- Core theme JS-->
......