📅 2024-03-28, 74일차
[프로젝트 남은 TODOs]
- 조건별 추천검색어에서 '카페'라는 단어가 포함되어있다면 파싱하여 제외시켜 검색시키기
- 카페 좋아요
- 카페 스크랩
- 사용자 위치기반 카페와의 거리 표시
- 검색창 (카페이름만?)
- 메인페이지 하단
- 추천카페, 인기카페, 신규카페
- 제휴문의 (관리자에게 이메일보내기 기능) 구글폼 사용
- 마이페이지 (내가쓴글, 내가한 질문, 나의 댓글, 내가찜한카페 count 가져오기)
- 필터 자잘한 오류 수정
마침 아침부터 비가와서, 이미지,코멘트, 추천검색어가 날씨조건에 따라 적용되는지 확인이 바로 가능했음! 🧡
OpenWeatherAPI
조건에 따라 온도와 날씨 ID를 기반으로 날씨 코멘트와 이미지를 업데이트
- 메인페이지 접속 시 현재 온도와 강수상태에 따라 이미지와 문구를 바꾸는 조건문 수정 완료
- 아래는 최종 코드
- 사용자에게 온도와 강수상태를 보여줄 수 있는 날씨위젯 변경 완료
위젯은 https://weatherwidget.io/ 에서 가져왔고 애니메이션 형태로도 제공해줌!
<script>
function fetchWeather() {
var city = "Daejeon";
var apiKey = "4aeb4c84293bc9b4109638849c3b309c";
var lang = "kr";
var apiUrl = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&appid=" + apiKey + "&lang=" + lang + "&units=metric";
fetch(apiUrl)
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
var temperature = data.main.temp;
var humidity = data.main.humidity;
var weatherId = data.weather[0].id;
var weatherCommentElement = document.querySelector('.weather-section .weather-comment');
var weatherImageElement = document.querySelector('.weather-section .Weather-img');
if (temperature <= 4 && (weatherId < 200 || weatherId > 699)) { //cold
weatherCommentElement.textContent = "한기가 서릿발을 타고 들어와 어느새 마음도 서늘해지는 추운 날 따뜻한 커피 한잔의 온기로 녹아든 순간이 행복할 것 같아요.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/35f11685-7a4a-44a7-a854-6512fc43ec83/image.png";
} else if (temperature >= 5 && temperature <= 11 && (weatherId < 200 || weatherId > 699)) { //chilly
weatherCommentElement.textContent = "찬바람이 불어오는 날 코 끝에 쌀쌀한 공기가 느껴질때면 항상 따뜻한 커피 한잔이 생각나요.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/8e174410-44d9-4d24-b972-c303f6b197bf/image.png";
} else if (temperature >= 12 && temperature <= 19 && (weatherId < 200 || weatherId > 699)) { //cool
weatherCommentElement.textContent = "바람이 부드럽게 스치는 서늘한 날, 한 모금의 커피 향기가 나를 감싸 안아요.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/51c47653-7837-4f70-bdcb-203ec2cf32a5/image.png";
} else if (temperature >= 20 && temperature <= 27 && (weatherId < 200 || weatherId > 699)) { //warm
weatherCommentElement.textContent = "바스락거리는 셔츠 한장만 걸쳐도 햇살의 온기와 시원한 바람이 어우러지는 날 달콤 쌉싸름한 커피 한잔이 생각나요.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/0bed2c81-5d07-4dcf-a928-25c987ace1f9/image.png";
} else if (temperature >= 28 && (weatherId < 200 || weatherId > 699)) { //hot
weatherCommentElement.textContent = "한낮의 뜨거운 뙤약볕 아래 얼음이 스르륵 녹는 시원한 아이스 커피 한 잔으로 산뜻함을 느리고 싶은 날이에요.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/0cf48676-5563-424b-b823-06f6a5c86efb/image.png";
} else if (temperature <= 15 && (weatherId >= 200 || weatherId <= 599)) { //rainy and chilly
weatherCommentElement.textContent = "유리창을 가볍게 두드리는 빗소리에 둘러싸여 습하고 쌀쌀한 공기 속에서도 갓 내린 커피의 따뜻함을 느낄 수 있는 날이에요.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/ca97aaa8-afcd-4828-a6ff-dd15ddb7f0c8/image.png";
} else if (temperature >= 16 && (weatherId >= 200 || weatherId <= 599)) { //rainy and hot/warm
weatherCommentElement.textContent = "비오는 날 창가에 앉아 빗소리를 들으며 마시는 아이스 커피는 후덥지근함도 비와 함께 씻겨 내려 줄 것만 같아요.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/2be5b88b-bcdb-4f68-9337-bc764f082015/image.png";
} else if (temperature <= 10 && (weatherId >= 600 || weatherId <= 699)) { //snowy
weatherCommentElement.textContent = "눈 내리는 날 창가에 앉아 커피 한 모금의 따뜻함으로 마음을 녹여주고 겨울의 서늘함을 잊게 해줘요.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/2f491c13-ec4e-4a98-aac9-140b9583cbb6/image.png";
} else { //n/a
weatherCommentElement.textContent = "Life is like a cup of coffee. It's all about how you make it.";
weatherImageElement.src = "https://velog.velcdn.com/images/yunlinit/post/203c7e7f-df3f-40d3-8eec-e02996d22372/image.png";
}
})
.catch(function(error) {
console.error('Error:', error);
});
}
fetchWeather();
</script>추천검색어
- 검색창의 value요소를 날씨 조건에 따라 새로운 value로 재할당하는 조건문
<!-- 날씨조건에 따라 추천검색어를 보여주는 검색창 html-->
<div class="search-box">
<div class="how-about-here">오늘은 이런 카페 어떠세요?</div>
<form action="/usr/findcafe/searchCafes" method="get" id="searchForm">
<label class="search-menu-item input input-bordered flex items-center gap-2 input-xs max-w-xs"> <input
type="text" class="grow" id="keyword" name="keyword" placeholder="검색어를 입력해주세요" value="" style="color:black;";/> <a href="javascript:;"
onclick="submitSearchForm()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70">
<path fill-rule="evenodd"
d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
clip-rule="evenodd" />
</svg>
</a>
</label>
</form>
</div> //날씨 조건에 따라 검색창의 value를 업데이트하여 추천검색어를 보여줌
var keywordInput = document.getElementById('keyword');
var newValue = "";
if (temperature <= 4 && (weatherId < 200 || weatherId > 699)) { //cold
newValue = "아늑한";
} else if (temperature >= 5 && temperature <= 11 && (weatherId < 200 || weatherId > 699)) { //chilly
newValue = "에스프레소바";
} else if (temperature >= 12 && temperature <= 19 && (weatherId < 200 || weatherId > 699)) { //cool
newValue = "테라스";
} else if (temperature >= 20 && temperature <= 27 && (weatherId < 200 || weatherId > 699)) { //warm
newValue = "테라스";
} else if (temperature >= 28 && (weatherId < 200 || weatherId > 699)) { //hot
newValue = "디저트맛집";
} else if (temperature <= 15 && (weatherId >= 200 || weatherId <= 599)) { //rainy and chilly
newValue = "로스터리";
} else if (temperature >= 16 && (weatherId >= 200 || weatherId <= 599)) { //rainy and hot/warm
newValue = "대형카페";
} else if (temperature <= 10 && (weatherId >= 600 || weatherId <= 699)) { //snowy
newValue = "뷰맛집";
} else { //n/a
newValue = "";
}
keywordInput.value = newValue;
hello world