오지민 / HomePurchaseAgePrediction

Go to a project
Toggle navigation Toggle navigation pinning
서연진
bfb86da1 1 parent b23df468

next page 디자인, 입력값 타입 확인

Inline Side-by-side
Showing 6 changed files with 171 additions and 26 deletions
...@@ -2,9 +2,34 @@ ...@@ -2,9 +2,34 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTR-8" /> 4 <meta charset="UTR-8" />
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 + <title>HomePurchaseAgePrediction</title>
8 + <link rel="stylesheet" href="css/style2.css" />
9 + <link rel="preconnect" href="https://fonts.gstatic.com" />
10 + <link
11 + href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap"
12 + rel="stylesheet"
13 + />
5 </head> 14 </head>
6 <body> 15 <body>
7 - <div id="map"></div> 16 + <nav>
17 + <h1 onClick="location.href='/'">Home Purchase Age Prediction</h1>
18 + </nav>
19 + <main>
20 + <div id="info"></div>
21 + <div id="home_info">
22 + <div id="map"></div>
23 + <ul>
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>
31 + </div>
32 + </main>
8 <script 33 <script
9 type="text/javascript" 34 type="text/javascript"
10 src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing" 35 src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"
......
...@@ -8,21 +8,20 @@ ...@@ -8,21 +8,20 @@
8 <link rel="stylesheet" href="css/style.css" /> 8 <link rel="stylesheet" href="css/style.css" />
9 <link rel="preconnect" href="https://fonts.gstatic.com" /> 9 <link rel="preconnect" href="https://fonts.gstatic.com" />
10 <link 10 <link
11 - href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;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 /> 13 />
14 </head> 14 </head>
15 -
16 <body> 15 <body>
17 <main> 16 <main>
18 - <h1>Home Purchase Age Prediction</h1> 17 + <h1 onClick="location.href='/'"">Home Purchase Age Prediction</h1>
19 <h4> 18 <h4>
20 사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의 19 사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의
21 집을 찾아드립니다) 20 집을 찾아드립니다)
22 </h4> 21 </h4>
23 - <form action="/geolocation" method="GET"> 22 + <form action="/geolocation" method="GET" onsubmit="return jbSubmit()">
24 <div> 23 <div>
25 - 연봉(단위:만 원) 24 + 월소득(단위:만 원)
26 <input 25 <input
27 type="text" 26 type="text"
28 id="salary" 27 id="salary"
...@@ -40,9 +39,10 @@ ...@@ -40,9 +39,10 @@
40 /> 39 />
41 </div> 40 </div>
42 <div> 41 <div>
43 - <input class="btn" type="submit" value="SUBMIT" /> 42 + <input class="btn" type="submit" value="SUBMIT" />
44 </div> 43 </div>
45 </form> 44 </form>
46 </main> 45 </main>
46 + <script type="text/javascript" src="../js/home_page.js"></script>
47 </body> 47 </body>
48 </html> 48 </html>
......
1 :root { 1 :root {
2 --main-bg-color: #6e87cf; 2 --main-bg-color: #6e87cf;
3 - --point-color: #44090d; 3 + --point-color: #2e29af;
4 } 4 }
5 5
6 h1 { 6 h1 {
7 - color: #e9dacc; 7 + color: #f3d8be;
8 - font-size: 4.5em; 8 + font-size: 4em;
9 font-weight: 900; 9 font-weight: 900;
10 - /* text-shadow: 2px 2px #191766;*/ 10 + margin-top: 0px;
11 - text-shadow: #44090d 1px 1px, #44090d 0px 0px, #44090d 1px 1px, 11 + text-shadow: #2e29af 1px 1px, #2e29af 0px 0px, #2e29af 1px 1px,
12 - #44090d 2px 2px, #44090d 3px 3px, #44090d 4px 4px, #44090d 5px 5px, 12 + #2e29af 2px 2px, #2e29af 3px 3px, #2e29af 4px 4px, #2e29af 5px 5px,
13 - #44090d 6px 6px, #44090d 7px 7px, #44090d 8px 8px, #44090d 9px 9px, 13 + #2e29af 6px 6px, #2e29af 7px 7px, #2e29af 8px 8px, #2e29af 9px 9px,
14 - #44090d 10px 10px, #44090d 11px 11px, #44090d 12px 12px, #44090d 13px 13px, 14 + #2e29af 10px 10px, #2e29af 11px 11px, #2e29af 12px 12px, #2e29af 13px 13px,
15 - #44090d 14px 14px, #44090d 15px 15px, #44090d 16px 16px, #44090d 17px 17px, 15 + #2e29af 14px 14px, #2e29af 15px 15px, #2e29af 16px 16px, #2e29af 17px 17px,
16 - #44090d 18px 18px, #44090d 19px 19px; 16 + #2e29af 18px 18px, #2e29af 19px 19px;
17 +}
18 +
19 +h1:hover {
20 + cursor: pointer;
17 } 21 }
18 22
19 h4 { 23 h4 {
20 - font-weight: 300; 24 + font-weight: 500;
21 } 25 }
22 26
23 * { 27 * {
24 font-family: "Noto Sans KR", sans-serif; 28 font-family: "Noto Sans KR", sans-serif;
25 } 29 }
26 30
31 +html {
32 + padding: 0;
33 + margin: 0;
34 +}
35 +
27 body { 36 body {
28 background-color: var(--main-bg-color); 37 background-color: var(--main-bg-color);
29 background: no-repeat fixed 50% 50% url("../src/background.jpg"); 38 background: no-repeat fixed 50% 50% url("../src/background.jpg");
30 color: var(--point-color); 39 color: var(--point-color);
40 + padding: 0;
41 + margin: 0;
42 + width: 100%;
43 + height: 100%;
31 } 44 }
32 45
33 main { 46 main {
...@@ -38,9 +51,9 @@ main { ...@@ -38,9 +51,9 @@ main {
38 position: absolute; 51 position: absolute;
39 top: 10%; 52 top: 10%;
40 left: 10%; 53 left: 10%;
41 - /* background-color: rgb(250, 250, 250, 0.5); 54 + background-color: rgb(250, 250, 250, 0.7);
42 border-radius: 0.8rem; 55 border-radius: 0.8rem;
43 - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */ 56 + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
44 width: 80%; 57 width: 80%;
45 height: 80%; 58 height: 80%;
46 color: var(--point-color); 59 color: var(--point-color);
...@@ -49,7 +62,7 @@ main { ...@@ -49,7 +62,7 @@ main {
49 main > form { 62 main > form {
50 display: flex; 63 display: flex;
51 align-items: flex-end; 64 align-items: flex-end;
52 - font-weight: 500; 65 + font-weight: 700;
53 } 66 }
54 67
55 main > form > div { 68 main > form > div {
......
1 +:root {
2 + --main-bg-color: #6e87cf;
3 + --point-color: #2e29af;
4 +}
5 +
6 +* {
7 + font-family: "Noto Sans KR", sans-serif;
8 +}
9 +
10 +body {
11 + margin: 0;
12 + padding: 0;
13 + background: no-repeat fixed 50% 50% url("../src/background.jpg");
14 +}
15 +
16 +h1 {
17 + color: #f3d8be;
18 + font-size: 40px;
19 + font-weight: 900;
20 + padding: 5px 0 20px 0;
21 + margin: 0;
22 + text-shadow: #2e29af 1px 1px, #2e29af 0px 0px, #2e29af 1px 1px,
23 + #2e29af 2px 2px, #2e29af 3px 3px, #2e29af 4px 4px, #2e29af 5px 5px,
24 + #2e29af 6px 6px, #2e29af 7px 7px;
25 +}
26 +
27 +h1:hover {
28 + cursor: pointer;
29 +}
30 +
31 +nav {
32 + padding: 5px 10px;
33 + /* background-color: rgba(255, 255, 255, 0.9); */
34 +}
35 +
36 +main {
37 + display: flex;
38 + flex-direction: column;
39 + align-items: center;
40 + /* background-color: rgba(255, 255, 255, 0.7); */
41 +}
42 +
43 +main > div {
44 + display: flex;
45 + flex-direction: row;
46 + justify-content: center;
47 + align-items: center;
48 + margin: 30px 0px 0px 0px;
49 + padding: 15px 30px;
50 + border-radius: 0.4em;
51 +}
52 +
53 +#info {
54 + font-size: 30px;
55 + font-weight: 700;
56 + color: var(--point-color);
57 +}
58 +
59 +#home_info {
60 + background-color: rgba(255, 255, 255, 0.7);
61 +}
62 +
63 +ul {
64 + list-style: none;
65 + border-radius: 0.4em;
66 + padding: 3px 10px;
67 + margin-left: 30px;
68 + background-color: rgba(255, 255, 255, 0.7);
69 + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
70 +}
71 +
72 +ul > div {
73 + font-weight: 500;
74 + font-size: 20px;
75 + color: #fff;
76 + background-color: var(--point-color);
77 + border-radius: 0.4em;
78 + position: relative;
79 + padding: 6px 0;
80 + top: -10px;
81 + text-align: center;
82 + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
83 +}
84 +
85 +li {
86 + font-weight: 500;
87 + margin: 10px 0;
88 + /* border: medium solid var(--point-color);
89 + border-radius: 0.4em; */
90 + color: var(--point-color);
91 + padding: 6px 36px;
92 +}
1 +function jbSubmit() {
2 + var salary = Number(document.getElementById("salary").value);
3 + var expenditure = Number(document.getElementById("expenditure").value);
4 + console.log(salary);
5 + if (salary == "" || expenditure == "") {
6 + alert("값을 입력하세요!");
7 + return false;
8 + } else if (isNaN(salary) || isNaN(expenditure)) {
9 + alert("숫자를 입력하세요!");
10 + return false;
11 + } else {
12 + return true;
13 + }
14 +}
...@@ -10,8 +10,8 @@ relayout(); ...@@ -10,8 +10,8 @@ relayout();
10 10
11 function resizeMap() { 11 function resizeMap() {
12 var Container = document.getElementById("map"); 12 var Container = document.getElementById("map");
13 - Container.style.width = "600px"; 13 + Container.style.width = "400px";
14 - Container.style.height = "500px"; 14 + Container.style.height = "300px";
15 } 15 }
16 16
17 function relayout() { 17 function relayout() {
...@@ -42,10 +42,11 @@ function displayMarker(Position) { ...@@ -42,10 +42,11 @@ function displayMarker(Position) {
42 if (!results[2]) return ""; 42 if (!results[2]) return "";
43 return decodeURIComponent(results[2].replace(/\+/g, " ")); 43 return decodeURIComponent(results[2].replace(/\+/g, " "));
44 } 44 }
45 +
46 + //다음 페이지에서 입력값 받아오기
45 var salary = getParameterByName("salary"); 47 var salary = getParameterByName("salary");
46 var expenditure = getParameterByName("expenditure"); 48 var expenditure = getParameterByName("expenditure");
47 var year = "3"; //값 받아오기 전 기본값으로 설정 49 var year = "3"; //값 받아오기 전 기본값으로 설정
48 - var div = document.createElement("div"); 50 + var div = document.getElementById("info");
49 - div.innerText = `${salary}의 월급과 ${expenditure}의 지출을 유지하면 당신은 ${year}년 후에 아래의 집을 구매할 수 있습니다.`; 51 + div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`;
50 - document.body.prepend(div);
51 } 52 }
......