오지민 / 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 73 additions and 50 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 - <head> 3 +
4 - <meta charset="UTR-8" /> 4 +<head>
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 + <meta charset="UTR-8" />
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 + <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7 - <title>HomePurchaseAgePrediction</title> 7 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 - <link rel="stylesheet" href="css/style2.css" /> 8 + <title>HomePurchaseAgePrediction</title>
9 - <link rel="preconnect" href="https://fonts.gstatic.com" /> 9 + <link rel="stylesheet" href="css/style2.css" />
10 - <link 10 + <link rel="preconnect" href="https://fonts.gstatic.com" />
11 - href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap" 11 + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap"
12 - rel="stylesheet" 12 + rel="stylesheet" />
13 - /> 13 +</head>
14 - </head> 14 +
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>
19 - <main> 19 + <main>
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> 25 + </ul>
26 - <li></i>아파트 목록을 가져옵니다.</li> 26 + </div>
27 - <li></i>아파트 목록을 가져옵니다.</li> 27 + </main>
28 - <li></i>아파트 목록을 가져옵니다.</li> 28 + <script type="text/javascript"
29 - <li></i>아파트 목록을 가져옵니다.</li> 29 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"></script>
30 - </ul> 30 + <script type="text/javascript" src="../js/next_page.js"></script>
31 - </div> 31 +</body>
32 - </main> 32 +
33 - <script 33 +</html>
34 - type="text/javascript"
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>
38 - </body>
39 -</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 - name = name.replace(/[\[\]]/g, "\\$&"); 38 +
39 - var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 39 +function getParameterByName(name, url = window.location.href) {
40 - results = regex.exec(url); 40 + name = name.replace(/[\[\]]/g, "\\$&");
41 - if (!results) return null; 41 + var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
42 - if (!results[2]) return ""; 42 + results = regex.exec(url);
43 - return decodeURIComponent(results[2].replace(/\+/g, " ")); 43 + if (!results) return null;
44 + if (!results[2]) return "";
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");
45 65
46 - //다음 페이지에서 입력값 받아오기 66 +//20년을 초과한 결과값이 나올 때 20 + α 로 표시합니다.
47 - var salary = getParameterByName("salary"); 67 +if (year > 20) {
48 - var expenditure = getParameterByName("expenditure"); 68 + year = "20 + α ";
49 - var year = "3"; //값 받아오기 전 기본값으로 설정
50 - var div = document.getElementById("info");
51 - div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`;
52 } 69 }
70 +div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`;
71 +
72 +//주소 받아오기
73 +var dataFromServer = ["xx동 xx", "xx", "00동 00"]; //임시로 넣어뒀습니다.
74 +
75 +//next page li 요소 추가
76 +for (var i = 0; i < dataFromServer.length; i++) {
77 + const li = document.createElement("li");
78 + const textNode = document.createTextNode(dataFromServer[i]);
79 + li.appendChild(textNode);
80 + document.getElementById("house_list").appendChild(li);
81 +}
...\ No newline at end of file ...\ No newline at end of file
......