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