Rumah >hujung hadapan web >tutorial js >Projek: Bina Apl Cuaca Menggunakan JavaScript dan API Cuaca

Projek: Bina Apl Cuaca Menggunakan JavaScript dan API Cuaca

Linda Hamiltonasal: 2024-12-27 04:02:13519semak imbas

Projek: Bina Apl Cuaca Menggunakan JavaScript dan API Cuaca

Tarikh: 18 Disember 2024

Membina apl cuaca ialah cara terbaik untuk mengukuhkan pemahaman anda tentang JavaScript, manipulasi DOM, pengendalian acara dan penyepaduan API. Projek ini akan mengajar anda cara mengambil data daripada API dan memaparkannya secara dinamik pada halaman web.

Gambaran Keseluruhan Projek

Ciri-ciri Apl Cuaca

Ambil data cuaca masa nyata daripada API cuaca (cth., OpenWeatherMap).
Fungsi input: Pengguna boleh mencari butiran cuaca dengan memasukkan nama bandar.
Kemas kini UI Dinamik: Paparkan suhu, kelembapan dan keadaan cuaca secara dinamik.
Ralat pengendalian untuk nama bandar atau isu API yang tidak sah.

Panduan Langkah demi Langkah

1. Sediakan Projek Anda

Buat fail yang diperlukan untuk projek anda:

HTML: Susun reka letak.
CSS: Gayakan apl (pilihan untuk kefungsian asas).
JavaScript: Tambahkan interaktiviti dan sepadukan API cuaca.

2. Dapatkan Kunci API Cuaca

Daftar di OpenWeatherMap dan dapatkan kunci API. Anda akan menggunakan API mereka untuk mengambil data cuaca.

Contoh URL API:

https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric

3. Struktur HTML Asas

Buat reka letak ringkas dengan medan input dan bahagian untuk memaparkan maklumat cuaca.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>




<hr>

<h3>
  
  
  <strong>4. Styling (Optional)</strong>
</h3>

<p>Add some CSS to make your app visually appealing.<br>
</p>

<pre class="brush:php;toolbar:false">#weather-app {
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 50px auto;
  width: 300px;
}

input, button {
  padding: 10px;
  margin: 10px 0;
}

#weather-result {
  margin-top: 20px;
}

5. Menulis Kod JavaScript

Manipulasi DOM dan Pengendalian Acara

Gunakan JavaScript untuk menangkap input pengguna, mengambil data daripada API dan memaparkan hasilnya.

// JavaScript code for the weather app
const API_KEY = "your_api_key_here"; // Replace with your actual API key

document.getElementById("search-btn").addEventListener("click", () => {
  const city = document.getElementById("city-input").value;
  if (city) {
    fetchWeather(city);
  } else {
    displayError("Please enter a city name.");
  }
});

function fetchWeather(city) {
  const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

  fetch(apiURL)
    .then(response => {
      if (!response.ok) {
        throw new Error("City not found");
      }
      return response.json();
    })
    .then(data => displayWeather(data))
    .catch(error => displayError(error.message));
}

function displayWeather(data) {
  document.getElementById("error-message").textContent = "";
  document.getElementById("city-name").textContent = `Weather in ${data.name}`;
  document.getElementById("temperature").textContent = `Temperature: ${data.main.temp}°C`;
  document.getElementById("description").textContent = `Condition: ${data.weather[0].description}`;
  document.getElementById("humidity").textContent = `Humidity: ${data.main.humidity}%`;
}

function displayError(message) {
  document.getElementById("error-message").textContent = message;
  document.getElementById("city-name").textContent = "";
  document.getElementById("temperature").textContent = "";
  document.getElementById("description").textContent = "";
  document.getElementById("humidity").textContent = "";
}

6. Menguji Apl

Buka fail HTML dalam penyemak imbas.
Masukkan nama bandar (cth., “London”) dan klik "Cari".
Sahkan bahawa butiran cuaca dipaparkan pada halaman.
Uji untuk bandar yang tidak sah dan input kosong untuk memastikan mesej ralat dipaparkan dengan betul.

Project: Build a Weather App Using JavaScript and a Weather API

Repo GitHub saya di sini klik

7. Ciri untuk Ditambah Kemudian (Penambahan Pilihan)

Geolokasi: Mengesan lokasi pengguna secara automatik dan memaparkan cuaca.
Ikon Cuaca: Gunakan ikon cuaca daripada respons API.
Penggayaan: Tambahkan animasi atau reka bentuk responsif untuk pengguna mudah alih.
Ramalan: Tunjukkan ramalan cuaca 5 hari.

Ringkasan Projek

Membina apl cuaca menyepadukan banyak kemahiran JavaScript yang penting, seperti:

Mengambil dan mengendalikan data API.
Memanipulasi DOM secara dinamik.
Mengendalikan input pengguna dan memaparkan hasil secara interaktif.

Dengan melengkapkan projek ini, anda akan mendapat keyakinan dalam membina aplikasi JavaScript yang lebih kompleks.

Langkah Seterusnya: Esok, kami akan menumpukan pada Pengendalian Ralat dan Nyahpepijat dalam JavaScript, meneroka teknik untuk mengenal pasti dan menyelesaikan isu dengan berkesan. Nantikan!

Atas ialah kandungan terperinci Projek: Bina Apl Cuaca Menggunakan JavaScript dan API Cuaca. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html for date Error using Event dom this location display input github ui

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mengapa TypeScript ialah Masa Depan Pembangunan JavaScript: Faedah dan PenggunaanArtikel seterusnya：Mengapa TypeScript ialah Masa Depan Pembangunan JavaScript: Faedah dan Penggunaan

Artikel berkaitan

Lihat lagi