웹 프론트엔드(Web Front-end) Happy House 프로젝트

프로젝트/Web / / 2021. 3. 16.
반응형

@notepad_jj2

츄르사려고 코딩하는 코집사입니다.

1. 주제

- 전국 아파트 실거래가(보증금액, 월세, 면적, 거래일자 등)를 보여주는 웹 Front

 

2. 개발인원

- 2명

 

3. 개발 기간

- 2021년 3월 12일 10AM ~ 2021년 3월 14일 11PM

 

4. 사용 언어 / 툴

- HTML, CSS, JavaScript, Jquery / VScode

1. Main.html

- BootStrap을 사용하여 아래 프론트 화면 구성

- Select 이용 전국구 Option 적용

- Google Map API 사용하여 Display

- Menu bar에는 로그인과 회원가입 기능 구현

- 지도 위의 Marker 구현

Main.html

 

Main.html(2)
Main.html(3)

 

2. register.html

- 회원가입창 구현

- 회원가입 html에는 사용자 이름, Email 주소, 비밀번호, 비밀번호 확인의 input이 있다.

- 회원가입한 정보들은 Local Storage에 저장이 된다.

- 이미 아이디가 있으면 로그인을 눌러 로그인 창으로 페이지 이동이 된다.

- 회원가입이 되면 자동으로 로그인이 되며, 우측 상단처럼 바뀌게 된다.

 

3. 마이페이지

- 마이페이지를 누르면 회원정보 확인이 나온다.

- 회원정보 확인에는 사용자 이름과 이메일이 나오고, 수정 버튼과 삭제 버튼이 있다.

- 삭제 버튼을 누르게 되면 Local Storage의 item이 삭제가 된다.

- 수정 버튼을 누르면 회원정보 이메일을 확인하고, 맞으면 회원정보를 수정할 수 있다.

 

 

 

 

 

 

4. 시/구/동 선택

- 시/구/동 선택을 하면 위치에 맞게 Google Map이 바뀐다.

 

 

 

 

5. 시/군/구를 선택 후 데이터 출력

- 거래 정보가 있으면 왼쪽에 거래 정보를 출력하고, 거래 정보의 주소 위치를 구글 Map에 Marker로 찍음

 

반응형
저작자표시

'프로젝트 > Web' 카테고리의 다른 글

웹 백엔드 DB(Web Back-end DB) Happy House 프로젝트  (0) 2021.04.14
웹 백엔드(Web Back-end) Happy House 프로젝트  (0) 2021.04.03
웹 프론트엔드(Web Front-end) 코슐랭가이드 소개 프로젝트 - 2  (0) 2021.03.12
웹 프론트엔드(Web Front-end) 코슐랭가이드 소개 프로젝트  (0) 2021.03.08
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
프로젝트/Web 관련 글
글 더보기

코집사님의
글이 좋았다면 응원을 보내주세요!

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*