한서흔 / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
SH
1628522e 1 parent 762c38a8

id 수정

Inline Side-by-side
Showing 1 changed file with 222 additions and 218 deletions
...@@ -12,22 +12,24 @@ ...@@ -12,22 +12,24 @@
12 <link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 12 <link rel="stylesheet" href="magnific-popup/magnific-popup.css">
13 <link rel="stylesheet" href="css/bootstrap.min.css" /> 13 <link rel="stylesheet" href="css/bootstrap.min.css" />
14 <link rel="stylesheet" href="css/templatemo-style.css" /> 14 <link rel="stylesheet" href="css/templatemo-style.css" />
15 - <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css"> 15 + <link rel="stylesheet" type="text/css"
16 - 16 + href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
17 +
17 <script src="../../docs/js/jquery-1.9.1.js"></script> 18 <script src="../../docs/js/jquery-1.9.1.js"></script>
18 - <script type="text/javascript" src="../../docs/js/examples-base.js"></script> 19 + <script type="text/javascript" src="../../docs/js/examples-base.js"></script>
19 - <script type="text/javascript" src="../../docs/js/highlight.min.js"></script> 20 + <script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
20 - <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script> 21 + <script type="text/javascript"
21 - <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" /> 22 + src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
23 + <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
22 24
23 <!-- 25 <!--
24 The Town 26 The Town
25 https://templatemo.com/tm-525-the-town 27 https://templatemo.com/tm-525-the-town
26 --> 28 -->
27 - 29 +
28 - 30 +
29 - 31 +
30 - <script type= "text/css"> 32 + <script type="text/css">
31 window.onload = function(){ 33 window.onload = function(){
32 document.getElementById('btn').onclick = function(){ 34 document.getElementById('btn').onclick = function(){
33 document.getElementById('frm').submit(); 35 document.getElementById('frm').submit();
...@@ -36,7 +38,7 @@ ...@@ -36,7 +38,7 @@
36 }; 38 };
37 39
38 </script> 40 </script>
39 - 41 +
40 </head> 42 </head>
41 43
42 <body> 44 <body>
...@@ -75,76 +77,78 @@ ...@@ -75,76 +77,78 @@
75 77
76 78
77 <!-- Contact --> 79 <!-- Contact -->
78 - <section id="contact" class="tm-section-pad-top tm-parallax-2"> 80 + <section id="contact" class="tm-section-pad-top tm-parallax-2">
79 <div class="container tm-container-contact"> 81 <div class="container tm-container-contact">
80 <div class="grid-container"> 82 <div class="grid-container">
81 <div class="question-field question-home">어디에 사나요?</div> 83 <div class="question-field question-home">어디에 사나요?</div>
82 <div class="input-field input-home"> 84 <div class="input-field input-home">
83 <label for="question-input-field"></label> 85 <label for="question-input-field"></label>
84 - <input type ="text" id="start"></div> 86 + <input type="text" id="start"></div>
85 <div class="question-field question-school">무슨 학교에 다니나요?</div> 87 <div class="question-field question-school">무슨 학교에 다니나요?</div>
86 <div class="input-school"> 88 <div class="input-school">
87 <label for="question-input-field"></label> 89 <label for="question-input-field"></label>
88 - <input type ="text" id="end"> 90 + <input type="text" id="end">
89 </div> 91 </div>
90 <div class="question-field question-grade">몇학년인가요?</div> 92 <div class="question-field question-grade">몇학년인가요?</div>
91 - <div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px"> 93 + <div class="input-grade">
92 - <select> 94 + <div class="custom-select" style="width:208px; margin-right:40px">
93 - <option value="0">1학년 1학기</option> 95 + <select id="semester">
94 - <option value="sem-1-1">1학년 1학기</option> 96 + <option value="0">1학년 1학기</option>
95 - <option value="sem-1-2">1학년 2학기</option> 97 + <option value="sem-1-1">1학년 1학기</option>
96 - <option value="sem-2-1">2학년 1학기</option> 98 + <option value="sem-1-2">1학년 2학기</option>
97 - <option value="sem-2-2">2학년 2학기</option> 99 + <option value="sem-2-1">2학년 1학기</option>
98 - <option value="sem-3-1">3학년 1학기</option> 100 + <option value="sem-2-2">2학년 2학기</option>
99 - <option value="sem-3-2">3학년 2학기</option> 101 + <option value="sem-3-1">3학년 1학기</option>
100 - <option value="sem-4-1">4학년 1학기</option> 102 + <option value="sem-3-2">3학년 2학기</option>
101 - <option value="sem-4-2">4학년 2학기</option> 103 + <option value="sem-4-1">4학년 1학기</option>
102 - </select> 104 + <option value="sem-4-2">4학년 2학기</option>
103 - </div></div> 105 + </select>
104 - </div>
105 - <a href="#result" class="text-center tm-down-arrow-link">
106 - <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
107 - </a>
108 - </div>
109 - </section>
110 -
111 -
112 - <section id="result">
113 - <div id="map" style="width:700px;height:300px;"></div>
114 - <div class="answer-field">한번 갈 때마다 ...<br>
115 - <span class="answer-highlight">n</span> 시간
116 - <span class="answer-highlight">n</span> 분 <br>
117 - </div>
118 - <div class="row">
119 - <div id="list-answer">
120 - <div class="answer-field" id="answer-how-many-hours">
121 - 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
122 - 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
123 </div> 106 </div>
124 </div> 107 </div>
125 </div> 108 </div>
126 - <div class="row"> 109 + <a href="#result" class="text-center tm-down-arrow-link" onclick="semester();return false;">
127 - <div class="answer-detail-question"> 110 + <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
128 - 이 시간에 알바를 했다면? <br> 111 + </a>
129 - 교통비로 국밥 <br> 112 + </div>
130 - 이 거리라면 에베레스트 등반을 <br> 113 + </section>
131 - 지구를 114 +
132 - </div> 115 +
133 - <div class="answer-detail-answer"> 116 + <section id="result">
134 - <span id = "salary">?</span>원<br> 117 + <div id="map" style="width:700px;height:300px;"></div>
135 - <span id = "dish">?</span>그릇<br> 118 + <div class="answer-field">한번 갈 때마다 ...<br>
136 - <span id = "everest">?</span>번이나...<br> 119 + <span class="answer-highlight">n</span> 시간
137 - <span id = "earth">?</span>바퀴나 돌아요<br><br><br> 120 + <span class="answer-highlight">n</span> 분 <br>
121 + </div>
122 + <div class="row">
123 + <div id="list-answer">
124 + <div class="answer-field" id="answer-how-many-hours">
125 + 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
126 + 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
138 </div> 127 </div>
139 </div> 128 </div>
140 - <footer class="text-center small tm-footer"> 129 + </div>
141 - <p class="mb-0"> 130 + <div class="row">
142 - Copyright &copy; 2020 TongGilMut 131 + <div class="answer-detail-question">
132 + 이 시간에 알바를 했다면? <br>
133 + 교통비로 국밥 <br>
134 + 이 거리라면 에베레스트 등반을 <br>
135 + 지구를
136 + </div>
137 + <div class="answer-detail-answer">
138 + <span id="salary">?</span>원<br>
139 + <span id="dish">?</span>그릇<br>
140 + <span id="everest">?</span>번이나...<br>
141 + <span id="earth">?</span>바퀴나 돌아요<br><br><br>
142 + </div>
143 + </div>
144 + <footer class="text-center small tm-footer">
145 + <p class="mb-0">
146 + Copyright &copy; 2020 TongGilMut
143 147
144 - - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a> 148 + - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
145 - </p> 149 + </p>
146 - </footer> 150 + </footer>
147 - </section> 151 + </section>
148 152
149 153
150 154
...@@ -174,39 +178,39 @@ ...@@ -174,39 +178,39 @@
174 create a new DIV that will act as an option item:*/ 178 create a new DIV that will act as an option item:*/
175 c = document.createElement("DIV"); 179 c = document.createElement("DIV");
176 c.innerHTML = selElmnt.options[j].innerHTML; 180 c.innerHTML = selElmnt.options[j].innerHTML;
177 - c.addEventListener("click", function(e) { 181 + c.addEventListener("click", function (e) {
178 - /*when an item is clicked, update the original select box, 182 + /*when an item is clicked, update the original select box,
179 - and the selected item:*/ 183 + and the selected item:*/
180 - var y, i, k, s, h, sl, yl; 184 + var y, i, k, s, h, sl, yl;
181 - s = this.parentNode.parentNode.getElementsByTagName("select")[0]; 185 + s = this.parentNode.parentNode.getElementsByTagName("select")[0];
182 - sl = s.length; 186 + sl = s.length;
183 - h = this.parentNode.previousSibling; 187 + h = this.parentNode.previousSibling;
184 - for (i = 0; i < sl; i++) { 188 + for (i = 0; i < sl; i++) {
185 - if (s.options[i].innerHTML == this.innerHTML) { 189 + if (s.options[i].innerHTML == this.innerHTML) {
186 - s.selectedIndex = i; 190 + s.selectedIndex = i;
187 - h.innerHTML = this.innerHTML; 191 + h.innerHTML = this.innerHTML;
188 - y = this.parentNode.getElementsByClassName("same-as-selected"); 192 + y = this.parentNode.getElementsByClassName("same-as-selected");
189 - yl = y.length; 193 + yl = y.length;
190 - for (k = 0; k < yl; k++) { 194 + for (k = 0; k < yl; k++) {
191 - y[k].removeAttribute("class"); 195 + y[k].removeAttribute("class");
192 - }
193 - this.setAttribute("class", "same-as-selected");
194 - break;
195 } 196 }
197 + this.setAttribute("class", "same-as-selected");
198 + break;
196 } 199 }
197 - h.click(); 200 + }
201 + h.click();
198 }); 202 });
199 b.appendChild(c); 203 b.appendChild(c);
200 } 204 }
201 x[i].appendChild(b); 205 x[i].appendChild(b);
202 - a.addEventListener("click", function(e) { 206 + a.addEventListener("click", function (e) {
203 - /*when the select box is clicked, close any other select boxes, 207 + /*when the select box is clicked, close any other select boxes,
204 - and open/close the current select box:*/ 208 + and open/close the current select box:*/
205 - e.stopPropagation(); 209 + e.stopPropagation();
206 - closeAllSelect(this); 210 + closeAllSelect(this);
207 - this.nextSibling.classList.toggle("select-hide"); 211 + this.nextSibling.classList.toggle("select-hide");
208 - this.classList.toggle("select-arrow-active"); 212 + this.classList.toggle("select-arrow-active");
209 - }); 213 + });
210 } 214 }
211 function closeAllSelect(elmnt) { 215 function closeAllSelect(elmnt) {
212 /*a function that will close all select boxes in the document, 216 /*a function that will close all select boxes in the document,
...@@ -235,141 +239,141 @@ ...@@ -235,141 +239,141 @@
235 </script> 239 </script>
236 <script> //API 240 <script> //API
237 var btn = document.querySelector('button'); 241 var btn = document.querySelector('button');
238 - 242 +
239 btn.addEventListener('click', updateBtn); 243 btn.addEventListener('click', updateBtn);
240 - 244 +
241 function updateBtn() { 245 function updateBtn() {
242 var start = document.getElementById('start').value; 246 var start = document.getElementById('start').value;
243 var end = document.getElementById('end').value; 247 var end = document.getElementById('end').value;
244 naver.maps.Service.geocode({ 248 naver.maps.Service.geocode({
245 - address: start 249 + address: start
246 - 250 +
247 - }, function(status, response) { 251 + }, function (status, response) {
248 - if (status !== naver.maps.Service.Status.OK) { 252 + if (status !== naver.maps.Service.Status.OK) {
249 - return alert('Something wrong!'); 253 + return alert('Something wrong!');
250 - } 254 + }
251 var result = response.result, // 검색 결과의 컨테이너 255 var result = response.result, // 검색 결과의 컨테이너
252 - items = result.items; 256 + items = result.items;
253 var sx = result.items[0].point.x; 257 var sx = result.items[0].point.x;
254 var sy = result.items[0].point.y; 258 var sy = result.items[0].point.y;
255 - 259 +
256 - naver.maps.Service.geocode({ 260 + naver.maps.Service.geocode({
257 - address: end 261 + address: end
258 - 262 +
259 - }, function(status, response) { 263 + }, function (status, response) {
260 - if (status !== naver.maps.Service.Status.OK) { 264 + if (status !== naver.maps.Service.Status.OK) {
261 - return alert('Something wrong!'); 265 + return alert('Something wrong!');
262 - }
263 - var result = response.result, // 검색 결과의 컨테이너
264 - items = result.items;
265 - var ex = result.items[0].point.x;
266 - var ey = result.items[0].point.y;
267 -
268 -
269 - /*var sx = 127.0739547;
270 - var sy = 37.2407701;
271 - var ex = 126.921666;
272 - var ey = 37.1308333;
273 - */
274 -
275 -
276 - var mapOptions = {
277 - center: new naver.maps.LatLng(start,end),
278 - zoom: 10
279 - };
280 -
281 - var map = new naver.maps.Map('map', mapOptions);
282 -
283 -
284 -
285 - function searchPubTransPathAJAX() {
286 - var xhr = new XMLHttpRequest();
287 - //ODsay apiKey 입력
288 - var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX="+sx+"&SY="+sy+"&EX="+ex+"&EY="+ey+"&apiKey=nnsDQB1AWhpETO3HmMdDAw";
289 - xhr.open("GET", url, true);
290 - xhr.send();
291 - xhr.onreadystatechange = function() {
292 - if (xhr.readyState == 4 && xhr.status == 200) {
293 - console.log( JSON.parse(xhr.responseText) ); // <- xhr.responseText 로 결과를 가져올 수 있음
294 - //노선그래픽 데이터 호출
295 - callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
296 } 266 }
297 - } 267 + var result = response.result, // 검색 결과의 컨테이너
298 - } 268 + items = result.items;
299 - 269 + var ex = result.items[0].point.x;
300 - //길찾기 API 호출 270 + var ey = result.items[0].point.y;
301 - searchPubTransPathAJAX(); 271 +
302 - 272 +
303 - function callMapObjApiAJAX(mabObj){ 273 + /*var sx = 127.0739547;
304 - var xhr = new XMLHttpRequest(); 274 + var sy = 37.2407701;
305 - //ODsay apiKey 입력 275 + var ex = 126.921666;
306 - var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@"+mabObj+"&apiKey=nnsDQB1AWhpETO3HmMdDAw"; 276 + var ey = 37.1308333;
307 - xhr.open("GET", url, true); 277 + */
308 - xhr.send(); 278 +
309 - xhr.onreadystatechange = function() { 279 +
310 - if (xhr.readyState == 4 && xhr.status == 200) { 280 + var mapOptions = {
311 - var resultJsonData = JSON.parse(xhr.responseText); 281 + center: new naver.maps.LatLng(start, end),
312 - drawNaverMarker(sx,sy); // 출발지 마커 표시 282 + zoom: 10
313 - drawNaverMarker(ex,ey); // 도착지 마커 표시 283 + };
314 - drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시 284 +
315 - // boundary 데이터가 있을경우, 해당 boundary로 지도이동 285 + var map = new naver.maps.Map('map', mapOptions);
316 - if(resultJsonData.result.boundary){ 286 +
317 - var boundary = new naver.maps.LatLngBounds( 287 +
318 - new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left), 288 +
319 - new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right) 289 + function searchPubTransPathAJAX() {
320 - ); 290 + var xhr = new XMLHttpRequest();
321 - map.panToBounds(boundary); 291 + //ODsay apiKey 입력
292 + var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX=" + sx + "&SY=" + sy + "&EX=" + ex + "&EY=" + ey + "&apiKey=nnsDQB1AWhpETO3HmMdDAw";
293 + xhr.open("GET", url, true);
294 + xhr.send();
295 + xhr.onreadystatechange = function () {
296 + if (xhr.readyState == 4 && xhr.status == 200) {
297 + console.log(JSON.parse(xhr.responseText)); // <- xhr.responseText 로 결과를 가져올 수 있음
298 + //노선그래픽 데이터 호출
299 + callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
300 + }
322 } 301 }
323 } 302 }
324 - } 303 +
325 - } 304 + //길찾기 API 호출
326 - 305 + searchPubTransPathAJAX();
327 - // 지도위 마커 표시해주는 함수 306 +
328 - function drawNaverMarker(x,y){ 307 + function callMapObjApiAJAX(mabObj) {
329 - var marker = new naver.maps.Marker({ 308 + var xhr = new XMLHttpRequest();
330 - position: new naver.maps.LatLng(y, x), 309 + //ODsay apiKey 입력
331 - map: map 310 + var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@" + mabObj + "&apiKey=nnsDQB1AWhpETO3HmMdDAw";
332 - }); 311 + xhr.open("GET", url, true);
333 - } 312 + xhr.send();
334 - 313 + xhr.onreadystatechange = function () {
335 - // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수 314 + if (xhr.readyState == 4 && xhr.status == 200) {
336 - function drawNaverPolyLine(data){ 315 + var resultJsonData = JSON.parse(xhr.responseText);
337 - var lineArray; 316 + drawNaverMarker(sx, sy); // 출발지 마커 표시
338 - 317 + drawNaverMarker(ex, ey); // 도착지 마커 표시
339 - for(var i = 0 ; i < data.result.lane.length; i++){ 318 + drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
340 - for(var j=0 ; j <data.result.lane[i].section.length; j++){ 319 + // boundary 데이터가 있을경우, 해당 boundary로 지도이동
341 - lineArray = null; 320 + if (resultJsonData.result.boundary) {
342 - lineArray = new Array(); 321 + var boundary = new naver.maps.LatLngBounds(
343 - for(var k=0 ; k < data.result.lane[i].section[j].graphPos.length; k++){ 322 + new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
344 - lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x)); 323 + new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
324 + );
325 + map.panToBounds(boundary);
326 + }
327 + }
345 } 328 }
346 - 329 + }
347 - //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음) 330 +
348 - if(data.result.lane[i].type == 1){ 331 + // 지도위 마커 표시해주는 함수
349 - var polyline = new naver.maps.Polyline({ 332 + function drawNaverMarker(x, y) {
350 - map: map, 333 + var marker = new naver.maps.Marker({
351 - path: lineArray, 334 + position: new naver.maps.LatLng(y, x),
352 - strokeWeight: 3, 335 + map: map
353 - strokeColor: '#003499' 336 + });
354 - }); 337 + }
355 - }else if(data.result.lane[i].type == 2){ 338 +
356 - var polyline = new naver.maps.Polyline({ 339 + // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
357 - map: map, 340 + function drawNaverPolyLine(data) {
358 - path: lineArray, 341 + var lineArray;
359 - strokeWeight: 3, 342 +
360 - strokeColor: '#37b42d' 343 + for (var i = 0; i < data.result.lane.length; i++) {
361 - }); 344 + for (var j = 0; j < data.result.lane[i].section.length; j++) {
362 - }else{ 345 + lineArray = null;
363 - var polyline = new naver.maps.Polyline({ 346 + lineArray = new Array();
364 - map: map, 347 + for (var k = 0; k < data.result.lane[i].section[j].graphPos.length; k++) {
365 - path: lineArray, 348 + lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
366 - strokeWeight: 3 349 + }
367 - }); 350 +
351 + //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
352 + if (data.result.lane[i].type == 1) {
353 + var polyline = new naver.maps.Polyline({
354 + map: map,
355 + path: lineArray,
356 + strokeWeight: 3,
357 + strokeColor: '#003499'
358 + });
359 + } else if (data.result.lane[i].type == 2) {
360 + var polyline = new naver.maps.Polyline({
361 + map: map,
362 + path: lineArray,
363 + strokeWeight: 3,
364 + strokeColor: '#37b42d'
365 + });
366 + } else {
367 + var polyline = new naver.maps.Polyline({
368 + map: map,
369 + path: lineArray,
370 + strokeWeight: 3
371 + });
372 + }
373 + }
368 } 374 }
369 } 375 }
370 - } 376 + });
371 - }
372 - });
373 }); 377 });
374 } 378 }
375 </script> 379 </script>
...@@ -387,13 +391,13 @@ ...@@ -387,13 +391,13 @@
387 // 임시값 지정 391 // 임시값 지정
388 var time = 2 392 var time = 2
389 var distance = 30000 393 var distance = 30000
390 - var costs = 100000 394 + var pay = 100000
391 395
392 function sum(sem) { 396 function sum(sem) {
393 since = sem * time * 150 397 since = sem * time * 150
394 until = (8 - sem) * time * 150 398 until = (8 - sem) * time * 150
395 salary = since * 8590 399 salary = since * 8590
396 - dish = Math.floor((costs * 150) / 6000) 400 + dish = Math.floor((pay * 150) / 6000)
397 everest = Math.floor((distance * 2) / 8846) 401 everest = Math.floor((distance * 2) / 8846)
398 earth = ((distance * 2) / 40075000).toFixed(3) 402 earth = ((distance * 2) / 40075000).toFixed(3)
399 } 403 }
...@@ -574,10 +578,10 @@ ...@@ -574,10 +578,10 @@
574 slidesToScroll: 1 578 slidesToScroll: 1
575 } 579 }
576 }] 580 }]
577 - }); 581 + });
578 }); 582 });
579 </script> 583 </script>
580 - 584 +
581 </body> 585 </body>
582 586
583 -</html> 587 +</html>
...\ No newline at end of file ...\ No newline at end of file
......