Proje: Hava durumu paneli

5 derslik hava durumu projesine genel bakış: şehir girişi, fetch ve DOM güncellemesi.

Proje: Hava durumu paneli

Bu 5 derslik projede bir hava durumu paneli geliştireceğiz. Kullanıcı bir şehir adı yazacak, düğmeye tıklayacak ve ekranda hava bilgisini görecek. Tüm etkileşim JavaScript ile çalışacak.

Şu kavramları birleştireceğiz:

querySelector ile öğeleri seçmek
addEventListener ile tıklamayı dinlemek
fetch ile veri çekmek
textContent ve şablon dizilerle DOM'u güncellemek

Her ders önceki dersin çözümünün üzerine çıkar.

HTML iskeleti

Panelin HTML iskeleti hazır: #app kapsayıcısının içinde bir başlık, bir #cityInput giriş alanı, bir #getWeatherButton düğmesi ve bir #weatherResult bölmesi var. Kullanıcı şehir adını yazar, düğmeye tıklar; sonuç #weatherResult içinde görünür. Biz JavaScript ile bu öğeleri seçip olayları bağlayacağız. HTML'e dokunmadan tüm davranışı kodla ekleyeceğiz.

Uygulama Dört öğeyi seç ve konsola yazdır

Dört öğeyi querySelector ile seç ve değişkenlere ata: app (#app), cityInput (#cityInput), getWeatherButton (#getWeatherButton) ve weatherResult (#weatherResult). Sonra hepsini console.log ile yazdır.

Ö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);

Kendini test et

Hangi metot bir sunucudan veri çekmek için kullanılır?
- fetch()
- console.log()
- querySelector()
- appendChild()
Cevabı göster

fetch() — Doğru! fetch bir sunucudan veri çekmenin standart yoludur.

Şehir giriş alanını seç

const cityInput = document.____;

Cevabı göster

const cityInput = document.querySelector("#cityInput");

HTML kimliğini göreviyle eşleştir

#app

Ana kapsayıcı
#cityInput

Şehir adı girişi
#getWeatherButton

Tıklama düğmesi
#weatherResult

Hava bilgisi bölmesi

Sıradaki ders: Arayüz ve şehir girişi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler