오지민 / HomePurchaseAgePrediction

Go to a project
Toggle navigation Toggle navigation pinning
서연진
a6db0a6c 1 parent c182e714

Add year calc

Inline Side-by-side
Showing 2 changed files with 48 additions and 25 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
......
...@@ -34,19 +34,48 @@ function displayMarker(Position) { ...@@ -34,19 +34,48 @@ function displayMarker(Position) {
34 }); 34 });
35 35
36 map.setCenter(Position); 36 map.setCenter(Position);
37 - function getParameterByName(name, url = window.location.href) { 37 +}
38 +
39 +function getParameterByName(name, url = window.location.href) {
38 name = name.replace(/[\[\]]/g, "\\$&"); 40 name = name.replace(/[\[\]]/g, "\\$&");
39 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 41 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
40 results = regex.exec(url); 42 results = regex.exec(url);
41 if (!results) return null; 43 if (!results) return null;
42 if (!results[2]) return ""; 44 if (!results[2]) return "";
43 return decodeURIComponent(results[2].replace(/\+/g, " ")); 45 return decodeURIComponent(results[2].replace(/\+/g, " "));
46 +}
47 +
48 +//가격리스트로 year계산
49 +var priceList = [2000, 3000, 4000, 5000]; //임시로 넣어뒀습니다.
50 +function yearCalc() {
51 + var sum = 0;
52 + for (var i = 0; i < priceList.length; i++) {
53 + sum = sum + priceList[i];
44 } 54 }
55 + var meanPrice = sum / priceList.length;
56 + var saveInyear = (Number(salary) - Number(expenditure)) * 12;
57 + return Math.ceil(meanPrice / saveInyear);
58 +}
59 +
60 +//다음 페이지에서 입력값 받아오기
61 +var salary = getParameterByName("salary");
62 +var expenditure = getParameterByName("expenditure");
63 +var year = yearCalc();
64 +var div = document.getElementById("info");
65 +
66 +//20년을 초과한 결과값이 나올 때 20 + α 로 표시합니다.
67 +if (year > 20) {
68 + year = "20 + α ";
69 +}
70 +div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`;
71 +
72 +//주소 받아오기
73 +var dataFromServer = ["xx동 xx", "xx", "00동 00"]; //임시로 넣어뒀습니다.
45 74
46 - //다음 페이지에서 입력값 받아오기 75 +//next page li 요소 추가
47 - var salary = getParameterByName("salary"); 76 +for (var i = 0; i < dataFromServer.length; i++) {
48 - var expenditure = getParameterByName("expenditure"); 77 + const li = document.createElement("li");
49 - var year = "3"; //값 받아오기 전 기본값으로 설정 78 + const textNode = document.createTextNode(dataFromServer[i]);
50 - var div = document.getElementById("info"); 79 + li.appendChild(textNode);
51 - div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`; 80 + document.getElementById("house_list").appendChild(li);
52 } 81 }
...\ No newline at end of file ...\ No newline at end of file
......