웹사이트의 날씨

주말 일기예보가 포함된 멋진 위젯을 만드세요. 이는 네 가지 프로젝트 모두에 유용해.

보여줄게: 데이터를 위젯으로 변환

Open-Meteo는 향후 며칠에 대한 예측도 제공할 수 있어. 주소에 원하는 내용을 추가해.

https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=auto

응답에서 너는 찾을 수 있어daily.time(요일 목록),daily.temperature_2m_max, 그리고daily.temperature_2m_min(최고 및 최저 온도). 동일한 순서 = 첫날이 첫 번째 온도와 일치해.

그런 다음 루프에서 위젯을 빌드해.

<div id="pocasi" class="pocasi-widget"></div>

<script type="module">
  const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min&timezone=auto';
  const data = await (await fetch(adresa)).json();

  const dny = data.daily.time;
  const max = data.daily.temperature_2m_max;
  const min = data.daily.temperature_2m_min;

  let html = '';
  for (let i = 0; i < 3; i++) {
    const den = new Date(dny[i]).toLocaleDateString('en-US', { weekday: 'long' });
    html += `<div class="den">
      <strong>${den}</strong>
      <span>${Math.round(min[i])}–${Math.round(max[i])} °C</span>
    </div>`;
  }
  document.querySelector('#pocasi').innerHTML = html;
</script>

그리고 약간의 CSS가 있어 실제 위젯처럼 보야.

.pocasi-widget {
  display: flex;
  gap: 10px;
}
.pocasi-widget .den {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

네 차례 💪

프로젝트의 적절한 위치에 날씨 위젯을 추가해.

🏫 학교 웹사이트 – 솔루션

학교 행사 페이지: "학교 견학 날씨." 목적지의 좌표를 설정해. 아이들과 부모들은 무엇을 챙겨야 할지 알게 되어 감사할 것야.

🙋 개인 웹사이트 – 솔루션

머리글 또는 바닥글: 개인적인 터치로 도시 날씨를 확인해("오늘 우리 동네 기온은 18°C야.").

🌍 여행 일지 - 솔루션

계획된 각 여행에 대해 목적지 예측이 포함된 위젯야. 여행 위치의 좌표를 변경하면 돼.

⚽ 클럽 웹사이트 – 솔루션

경기 페이지: "토요일 경기 날씨." 지도에서 해당 필드의 좌표를 찾으세요. 보너스: 비가 올 것으로 예상되면 "비옷을 가져오세요!"를 보여주세요.

💡

**좌표는 어디서 얻나요?** 지도 서비스에서 위치를 마우스 오른쪽 버튼으로 클릭 → "여기가 뭐죠?" – 좌표가 상단에 표시돼.

✅

**확인:** 네 웹사이트에는 디자인에 맞게 스타일이 지정된 실제 3일 일기예보를 제공하는 위젯이 있어. 데이터 로드는 API에서 실시간으로 이루어집니다.

이번 수업에서 배울 점

물음표 뒤의 부분(매개변수)을 사용하여 API 주소에 원하는 내용을 알려줍니다.
목록의 데이터를 HTML로 작성해.for고리.
JSON의 숫자는 실제 위젯이 돼. 사용자가 디자인을 제공해.

이 수업은 유료 레벨의 일부입니다

보여줄게: 데이터를 위젯으로 변환

네 차례 💪

이번 수업에서 배울 점