오지민 / HomePurchaseAgePrediction

Go to a project
Toggle navigation Toggle navigation pinning
Ojimin
f8b12c46 2 parents c34e7ea3 457bb1c2

Merge branch 'web' of http://khuhub.khu.ac.kr/2020105635/HomePurchaseAgePrediction into web

Inline Side-by-side
Showing 2 changed files with 47 additions and 26 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 - <head> 3 +
4 +<head>
4 <meta charset="UTR-8" /> 5 <meta charset="UTR-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>HomePurchaseAgePrediction</title> 8 <title>HomePurchaseAgePrediction</title>
8 <link rel="stylesheet" href="css/style2.css" /> 9 <link rel="stylesheet" href="css/style2.css" />
9 <link rel="preconnect" href="https://fonts.gstatic.com" /> 10 <link rel="preconnect" href="https://fonts.gstatic.com" />
10 - <link 11 + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap"
11 - href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap" 12 + rel="stylesheet" />
12 - rel="stylesheet" 13 +</head>
13 - /> 14 +
14 - </head> 15 +<body>
15 - <body>
16 <nav> 16 <nav>
17 <h1 onClick="location.href='/'">Home Purchase Age Prediction</h1> 17 <h1 onClick="location.href='/'">Home Purchase Age Prediction</h1>
18 </nav> 18 </nav>
...@@ -20,20 +20,14 @@ ...@@ -20,20 +20,14 @@
20 <div id="info"></div> 20 <div id="info"></div>
21 <div id="home_info"> 21 <div id="home_info">
22 <div id="map"></div> 22 <div id="map"></div>
23 - <ul> 23 + <ul id="house_list">
24 <div>LIST</div> 24 <div>LIST</div>
25 - <li></i>아파트 목록을 가져옵니다.</li>
26 - <li></i>아파트 목록을 가져옵니다.</li>
27 - <li></i>아파트 목록을 가져옵니다.</li>
28 - <li></i>아파트 목록을 가져옵니다.</li>
29 - <li></i>아파트 목록을 가져옵니다.</li>
30 </ul> 25 </ul>
31 </div> 26 </div>
32 </main> 27 </main>
33 - <script 28 + <script type="text/javascript"
34 - type="text/javascript" 29 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"></script>
35 - src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"
36 - ></script>
37 <script type="text/javascript" src="../js/next_page.js"></script> 30 <script type="text/javascript" src="../js/next_page.js"></script>
38 - </body> 31 +</body>
32 +
39 </html> 33 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -81,21 +81,48 @@ function displayMarker(Position) { ...@@ -81,21 +81,48 @@ function displayMarker(Position) {
81 }); 81 });
82 82
83 map.setCenter(Position); 83 map.setCenter(Position);
84 - function getParameterByName(name, url = window.location.href) { 84 +}
85 +
86 +function getParameterByName(name, url = window.location.href) {
85 name = name.replace(/[\[\]]/g, "\\$&"); 87 name = name.replace(/[\[\]]/g, "\\$&");
86 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 88 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
87 results = regex.exec(url); 89 results = regex.exec(url);
88 if (!results) return null; 90 if (!results) return null;
89 if (!results[2]) return ""; 91 if (!results[2]) return "";
90 return decodeURIComponent(results[2].replace(/\+/g, " ")); 92 return decodeURIComponent(results[2].replace(/\+/g, " "));
93 +}
94 +
95 +//가격리스트로 year계산
96 +var priceList = [2000, 3000, 4000, 5000]; //임시로 넣어뒀습니다.
97 +function yearCalc() {
98 + var sum = 0;
99 + for (var i = 0; i < priceList.length; i++) {
100 + sum = sum + priceList[i];
91 } 101 }
102 + var meanPrice = sum / priceList.length;
103 + var saveInyear = (Number(salary) - Number(expenditure)) * 12;
104 + return Math.ceil(meanPrice / saveInyear);
105 +}
106 +
107 +//다음 페이지에서 입력값 받아오기
108 +var salary = getParameterByName("salary");
109 +var expenditure = getParameterByName("expenditure");
110 +var year = yearCalc();
111 +var div = document.getElementById("info");
112 +
113 +//20년을 초과한 결과값이 나올 때 20 + α 로 표시합니다.
114 +if (year > 20) {
115 + year = "20 + α ";
116 +}
117 +div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`;
92 118
93 - //다음 페이지에서 입력값 받아오기 119 +//주소 받아오기
94 - var salary = getParameterByName("salary"); 120 +var dataFromServer = ["xx동 xx", "xx", "00동 00"]; //임시로 넣어뒀습니다.
95 - var expenditure = getParameterByName("expenditure");
96 - var year = "3"; //값 받아오기 전 기본값으로 설정
97 - var div = document.getElementById("info");
98 - div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`;
99 121
100 - connection.end(); 122 +//next page li 요소 추가
123 +for (var i = 0; i < dataFromServer.length; i++) {
124 + const li = document.createElement("li");
125 + const textNode = document.createTextNode(dataFromServer[i]);
126 + li.appendChild(textNode);
127 + document.getElementById("house_list").appendChild(li);
101 } 128 }
...\ No newline at end of file ...\ No newline at end of file
......