Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
Joung Jiwon
07fb527f 2 parents 4c7fe1b4 b3eb4cfa

Merge branch 'cal' into 'master' 

Cal



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