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