Mã thời tiết HTML

Trong hướng dẫn này, chúng ta sẽ xây dựng ứng dụng thời tiết của riêng mình bằng HTML, CSS và JavaScript. Để truy xuất dữ liệu, chúng tôi sẽ sử dụng thứ gọi là API hoặc giao diện lập trình ứng dụng

Chà, thực ra chúng ta sẽ sử dụng hai API. một để lấy vị trí của người dùng và một để lấy dữ liệu thời tiết dựa trên vị trí của người dùng

Bắt đầu

Để truy xuất vị trí của người dùng, chúng tôi sẽ sử dụng API Web vị trí địa lý để tự động phát hiện vĩ độ và kinh độ của người dùng. Khi chúng tôi có thông tin này, chúng tôi có thể yêu cầu một nguồn thời tiết - như OpenWeatherMap - để nhận dữ liệu thời tiết dựa trên vị trí của người dùng

Trước hết, hãy tiếp tục và đăng ký khóa API miễn phí trên OpenWeatherMap tại đây. Khi bạn đã đăng nhập, hãy nhấp vào

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

2 và tạo khóa. Nó sẽ trông giống như

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

3

Bây giờ chúng tôi có khóa API, chúng tôi có thể tạo các tệp của mình

• mục lục. html - cho đánh dấu của chúng tôi
• Phong cách. css - để tạo kiểu
• ứng dụng. js - để [các] chức năng tìm nạp dữ liệu từ các API của chúng tôi

Như bạn có thể đã thấy trong bản xem trước ở hình trên, chúng tôi sẽ hiển thị nhiệt độ hiện tại, mô tả ngắn và tọa độ dựa trên vị trí của người dùng. Để làm điều này, chúng ta cần truy cập vào tài liệu

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

4 của mình và đảm bảo rằng trước tiên chúng ta đã liên kết biểu định kiểu

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

5 và tệp javascript

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

6

Sau đó, trong thẻ

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

7 của chúng ta, hãy tạo ba phần tử với ba id duy nhất. Chúng ta có thể tạo thẻ

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

8 với id là

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

9, thẻ

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

0 với id là

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

1 và thẻ

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

2 với id là

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

3. Trong tương lai, bạn có thể thêm nhiều yếu tố hơn để đánh dấu và hiển thị dữ liệu chi tiết hơn nữa từ API thời tiết của chúng tôi tại đây

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

2

Tuyệt, bây giờ chúng ta đã có phần đánh dấu của mình, hãy thực sự tìm nạp dữ liệu. Tệp của bạn — khi được xem trước trong trình duyệt — vẫn phải trống

Tìm nạp dữ liệu vị trí địa lý

Trước khi chúng tôi tìm nạp dữ liệu từ các API của mình, chúng tôi sẽ cần gán các biến cho mỗi

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

4 trong phần đánh dấu HTML của chúng tôi. Chúng ta có thể làm điều đó bằng cách sử dụng hàm

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

5. Hãy tiếp tục và viết một hàm

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

6 đặt mỗi

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

4 trong phần đánh dấu HTML của chúng ta bằng một biến

Giải pháp

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

Đáng kinh ngạc. Chúng tôi biết đã kết nối JavaScript của chúng tôi với đánh dấu HTML. Điều này sẽ cho phép chúng tôi chỉnh sửa

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

8 của các thẻ mà chúng tôi đã liên kết bởi

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

4

Tiếp theo, hãy tiếp tục viết hàm

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

6 của chúng ta bằng cách thêm các biến cho điểm cuối API thời tiết [url] và apiKey

________số 8

Ngọt. Bây giờ, hãy gọi API web định vị địa lý của chúng tôi bằng cách sử dụng như sau

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

2

Chính xác chức năng này là gì? . Bất cứ khi nào ai đó truy cập ứng dụng thời tiết của chúng tôi, ứng dụng sẽ hỏi liệu họ có được phép truy cập vị trí của họ không. Nếu đúng như vậy, thì nó sẽ nhận được vị trí hiện tại của một người về kinh độ và vĩ độ của họ. Để có công việc này, chúng ta sẽ cần chuyển vào hai chức năng.

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

21 và

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

22. Các hàm này sẽ được gọi tùy thuộc vào việc hàm

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

23 trả về dữ liệu vị trí hợp lệ hay đưa ra lỗi. Sau khi bạn gọi API định vị địa lý, hãy thử bảng điều khiển ghi lại dữ liệu bạn nhận được khi thành công và/hoặc khi gặp lỗi

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

6

Để xem dữ liệu này, hãy đảm bảo rằng bạn gọi hàm

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

6 ở đâu đó bên ngoài hàm vì tất cả mã và lỗi của chúng tôi đều nằm trong đó

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

8

Mở tệp

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

25 của bạn trong trình duyệt và điều hướng đến bảng điều khiển của bạn. Bạn sẽ thấy dữ liệu định vị địa lý như thế này

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

0

Khá mát mẻ, phải không? . Hãy mở rộng chức năng

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

21 của chúng tôi để làm điều này

Bằng cách xem dữ liệu mà chúng tôi đã ghi lại, hãy đặt vĩ độ và kinh độ bằng các biến có tên là

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

27 và

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

28

Giải pháp

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

4

Tuyệt vời. Hãy chuyển sang thực hiện yêu cầu API của chúng tôi

Trong JavaScript, chúng ta có thể sử dụng API tìm nạp, cung cấp giao diện để tìm nạp tài nguyên từ mọi nơi trên internet. Chúng tôi có thể nhấn url này để lấy dữ liệu của mình

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

5

Nếu bạn tò mò, hãy thử tự xây dựng chuỗi này với vĩ độ và kinh độ mà bạn đã đăng nhập trước đó. Nếu truy cập liên kết đó trong trình duyệt của mình, bạn sẽ thấy dữ liệu thời tiết ở dạng JSON được xuất ra dựa trên vị trí bạn đã gửi trong URL. Đây chính xác là dữ liệu mà chúng tôi sẽ tìm nạp

Chúng tôi có thể tìm nạp dữ liệu bằng cách chuyển

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

29 của mình vào API web

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

60. Sau đó, chúng ta có thể sử dụng một thứ gọi là lời hứa để thực thi một bộ mã sau khi chúng ta đã tìm nạp dữ liệu. Trong trường hợp này, chúng tôi muốn lấy dữ liệu mà chúng tôi đã tìm nạp và hiển thị dữ liệu đó trên trang web của mình, nghĩa là đặt

let api = "//api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";

8 của các thẻ mà chúng tôi đã tạo trước đó theo nhiệt độ, mô tả và vị trí từ yêu cầu dữ liệu thời tiết của chúng tôi

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

9

Ngọt. Dữ liệu bạn đã tìm nạp hiện được hiển thị trên trang web của bạn. Đây là giao diện JavaScript của bạn sau khi bạn hoàn thành. Tôi vừa thêm một số văn bản bất cứ khi nào không tìm thấy vị trí [khi có lỗi] và thêm văn bản bổ sung để cho người dùng biết rằng họ hiện đang được "định vị" và chúng tôi vẫn đang tải tất cả dữ liệu thời tiết. Thông báo này sau đó được ghi đè bằng dữ liệu thời tiết thực tế

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

0

Ở đó bạn có nó. Bây giờ chúng tôi có một ứng dụng thời tiết chức năng. ]

một số kiểu dáng

Đây là ý kiến ​​của tôi về một số thay đổi phông chữ và căn giữa cơ bản trong CSS. Thoải mái tạo kiểu cho trang theo ý thích của bạn

function getWeather[] {
  let temperature = document.getElementById["temperature"];
  let description = document.getElementById["description"];
  let location = document.getElementById["location"];
}

1

Thách đấu

Tôi hy vọng bạn tìm thấy hướng dẫn này hữu ích. Bạn có thể nghĩ ra những ý tưởng khác để cải thiện dự án này không?

Bạn có thể thêm các biểu tượng tùy thuộc vào mô tả thời tiết [ví dụ:. mây, nắng, mưa, v.v. ], thêm dữ liệu thời tiết bổ sung [cảm giác như nhiệt độ, độ ẩm, dự báo 7 ngày, bình minh, hoàng hôn, tốc độ gió, v.v.]. Hãy nhớ rằng, tất cả dữ liệu này đã có trong phản hồi yêu cầu của bạn đối với API OpenWeatherMap

Làm cách nào để tạo một trang web thời tiết bằng HTML?

Làm cách nào để hiển thị nhiệt độ trong HTML?

Làm cách nào để kiểm tra thời tiết trong JavaScript?

Làm cách nào để xây dựng API thời tiết?