Proje sonu - Hava durumu

Hava durumu panelini tamamlayıp şehir girişiyle sıcaklık gösterimini çalıştırırsın.

İşlevleri birleştirmek

Şimdiye kadar ayrı işlevler tanımladık: getWeather girişi okur, fetchWeather veriyi çeker, renderWeather ekrana basar. Artık bunları birleştiren bir displayWeather işlevi yazacağız. Bu işlev async olacak: şehri okur, await fetchWeather(city) ile veriyi çeker, sonra renderWeather(city, info) ile ekrana basar. Böylece tek bir tıklama tüm zinciri çalıştırır. Yeni bir Yenile düğmesi ekleyip bu işleve bağlayacağız.

Yenile düğmesini eklemek

Yeni bir düğmeyi HTML'e dokunmadan JavaScript ile ekleyebiliriz. document.createElement("button") yeni bir düğme öğesi oluşturur. refreshButton.textContent = "Yenile" ile etiketini ayarlarız. Sonra app.appendChild(refreshButton) ile düğmeyi sayfaya yerleştiririz. Son olarak refreshButton.addEventListener("click", displayWeather) ile tıklamayı displayWeather işlevine bağlarız. Böylece ikinci bir düğme projeyi tamamlar.

Uygulama displayWeather işlevini ve Yenile düğmesini ekle

Önceki dersin çözümünün üzerine devam et. Bir async function displayWeather() tanımla: cityInput.value ile şehri oku, await fetchWeather(city) ile veriyi çek ve renderWeather(city, info) ile ekrana bas. Sonra const refreshButton = document.createElement("button") ile yeni düğme oluştur, textContent'ini "Yenile" yap, app.appendChild(refreshButton) ile ekle ve refreshButton.addEventListener("click", displayWeather) ile bağla.

Örnek çözümü göster

const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const getWeatherButton = document.querySelector("#getWeatherButton");
const weatherResult = document.querySelector("#weatherResult");
console.log(app, cityInput, getWeatherButton, weatherResult);

function getWeather() {
  const city = cityInput.value;
  console.log(city);
}

getWeatherButton.addEventListener("click", getWeather);

async function fetchWeather(city) {
  const url = `https://api.example.com/weather?city=${city}`;
  const response = await fetch(url);
  const info = await response.text();
  return info;
}

function renderWeather(city, info) {
  weatherResult.textContent = `${city}: ${info}`;
}

async function displayWeather() {
  const city = cityInput.value;
  const info = await fetchWeather(city);
  renderWeather(city, info);
}

const refreshButton = document.createElement("button");
refreshButton.textContent = "Yenile";
app.appendChild(refreshButton);
refreshButton.addEventListener("click", displayWeather);

Kendini test et

displayWeather işlevi önce ne yapmalı?
- Şehri cityInput.value ile okur
- fetchWeather işlevini çağırır
- Yeni bir düğme oluşturur
- Sonucu ekrana basar
Cevabı göster

Şehri cityInput.value ile okur — Doğru! Önce şehri okumak gerekir; sonra veri çekilir.

Yeni düğme öğesi oluştur

const refreshButton = document.____;

Cevabı göster

const refreshButton = document.createElement("button");

displayWeather adımlarını eşleştir

cityInput.value

Şehri okur
await fetchWeather

Veriyi çeker
renderWeather

Ekrana basar
displayWeather

İşlevi yönetir
Dersleri özellikleriyle eşleştir

1. ders

Öğe seçimi
2. ders

Tıklama bağlama
3. ders

Veri çekme
4. ders

DOM'a basma
5. ders

Panel tamamlama

Sıradaki ders: Proje: Galeri uygulaması

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler