본문 바로가기
JavaScript

[JavaScript] 기온별 옷차림 추천하기 - 3

by Vintz 2020. 11. 25.
반응형

지난 2편에 이어서 날씨 API로 받아온 기온별로 옷차림을 추천해주는 기능을 만들었습니다.

 

[JavaScript] 날씨 API 사용하기 - 2

지난 1편에 이어서 웹 페이지에 JSON data를 렌더링 해보겠습니다. CSS 작업까지 조금은 해놓은 상태입니다. [JavaScript] 날씨 API 사용하기 - 1 개인 프로젝트 첫 단계 시작 🏃🏻‍♂️ 개인 프로젝트

onlydev.tistory.com


온도에 따른 옷차림 추천

나름대로 디자인에 신경을 썼지만 역시 갈 길이 멉니다. 불러온 날씨 온도에 범위를 정해서 온도에 따라 옷차림을 추천해주는 코드를 짜보았습니다.

온도 범위를 정하자

처음 온도 범위를 정할 때 고민이 많았습니다. '삼항 연산자나 선택지가 한 두개인 경우가 아닌 5 ~ 9라는 범위를 어떻게 정해야할까' 라는 생각이 들었고 나름 배운 것들 안에서 코드를 잘 짰다고 생각됩니다.

8개의 날씨, 8개의 배경 이미지

todayClothes() 함수와 거의 비슷한 코드지만 함수 하나당 하나의 기능을 담당해야한다고 생각해서 따로 분리했습니다. 코드가 비슷해서 리팩토링하면 가독성도 좋고 잘 줄일 수 있을것 같은데 아직은 이게 최선입니다..😅 

결과물

 

임의로 온도를 조절해봤습니다. 온도별로 옷차림과 온도에 맞는 날씨의 이미지를 설정해주었습니다. 개인적으로 만족하고 혼자 이렇게까지 만들었다는 것에 뿌듯하고 신기하기도 하네요. 앞으로 이런 개인 프로젝트를 많이 만들어봐야겠습니다. 무언가에 열중해서 결과물이 나온다는게 이렇게까지 좋은건줄 몰랐네요.

반응형

댓글 4

  • code 2021.06.07 15:22

    안녕하세요! 혹시 어떤 프로그램 이용해서 코드 짜신건지 여쭤봐도 될까요?
    답글

    • Vintz 2021.06.07 17:36 신고

      안녕하세요. VSCode를 이용했습니다!
      해당 글의 코드 스크린샷은 carbon이라는 사이트에서 코드를 옮긴 후 저장한거에요.

  • guest 2022.05.13 15:06

    안녕하세요! 코딩 초보입니다. 온도정보와 8개의 날씨 정보 모두 한 html 안에 있는건가요?
    답글

    • Vintz 2022.05.13 22:38 신고

      안녕하세요. 전체 코드를 하나의 html 안에 작성을 한건지 궁금하신건가요?

      해당 코드는
      https://github.com/ByungyeonKim/weather
      여기에서 확인하실 수 있습니다! :)