Hướng dẫn how to get weather information in javascript - cách lấy thông tin thời tiết trong javascript

Trong hướng dẫn ngày hôm nay, chúng tôi sẽ học cách xây dựng một ứng dụng thời tiết đơn giản nhưng đầy đủ chức năng với Vanilla JavaScript.

Chúng tôi có rất nhiều điều thú vị để che, vì vậy hãy lấy một tách cà phê và để bắt đầu! Ở đây, một menu điều hướng nhanh chóng cho bạn.

Những gì bạn sẽ học được trong hướng dẫn API thời tiết JavaScript này:

1. Giàn giáo ứng dụng thời tiết
   1. Tìm API thời tiết
   2. OpenWeather là gì?
   3. Tìm các biểu tượng thời tiết và bộ dụng cụ giao diện người dùng thời tiết
2. Xác định đánh dấu trang
3. Chỉ định một số kiểu cơ bản
4. Đặt các kiểu chính
5. Thêm JavaScript
6. Phần thưởng: Nhận dữ liệu thời tiết theo thời gian thực với API Weatherstack

Những gì chúng tôi sẽ xây dựng

Ở đây, một video giới thiệu thể hiện chức năng của ứng dụng mà chúng tôi sẽ tạo ra:

Tại đây, bản demo trên Codepen cho bạn để chơi và chơi với:

Hướng dẫn này giả định rằng bạn đã quen thuộc với Ajax, một kỹ thuật đầu tiên thiết yếu. Nếu bạn chỉ mới bắt đầu, hãy xem loạt bài này.

1. Giàn giáo ứng dụng thời tiết Scaffolding the Weather App

Trước khi bắt đầu tạo ứng dụng của chúng tôi, có một vài điều mà chúng tôi phải xem xét.

Tìm API thời tiết

Trước tiên, chúng tôi phải tìm một nhà cung cấp cho phép chúng tôi & NBSP; kết hợp dữ liệu thời tiết của nó vào ứng dụng của chúng tôi. May mắn thay, có một số & nbsp; các nhà cung cấp khác nhau ngoài kia để phát triển các ứng dụng thời tiết. Hầu hết trong số chúng bao gồm một gói miễn phí cùng với các đăng ký cao cấp có tỷ lệ tùy thuộc vào dịch vụ/tính năng. & NBSP;

OpenWeather là gì?

Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng & nbsp; Openweathermap, một trong những lựa chọn miễn phí phổ biến nhất. OpenWeather tự mô tả là một nhóm các chuyên gia CNTT và các nhà khoa học dữ liệu làm khoa học dữ liệu thời tiết sâu kể từ năm 2014. Đối với mỗi điểm trên Trái đất, OpenWeather cung cấp dữ liệu thời tiết lịch sử, hiện tại và dự báo đáng tin cậy thông qua API tốc độ ánh sáng. & nbsp;

Để tận dụng các khả năng của nó, trước tiên, chúng tôi phải đăng ký khóa API:

Dịch vụ này đi kèm với các gói khác nhau. & NBSP; Như bạn có thể thấy từ trực quan hóa bên dưới, người khởi động [miễn phí] cho phép 60 cuộc gọi mỗi phút phù hợp với nhu cầu của chúng tôi:

Vì vậy, trước khi tiếp tục, vui lòng đảm bảo rằng bạn đã đăng ký khóa API. Sau đó, chúng tôi sẽ bao gồm khóa đó trong tập lệnh của chúng tôi. & NBSP;

Hãy nhớ rằng cách tốt nhất để kiểm tra ứng dụng là bằng cách đưa bản demo CodePen và bao gồm cả khóa của riêng bạn. Nếu tất cả chúng ta chia sẻ cùng một khóa, ứng dụng có thể sẽ không hoạt động do giới hạn cuộc gọi API.

Nơi tìm các biểu tượng thời tiết và bộ dụng cụ UI thời tiết & NBSP;

Trước khi chúng tôi bắt đầu với mã JavaScript API thời tiết, chúng tôi sẽ cần các biểu tượng ứng dụng thời tiết. Điều đáng chú ý là OpenWeathermap đi kèm với bộ biểu tượng của riêng nó và chúng tôi sẽ xem xét những điều đó. Tuy nhiên, chúng tôi sẽ tiến thêm một bước và sử dụng một số tùy chỉnh. & NBSP;

Bây giờ, nếu bạn là một nhà thiết kế web hoặc làm việc trên nhiều dự án thiết kế web, các yếu tố Envato là lựa chọn tốt nhất cho bạn.

Với một khoản phí hàng tháng thấp, thị trường dựa trên đăng ký này cho phép bạn truy cập không giới hạn vào mọi thứ bạn cần cho các dự án của mình.

Tại đây, chúng tôi sẽ xem xét một số bộ vector biểu tượng thời tiết hàng đầu và bộ UI thời tiết. Hãy tiếp tục duyệt các phần tử envato thư viện Bộ dụng cụ UI Weather để biết thêm!

1. Biểu tượng thời tiết và phông chữ

Nếu bạn thích các biểu tượng ứng dụng thời tiết đơn giản, đây là dành cho bạn. Bộ vector biểu tượng thời tiết này đi kèm với 32 biểu tượng vector và phông chữ dự báo. Bộ vectơ biểu tượng thời tiết hoàn chỉnh này bao gồm 32 tệp SVG cũng như các tài liệu tham khảo HTML và CSS.

2. Biểu tượng thời tiết UICON

Bộ vector biểu tượng thời tiết này có một cái nhìn hiện đại và mới mẻ. Có 12 biểu tượng ứng dụng thời tiết trong hai phiên bản màu. Tất cả các biểu tượng thời tiết được chế tạo trong EPS với thiết kế tối thiểu.

3. Biểu tượng và phông chữ thời tiết Vector

Nếu bạn đang tìm kiếm một bộ vector biểu tượng thời tiết hoàn chỉnh, hãy xem nó. Gói biểu tượng ứng dụng thời tiết đi kèm với 42 biểu tượng độc đáo và một phông chữ. Các biểu tượng thời tiết có định dạng AI, PSD và SVG.

4. Mẫu ứng dụng thời tiết

Bây giờ, nếu bạn muốn xây dựng một ứng dụng thời tiết với một mẫu, chúng tôi đã có bộ UI thời tiết này. Bạn có thể chỉnh sửa ứng dụng thời tiết của riêng mình bằng mẫu này trong Photoshop, Illustrator và Adobe XD.

5. Thời tiết tiện ích nhỏ cho web hoặc di động

Đây là một bộ UI thời tiết mát mẻ khác nếu bạn muốn xây dựng một ứng dụng thời tiết khác. Bộ UI thời tiết này có thiết kế sạch và tối thiểu. Bạn có thể chỉnh sửa nó bằng Phác thảo.

2. Xác định đánh dấu trangDefine the Page Markup

Bây giờ chúng tôi đã thấy một số biểu tượng ứng dụng thời tiết hàng đầu, đã đến lúc xây dựng một trang web thời tiết với JavaScript. Chúng tôi sẽ xác định hai phần. & NBSP;

Phần đầu tiên sẽ bao gồm một tiêu đề, biểu mẫu tìm kiếm và phần tử

  

    ...
    ...
  
  ...°C
  
    
    ...
  

3 trống. Yếu tố này sẽ trở nên hiển thị với một thông điệp thích hợp trong một số điều kiện nhất định. Cụ thể, nếu & nbsp; có bất kỳ dữ liệu thời tiết nào có sẵn cho A & NBSP; Thành phố được yêu cầu hoặc dữ liệu cho thành phố này đã được biết đến. & NBSP;

Phần thứ hai sẽ bao gồm một danh sách các thành phố. Theo mặc định, nó đã thắng được chứa bất kỳ thành phố nào. Nhưng, khi chúng tôi bắt đầu tìm kiếm thời tiết cho một thành phố cụ thể, nếu có dữ liệu thời tiết, một mục danh sách tương ứng [thành phố] sẽ được thêm vào danh sách không có thứ tự.

Tại đây, bản đánh dấu trang ban đầu:

  

    
Simple Weather App
    
      
      SUBMIT
      
    
  


  

    

  

Lưu ý: Trong bản demo codepen của chúng tôi, thuộc tính

  

    ...
    ...
  
  ...°C
  
    
    ...
  

4 của trường & nbsp; trường tìm kiếm đã giành được công việc. Trên thực tế, nó sẽ ném lỗi sau mà bạn có thể thấy nếu bạn mở bảng điều khiển trình duyệt của mình: In our CodePen demo, the

  

    ...
    ...
  
  ...°C
  
    
    ...
  

4 attribute of the search field won’t work. In fact, it’ll throw the following error which you can see if you open your browser console:

Tuy nhiên, nếu bạn chạy ứng dụng này cục bộ [không phải là một dự án Codepen], vấn đề này đã thắng tồn tại.

Và ở đây, bản đánh dấu được liên kết với một mục danh sách mà chúng tôi sẽ tạo động thông qua JavaScript:

  

    ...
    ...
  
  ...°C
  
    
    ...
  

3. Chỉ định một số kiểu cơ bản Specify Some Basic Styles

Với việc đánh dấu cho ứng dụng thời tiết đã sẵn sàng, chúng tôi sẽ tập trung với CSS. Bước đầu tiên, như mọi khi, là chỉ định một số biến CSS và các kiểu đặt lại chung:

:root {
  --bg_main: #0a1f44;
  --text_light: #fff;
  --text_med: #53627c;
  --text_dark: #1e2432;
  --red: #ff1e42;
  --darkred: #c3112d;
  --orange: #ff8c00;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
}

button {
  cursor: pointer;
}
 
input {
  -webkit-appearance: none;
}
 
button,
input {
  border: none;
  background: none;
  outline: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

body {
  font: 1rem/1.3 "Roboto", sans-serif;
  background: var[--bg_main];
  color: var[--text_dark];
  padding: 50px;
}

4. Đặt các kiểu chính Set the Main Styles

Bây giờ hãy thảo luận về các phong cách chính của ứng dụng thời tiết của chúng tôi.

Phong cách Phần 1

Đầu tiên, chúng tôi sẽ thêm một số kiểu đơn giản vào các yếu tố của phần đầu tiên. & NBSP;

Trên màn hình trung bình trở lên & nbsp; [> 700px] Bố cục sẽ trông như thế này:

Trên các màn hình nhỏ hơn, các phần tử biểu mẫu sẽ chia thành hai dòng:

Dưới đây là các phong cách liên quan:

/*CUSTOM VARIABLES HERE*/

.top-banner {
  color: var[--text_light];
}

.heading {
  font-weight: bold;
  font-size: 4rem;
  letter-spacing: 0.02em;
  padding: 0 0 30px 0;
}

.top-banner form {
  position: relative;
  display: flex;
  align-items: center;
}

.top-banner form input {
  font-size: 2rem;
  height: 40px;
  padding: 5px 5px 10px;
  border-bottom: 1px solid;
}

.top-banner form input::placeholder {
  color: currentColor; 
}

.top-banner form button {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 15px 20px;
  margin-left: 15px;
  border-radius: 5px;
  background: var[--red];
  transition: background 0.3s ease-in-out;
}

.top-banner form button:hover {
  background: var[--darkred];
}

.top-banner form .msg {
  position: absolute;
  bottom: -40px;
  left: 0;
  max-width: 450px;
  min-height: 40px;
}

@media screen and [max-width: 700px] {
  .top-banner form {
    flex-direction: column;
  }
  
  .top-banner form input,
  .top-banner form button {
    width: 100%;
  }

  .top-banner form button {
    margin: 20px 0 0 0;
  }
  
  .top-banner form .msg {
    position: static;
    max-width: none;
    min-height: 0;
    margin-top: 10px;
  }
}

PHẦN #2 Phong cách

Chúng tôi sẽ sử dụng lưới CSS để bố trí các mục trong danh sách. Hãy nhớ rằng mỗi mục danh sách sẽ đại diện cho một thành phố. Chiều rộng của chúng sẽ phụ thuộc vào kích thước màn hình.

Trên các màn hình lớn [> 1000px], chúng tôi sẽ có bố cục bốn cột.

Sau đó, trên màn hình trung bình [> 700px và & nbsp; ≤1000px] một bố cục ba cột, trên màn hình nhỏ [> 500px và & nbsp; ≤700px] một bố cục hai cột và cuối cùng trên các màn hình thêm nhỏ [≤500px] tất cả các phần tử sẽ được xếp chồng lên nhau.

Dưới đây là các kiểu tương ứng:

.ajax-section {
  margin: 50px 0 20px;
}

.ajax-section .cities {
  display: grid;
  grid-gap: 32px 20px;
  grid-template-columns: repeat[4, 1fr];
}

@media screen and [max-width: 1000px] { 
  .ajax-section .cities {
    grid-template-columns: repeat[3, 1fr];
  }
}

@media screen and [max-width: 700px] {
  .ajax-section .cities {
    grid-template-columns: repeat[2, 1fr];
  }
}

@media screen and [max-width: 500px] {  
  .ajax-section .cities {
    grid-template-columns: repeat[1, 1fr];
  }
}

Mỗi cột sẽ trông giống như một thẻ có bóng dưới cùng sẽ được thêm vào thông qua phần tử giả

  

    ...
    ...
  
  ...°C
  
    
    ...
  

5. & NBSP;

Bên trong thẻ, chúng tôi sẽ đặt thông tin thời tiết về thành phố được yêu cầu. Chúng sẽ đến từ yêu cầu của chúng tôi, ngoài các biểu tượng. Những biểu tượng đó, như đã đề cập ở trên được lấy & nbsp; từ các phần tử Envato, sẽ cho thấy điều kiện thời tiết hiện tại của thành phố này và phù hợp với các biểu tượng Openweathermap tương đương.

Dưới đây bạn có thể thấy một phần của CSS cần thiết cho bố cục này:

/*CUSTOM VARIABLES HERE*/

.ajax-section .city {
  position: relative;
  padding: 40px 10%;
  border-radius: 20px;
  background: var[--text_light];
  color: var[--text_med];
}

.ajax-section .city::after {
  content: ’’;
  width: 90%;
  height: 50px;
  position: absolute;
  bottom: -12px;
  left: 5%;
  z-index: -1;
  opacity: 0.3;
  border-radius: 20px;
  background: var[--text_light];
}

.ajax-section figcaption {
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ajax-section .city-temp {
  font-size: 5rem;
  font-weight: bold;
  margin-top: 10px;
  color: var[--text_dark];
}

.ajax-section .city sup {
  font-size: 0.5em;
}

.ajax-section .city-name sup {
  padding: 0.2em 0.6em;
  border-radius: 30px;
  color: var[--text_light];
  background: var[--orange];
}

.ajax-section .city-icon {
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

5. Thêm JavaScript Add the JavaScript

Tại thời điểm này, chúng tôi đã sẵn sàng để xây dựng chức năng cốt lõi của ứng dụng thời tiết của chúng tôi. Hãy làm nó!

Về nộp biểu mẫu

Mỗi lần người dùng gửi biểu mẫu bằng cách nhấn phím Enter hoặc nút gửi, chúng tôi sẽ làm hai điều:Enter key or the Submit button, we’ll do two things:

1. Dừng biểu mẫu gửi, do đó ngăn chặn tải lại trang.
2. Lấy giá trị được chứa trong trường tìm kiếm.

Ở đây, mã bắt đầu:

const form = document.querySelector[".top-banner form"];

form.addEventListener["submit", e => {
  e.preventDefault[];
  const inputVal = input.value;
}];

Tiếp theo, chúng tôi sẽ kiểm tra xem liệu có các mục danh sách [thành phố] bên trong phần thứ hai hay không. & NBSP;

Thực hiện yêu cầu AJAX

Chúng tôi sẽ bắt đầu với giả định rằng danh sách trống. Điều đó nói rằng, nó chưa bao giờ chạy bất kỳ yêu cầu Ajax nào trong quá khứ. Trong trường hợp như vậy, chúng tôi sẽ thực hiện yêu cầu đến API OpenWeatherMap và chuyển các tham số sau:

1. Tên thành phố [ví dụ: Athens] hoặc tên thành phố được phân tách bằng dấu phẩy cùng với mã quốc gia [ví dụ: Athens, GR] sẽ là giá trị của trường tìm kiếm
2. Khóa API. Một lần nữa, bạn nên sử dụng & nbsp; riêng của mình & nbsp; để tránh các lỗi không mong muốn do giới hạn cuộc gọi API.
3. Đơn vị nhiệt độ cho thành phố được yêu cầu. Trong trường hợp của chúng tôi, chúng tôi sẽ đi với Celcius.

Với tất cả những điều trên trong tâm trí, & nbsp; bằng cách làm theo tài liệu & nbsp; API, URL yêu cầu của chúng tôi sẽ trông giống như thế này:

const apiKey = "YOUR_OWN_KEY";
const inputVal = input.value;

...

const url = `//api.openweathermap.org/data/2.5/weather?q=${inputVal}&appid=${apiKey}&units=metric`;

Để thực hiện yêu cầu AJAX, chúng tôi có rất nhiều tùy chọn. Chúng ta có thể sử dụng XMLHTTPrequest & NBSP; API cũ đơn giản, API tìm nạp mới hơn hoặc thậm chí là thư viện JavaScript như JQuery và Axios. Ví dụ này, chúng tôi sẽ đi với API tìm nạp. & NBSP;

Để lấy dữ liệu mong muốn, chúng ta phải làm những việc sau:

• Truyền URL mà chúng tôi muốn truy cập vào phương thức

  
    
  
      ...
      ...
    
    ...°C
    
      
      ...
    
  

  6. & NBSP;
• Phương pháp này sẽ trả về một lời hứa chứa phản hồi [đối tượng

  
    
  
      ...
      ...
    
    ...°C
    
      
      ...
    
  

  7]. Nhưng điều này đã giành được phản hồi thực tế, chỉ là một phản hồi HTTP. Để lấy dữ liệu phản hồi ở định dạng JSON mong muốn [đây là định dạng dữ liệu mặc định của OpenWeatherMapap], chúng tôi sẽ sử dụng phương thức phản hồi đối tượng & NBSP; ________ 18.
• Phương pháp này sẽ trả lại một lời hứa khác. Khi nó hoàn thành, dữ liệu sẽ có sẵn để thao tác.
• Nếu vì một số lý do, yêu cầu không thành công, một thông báo tương ứng sẽ xuất hiện trên màn hình.

Vì vậy, yêu cầu AJAX của chúng tôi sẽ trông giống như thế này:

...

 fetch[url]
  .then[response => response.json[]]
  .then[data => {
    // do stuff with the data
  }]
  .catch[[] => {
    msg.textContent = "Please search for a valid city 😩";
  }];

Mẹo: Thay vì chuỗi

  

    ...
    ...
  
  ...°C
  
    
    ...
  

9S, chúng tôi có thể đã sử dụng cách tiếp cận ____ 20 & nbsp; cho yêu cầu AJAX mới hơn và dễ đọc hơn. Instead of chaining

  

    ...
    ...
  
  ...°C
  
    
    ...
  

9s, we could have used the newer and more readable

:root {
  --bg_main: #0a1f44;
  --text_light: #fff;
  --text_med: #53627c;
  --text_dark: #1e2432;
  --red: #ff1e42;
  --darkred: #c3112d;
  --orange: #ff8c00;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
}

button {
  cursor: pointer;
}
 
input {
  -webkit-appearance: none;
}
 
button,
input {
  border: none;
  background: none;
  outline: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

body {
  font: 1rem/1.3 "Roboto", sans-serif;
  background: var[--bg_main];
  color: var[--text_dark];
  padding: 50px;
}

0 approach for the AJAX request.

Ở đây, một ví dụ về dữ liệu phản hồi:

Xây dựng thành phần mục danh sách

Với yêu cầu AJAX, mỗi lần chúng tôi nhập thành phố trong trường tìm kiếm, API sẽ trả về dữ liệu thời tiết của nó, nếu chúng có sẵn. Công việc của chúng tôi bây giờ là chỉ thu thập dữ liệu mà chúng tôi cần, sau đó tạo mục danh sách liên quan và cuối cùng, nối nó vào danh sách không có thứ tự.

Ở đây, mã chịu trách nhiệm cho công việc này:

const { main, name, sys, weather } = data;
const icon = `//openweathermap.org/img/wn/${
  weather[0]["icon"]
}@2x.png`;

const li = document.createElement["li"];
li.classList.add["city"];
const markup = `
  

    ${name}
    ${sys.country}
  
  
${Math.round[main.temp]}°C
  
  
    
    ...
  

0

Công việc tuyệt vời, các bạn! Chúng tôi chỉ tạo ra phiên bản đầu tiên của ứng dụng của chúng tôi. Vào thời điểm bạn đặt khóa API của riêng mình và tìm kiếm một thành phố, bạn sẽ thấy một bố cục thẻ tương tự như cách này:

Tại đây, bản demo Codepen liên quan:

Thêm các biểu tượng thời tiết tùy chỉnh

Bây giờ, hãy để tùy chỉnh một chút & nbsp; giao diện của ứng dụng của chúng tôi. Chúng tôi sẽ thay thế các biểu tượng png opngermap mặc định bằng các SVG mà chúng tôi đã tải xuống trước đó từ các yếu tố Envato.

Để làm điều này, tôi đã tải lên tất cả các biểu tượng mới lên Codepen [thông qua Trình quản lý tài sản vì tôi là thành viên chuyên nghiệp] và thay đổi tên của chúng, vì vậy chúng sẽ khớp với tên và điều kiện thời tiết của các biểu tượng ban đầu, như thế này:

Sau đó, trong mã, chúng ta chỉ phải thay đổi đường dẫn biểu tượng:

  

    ...
    ...
  
  ...°C
  
    
    ...
  

1

Ngăn chặn các yêu cầu trùng lặp

Vẫn còn một điều chúng ta phải sửa chữa. Cho đến nay, khi chúng tôi thực hiện yêu cầu thành công & nbsp; Ajax, một mục danh sách được tạo. Điều đó nói rằng, danh sách có thể chứa & nbsp; nhiều mục giống hệt nhau & nbsp; danh sách đề cập đến cùng một thành phố, như vậy:

Đó là trải nghiệm người dùng xấu, vì vậy hãy để đảm bảo rằng chỉ có một yêu cầu duy nhất được kích hoạt cho một thành phố cụ thể. & NBSP;

Nhưng trước đó, có một điều khác để xem xét. Tên thành phố tương tự có thể tồn tại ở nhiều quốc gia. Ví dụ: nếu chúng ta tìm kiếm người tìm kiếm của Ath Athens trong công cụ tìm kiếm của OpenWeathermap, chúng ta sẽ thấy những kết quả này:

Với tất cả những điều trên, chúng tôi sẽ viết một số mã sẽ đảm bảo rằng chỉ một yêu cầu duy nhất cho mỗi thành phố, mỗi quốc gia sẽ được thực thi:

  

    ...
    ...
  
  ...°C
  
    
    ...
  

2

Hãy để tôi giải thích những hành động xảy ra ở đây:

1. Một lần nữa trong quá trình xử lý, trước khi thực hiện yêu cầu AJAX, chúng tôi kiểm tra xem danh sách chưa được đặt có trống hay không. Nếu nó không trống, điều đó có nghĩa là ít nhất một yêu cầu AJAX thành công đã được thực thi. & NBSP;
2. Tiếp theo, chúng tôi kiểm tra xem liệu có một mục danh sách, người mà tên thành phố hay giá trị của thuộc tính

   :root {
     --bg_main: #0a1f44;
     --text_light: #fff;
     --text_med: #53627c;
     --text_dark: #1e2432;
     --red: #ff1e42;
     --darkred: #c3112d;
     --orange: #ff8c00;
   }
   
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-weight: normal;
   }
   
   button {
     cursor: pointer;
   }
    
   input {
     -webkit-appearance: none;
   }
    
   button,
   input {
     border: none;
     background: none;
     outline: none;
     color: inherit;
   }
   
   img {
     display: block;
     max-width: 100%;
     height: auto;
   }
   
   ul {
     list-style: none;
   }
   
   body {
     font: 1rem/1.3 "Roboto", sans-serif;
     background: var[--bg_main];
     color: var[--text_dark];
     padding: 50px;
   }

   4 của nó bằng với giá trị trường tìm kiếm.
3. Nếu vậy, điều đó có nghĩa là người dùng đã biết thời tiết cho thành phố này, vì vậy, không cần phải thực hiện một yêu cầu AJAX khác. Là các hành động sau, chúng tôi sẽ cho họ thấy một thông điệp liên quan, xóa giá trị của trường tìm kiếm và tập trung vào nó.

Lưu ý số 1: Như tôi đã nhận thấy, trong trường hợp & nbsp; bạn tìm kiếm một thành phố với nhiều nhất hai chữ cái mà don don đại diện cho bất kỳ mã quốc gia nào [ví dụ: Athens, AA], API đã giành được bất cứ điều gì. Mặt khác, nếu bạn tìm kiếm một thành phố cùng với ít nhất ba chữ cái cũng không đại diện cho bất kỳ & nbsp; Phần đầu tiên & nbsp; [ví dụ: Athens]. As I’ve noticed, in case you search for a city with at most two-letters which don’t represent any country code [e.g. athens,aa], the API won’t return anything. On the other hand, if you search for a city along with at least three-letters which also don’t represent any country code [e.g. athens,aaaa], the API will ignore the part after the comma and return all cities named as the first part [e.g. athens].

Lưu ý #2: & nbsp; Đối với bài tập này, chúng tôi đã giành chiến thắng trong trường hợp đặc biệt & nbsp; nơi một quốc gia chứa nhiều hơn & nbsp; hơn một thành phố có cùng tên [ví dụ: Athens ở Hoa Kỳ]. Vì vậy, ví dụ, nếu người dùng tìm kiếm người dùng, chúng tôi, chỉ có một thành phố sẽ xuất hiện trong màn hình và không nhiều hơn. Để bao quát kịch bản lý tưởng, người dùng bằng cách nào đó nên biết & nbsp; id thành phố [ví dụ: có lẽ cung cấp chúng dưới dạng thả xuống] và tìm kiếm dựa trên đó thay vì tìm kiếm dựa trên tên của nó. For this exercise, we won’t also cover the special case where a country contains more than one city with the same name [e.g. Athens in USA]. So, for example, if a user searches for “athens,us” only one city will appear in the screen and not more. In order to cover the ideal scenario, users should somehow know the city ID [e.g. perhaps make them available as a dropdown] and search based on that instead of searching based on its name.

Công việc tuyệt vời, folks! Chúng tôi chỉ cần xây dựng ứng dụng của chúng tôi. Hãy để một cái nhìn:

Ứng dụng thời tiết của bạn đã sẵn sàng!

Và chúng tôi đã hoàn thành! Đây thực sự là một hành trình khá dài, nhưng tôi hy vọng rằng bạn thích nó và nó đã giúp tăng cường các kỹ năng đầu tiên của bạn.

Một lần nữa, don không quên đặt khóa của riêng bạn để kiểm tra ứng dụng trực tiếp! & NBSP;

Một lời nhắc nhở, hãy để lại nhìn lại cách ứng dụng thời tiết hoạt động:

Như mọi khi, cảm ơn rất nhiều vì đã đọc!

Bước tiếp theo

Có rất nhiều điều mà bạn có thể làm để mở rộng chức năng của ứng dụng thời tiết này. Đây là một số suy nghĩ:

• Sử dụng định vị địa lý để lấy vị trí của người dùng, sau đó thực hiện yêu cầu AJAX để lấy dữ liệu thời tiết cho các thành phố gần nhất của họ.
• Sử dụng LocalStorage để tồn tại dữ liệu trên hoặc thậm chí là cơ sở dữ liệu thời gian thực như Firebase.
• Sử dụng một thư viện biểu đồ như highcharts.js & nbsp; để xây dựng một bức tượng hình sẽ đưa ra dự báo thời tiết. Nếu bạn làm như vậy, hướng dẫn này có thể giúp đỡ.
• Sử dụng API hình ảnh như API Flickr để trình bày như một hộp đèn phòng trưng bày danh sách các bức ảnh cho mỗi thành phố.

Nếu có bất cứ điều gì khác mà bạn có thể muốn xem là một phần mở rộng ứng dụng, hãy cho tôi biết trong các bình luận bên dưới!

Phần thưởng: Nhận dữ liệu thời tiết theo thời gian thực với API Weatherstack

Được tài trợ: Kiểm tra hướng dẫn tiền thưởng này của Jeremy McPeak giải thích Weatherstack; Một nguồn dữ liệu thời tiết khác nhau cho các ứng dụng dựa trên thời tiết của bạn.: Check out this bonus tutorial by Jeremy McPeak explaining weatherstack; a different source of weather data for your weather-based applications.

Khám phá thêm các hướng dẫn và tài nguyên của JavaScript

Bây giờ bạn đã biết cách xây dựng một ứng dụng thời tiết với JavaScript và cách xây dựng một trang web thời tiết. Nếu bạn muốn khám phá thêm về JavaScript và tìm hiểu thêm về nó, thì đây là những hướng dẫn thú vị hơn: & NBSP;

API thời tiết được triển khai như thế nào trong JavaScript?

Làm thế nào để tôi có được thời tiết trong HTML?

API nào tốt nhất cho thời tiết?

API thời tiết có miễn phí không?