기능
검색창에 원하는 도시를 '영어'로 입력하면 그 도시의 이름, 온도, 날씨 상태, 날씨를 나타내는 아이콘을 알려준다.
(참고로 현재 시간이 밤이라 배경이 일정한데, 낮이 되면 배경이 밝게 된다!!)
오늘은 Open API를 이용해 본인의 지역을 검색하면 현재 날씨를 알려주는 앱을 구현해봤다.
부족한 점, 개선해야할 점도 많고 디자인도 맘에 들지 않지만... 일단 깔끔하게 만들고, 기능을 구현했다는 것에 의의를 둘 것이다!
만들었던 과정들을 정리하면서 '분명히 해봤던 건데 기억이 안나네...?' , '처음 보는거네' 했던 것들도 기록으로 남기려고 한다.
⭐중요했던 것
Open API 이용하기
이번 프로젝트에서 이용한 Open API는 OpenWeatherMap 이라는 곳에서 제공해주는 날씨 API이다.
접속 > 로그인 > 인증 > API Key 발급 과정을 거쳐 다음과 같은 코드를 통해 날씨 데이터를 사용할 수 있다.
api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}이때 받아온 데이터를 fetch() 함수와 여러 메소드 들을 통해 이케이케 하면 JSON 타입이 객체형태로 되어 사용할 수 있다.
(얼른 제대로 수정할 것...)
제작 과정
1. 목업
2. HTML, CSS
구현하고 싶었던 디자인은 왼쪽의 사진과 같다.
1. 검색창을 깔끔하게 => :focus
2. 검색 버튼에 마우스를 올리면 손가락 포인트가 생기게 => :hover
정리를 해보자면
본래 <input type="text">는 흰색 배경이 기본일 것이다. 이때 css에서 background-color: transparent;를 해준다면 뒷 배경이 보인다!
그런데 막상 검색창에서 타자를 칠때마다 다음과 같이 거슬리는 것들이 보였다.
이 거슬리는 것은 :focus { outline:none;}을 통해 테두리를 없앴다.
HTML
...
<body>
...
<div id="searchBox">
<input id="searchBlock" type="text" placeholder="도시 입력" onkeypress="enter()">
<button id="btnSearch">검색</button>
</div>
</body>
...CSS
/*검색창 꾸미기*/
#searchBlock {
background-color: transparent;
}
/*검색창 작성 중에도 효과 X*/
#searchBlock:focus {
border-top: 0px none;
border-left: 0px none;
border-right: 0px none;
border-bottom: 1px solid gray;
outline: none;
}
/*마우스 커서가 올려져 있을 때*/
#btnSearch:hover {
cursor: pointer;
}
3. JAVASCRIPT
3-1. javascript로 css 제어하기(시간에 따라 배경화면 바꾸기)
3-2. 검색창 엔터 사용 가능
사실 html의 input에 onkeypress라는 타입을 주기 싫었다. 오직 자바스크립트로만 해결하고 싶었는데 추후에 다른 방법을 찾아볼 것이다.
HTML
<input ... onkeypress="함수명()">JAVASCRIPT
function 함수명() {
if ( window.event.keyCode == 13 ) { // enter의 keyCode가 13
데이터 렌더링해주는 함수;
}
}❗추가하고 싶은 기능 / 개선점
1. 시간에 따른 배경화면이 변화하는 기능
받은 데이터에 현재 시간 데이터가 있는 것 같은데 아직 이용하지를 못했다.
임의로 한국 현재 시간에만 맞춰 알고리즘을 짰기에 런던, 뉴욕 같은 도시들은 그 나라 시간에 맞지 않다.
2. 사용자가 편리한 UI
기능 구현에만 시간을 쓰다보니 사용자가 실제로 사용하기에 매우 불편한 점이 많다.
3. 자동 완성기능
4. 영어가 아닌 한글로도 검색이 가능하도록
'Front-End > Project' 카테고리의 다른 글
| 코드스테이츠 파이널 프로젝트 회고 (0) | 2021.05.01 |
|---|---|
| 2주 프로젝트 회고, My Surpin (0) | 2021.04.01 |
| 첫 React Twittler (+ 개념 정리) (0) | 2021.02.12 |
| ChatterBox 만들기 (0) | 2021.02.08 |
| 회원 가입 (feat. 유효성 검사) (0) | 2021.01.09 |
댓글