Trong dự án này được thực hiện ở đây, bạn sẽ có thể biết nhiệt độ, tốc độ gió, điều kiện bầu trời, v.v. Đầu tiên tôi tạo một hộp chứa hộp nhập liệu. Nếu bạn nhập tên của bất kỳ thành phố nào vào hộp nhập liệu, bạn sẽ nhận được tất cả thông tin
Bạn sẽ thấy tất cả thông tin trong một hộp khác. Với sự trợ giúp của ứng dụng thời tiết đơn giản này, bạn có thể dễ dàng biết thời tiết của bất kỳ thành phố nào trên thế giới. Thiết kế này có thể dễ dàng thực hiện với sự trợ giúp của Jquery. Tuy nhiên, nếu muốn, bạn có thể dễ dàng tạo ứng dụng này bằng JavaScript thuần túy .
Chắc chắn bạn cần phải có ý tưởng cơ bản về JavaScript . Nếu bạn biết Basic JS thì bạn có thể làm nó rất dễ dàng. Bởi vì đối với người mới bắt đầu, tôi đã đưa ra giải thích từng bước đầy đủ về lý do tại sao tôi sử dụng dòng mã đó.
Ứng dụng thời tiết JavaScript
Dưới đây là bản trình diễn trực tiếp sẽ giúp bạn tìm hiểu cách thức hoạt động của dự án này [Ứng dụng thời tiết JavaScript]. Tại đây, sau khi bạn nhập tên thành phố bất kỳ, hãy nhấp vào nút gửi bên dưới, tất cả thông tin có thể được nhìn thấy trong hộp bên dưới. Tôi đã chỉ ra trong phần hướng dẫn sau đây cách bạn có thể tăng lượng thông tin nếu muốn
Xem Bút không có tiêu đề của Code Media [@codemediaweb] trên CodePen
Hi vọng demo trên đã giúp các bạn biết cách hoạt động của nó [cách tạo app thời tiết bằng HTML]. Bạn sẽ tìm thấy mã nguồn cần thiết để tạo nó trong hộp demo ở trên. Ngoài ra còn có một nút tải xuống ở cuối bài viết
Cách xây dựng ứng dụng thời tiết JavaScript
Dưới đây là hướng dẫn từng bước về cách xây dựng ứng dụng này trong thời tiết này. Trước hết, tôi đã tạo một hộp bằng một lượng HTML nhất định. Sau đó, tôi đã tạo một hộp để nhập bằng chức năng nhập liệu của HTML.
Trong hộp nhập này, bạn có thể nhập tên của bất kỳ thành phố nào. Sau đó, tôi đã tạo nút gửi có thể nhấp vào để xem tất cả thông tin. Tất cả thông tin hiển thị ở đây sẽ được thu thập với sự trợ giúp của liên kết API .
Thông tin sẽ được thu thập trước với sự trợ giúp của phương pháp tìm nạp JavaScript . Sau đó, với sự trợ giúp của InternalHTML, tất cả những thông tin đó đã được sắp xếp để hiển thị trên trang web. Đầu tiên tôi sắp xếp để hiển thị một tiêu đề nhỏ trong hộp thông tin. Nơi bạn có thể tìm thấy tên của thành phố bạn đã tìm kiếm.
Sau đó, tất cả các thông tin khác trong hộp như điều kiện bầu trời, nhiệt độ, tốc độ gió, v.v. có thể được nhìn thấy. Đầu tiên, bạn tạo một tệp HTML CSS. Sau đó làm theo hướng dẫn từng bước bên dưới. Tôi đã chia sẻ một video cho nhu cầu của bạn sẽ giúp bạn biết rõ hơn
Bước 1. Cấu trúc cơ bản của Ứng dụng thời tiết
Cấu trúc cơ bản của Ứng dụng thời tiết này đã được tạo bằng mã HTML và CSS sau. Cấu trúc này sẽ chứa tất cả các thông tin. Chiều rộng của khu vực này. 410px và lề. Auto 50px đã được sử dụng để giữ nó ở giữa
* {
lề. 0;
đệm. 0;
kích thước hộp. hộp viền;
}
thân thể{
lai lịch. #448aff;
}
container-liquid{
chiều rộng. 410px;
lề. tự động 50px;
đệm. 10px;
}
Bước 2. Tạo một địa điểm để nhập tên thành phố
Bây giờ tôi đã tạo hộp đầu tiên chứa không gian và các nút để nhập liệu. Đầu tiên tôi nhờ sự trợ giúp của hai chức năng đầu vào. Đầu vào đầu tiên sẽ giúp nhập tên của thành phố. Đầu vào thứ hai sẽ giúp tạo nút gửi
Không có kích thước cụ thể của hộp được chỉ định ở đây. Nó sẽ xác định kích thước của chính nó dựa trên kích thước của hộp nhập liệu. Tuy nhiên, đệm. 2rem 0 2rem 0 đã được sử dụng để giữ một số khoảng trống và màu nền trắng đã được sử dụng
đầu vào {
đệm. 2rem 0 2rem 0;
căn chỉnh văn bản. trung tâm;
biện minh cho nội dung. trung tâm;
lai lịch. trắng;
}
Bây giờ tôi đã thiết kế một nơi để nhập văn bản. Đường viền 2 pixel đã được sử dụng xung quanh chiều rộng không gian đầu vào. 20rem và chiều cao. 3. 5rem
đầu vào input[type="text"] {
Chiều cao. 3. 5rem;
chiều rộng. 20rem;
lai lịch. #212121;
trọng lượng phông chữ. in đậm;
cỡ chữ. 1. 1rem;
đệm. 10px;
ranh giới. không ai;
màu nền. trong suốt;
ranh giới. 2px cố định #c2c2c2;
bán kính đường viền. 2px;
lề phải. 4px ;
}
Bây giờ tôi đã thiết kế xong nút gửi. Tôi đã tạo một hộp nhập liệu cho nút này. Bây giờ các mã sau đây đã giúp thiết kế nó. Chiều cao. 3. 2rem , chiều rộng. 6. 5rem và màu nền xanh lam được sử dụng.
đầu vào đầu vào [loại = "gửi"] {
Chiều cao. 3. 2rem;
chiều rộng. 6. 5rem;
lai lịch. #0a67ca;
trọng lượng phông chữ. in đậm;
màu. trắng;
cỡ chữ. 1. 2rem;
lề trên. 20px;
ranh giới. không ai;
bán kính đường viền. 2px;
}
Bước 3. Tạo màn hình để xem thời tiết
Bây giờ tôi đã tạo hộp thứ hai. Trong đó tất cả các thông tin có thể được tìm thấy. Về cơ bản nó sẽ hoạt động như một màn hình. Bất cứ khi nào bạn nhập tên của thành phố bạn chọn vào ô nhập liệu, tất cả thông tin có thể được tìm thấy trong ô này.
Đầu tiên, trong hộp này, tôi sắp xếp để hiển thị một tiêu đề. Nơi bạn có thể thấy tên của đầu vào thành phố. Sau đó, tôi đã sử dụng ba đoạn văn có thể tìm thấy thông tin liên quan đến thời tiết
Chiều rộng của màn hình này là 400px, chiều cao. 45vh và màu nền là màu trắng. Lề. Tự động 50px được sử dụng để giữ hộp này cách xa hộp nhập liệu một chút
trưng bày {
căn chỉnh văn bản. trung tâm;
chiều rộng. 400px;
màu. #16a864;
}
vỏ bánh {
lề. 0 9rem;
màu nền. trắng;
Chiều cao. 45vh;
lề. tự động 50px;
bán kính đường viền. 2px;
}
Bây giờ tôi đang thêm mã CSS cần thiết cho tất cả thông tin văn bản trong hộp. Tất cả thông tin này không còn nữa. Tất cả nội dung có thể được xem sau khi sử dụng mã JavaScript
trình bao bọc h2{
đệm. 5px 0;
căn chỉnh văn bản. trung tâm;
lai lịch. #0548b5;
màu. trắng;
họ phông chữ. sans serif;
}
. trình bao bọc p{
lề. 20px 50px;
lề phải. 20px;
căn chỉnh văn bản. trái;
màu. #04214c;
cỡ chữ. 23px;
}
. trình bao bọc h2 span{
cỡ chữ. 26px;
màu. #9thịt bòb;
}
. trình bao bọc p span{
màu. #90006e;
cỡ chữ. 25px;
}
Bước 4. Kích hoạt ứng dụng thời tiết đơn giản bằng JavaScript
Ở trên, tôi đã sử dụng mã HTML và CSS cần thiết để tạo ứng dụng Thời tiết JavaScript này. Bây giờ bạn cần kích hoạt nó bằng JavaScript. Bạn cần kích hoạt JavaScript để xem nó để làm cho nó hoạt động.
Tôi sử dụng đoạn mã sau để xác định hằng số của một trong các hàm ID bắt buộc. Bởi vì tôi không thể sử dụng trực tiếp bất kỳ ID hoặc hàm lớp nào trong JavaScript.
var inputval = tài liệu. querySelector['#cityinput']
var btn = tài liệu. querySelector['#add'];
thành phố var = tài liệu. querySelector['#cityoutput']
var mô tả = tài liệu. querySelector['#description']
var temp = tài liệu. querySelector['#temp']
var gió = tài liệu. querySelector['#wind']
Bây giờ tôi đã cung cấp id của liên kết API. Id này là khác nhau cho tất cả mọi người. Bạn sẽ nhận được loại id API này khi tạo tài khoản. Tuy nhiên, bạn có thể sử dụng id này
apik="3045dd712ffe6e702e3245525ac7fa38"
Bây giờ với sự trợ giúp của các mã sau, tôi đã chuyển đổi nhiệt độ từ độ Kelvin sang độ C. Chúng ta biết rằng 1 Kelvin bằng -273 độ C .
chuyển đổi chức năng [val] {
trả lại [val - 273]. toFixed[2]
}
Dưới đây tôi đã đưa ra tất cả các tính toán về cách triển khai Ứng dụng thời tiết đơn giản này. Các tính toán sau đây sẽ hoạt động khi bạn nhấp vào nút gửi
➤ Trước tiên, chúng tôi đã thu thập được tất cả thông tin từ liên kết API với sự trợ giúp của phương thức tìm nạp.
➤ Sau đó, tôi thu thập thông tin cần thiết từ liên kết API và lưu trữ thông tin đó trong các hằng số khác nhau.
Sau đó, sử dụng "innerHTML" tất cả thông tin đã được sắp xếp để hiển thị trên trang web
➤ Tôi đã sắp xếp để hiển thị thông báo cảnh báo . Nếu tính toán trên không hoạt động, thì thông báo cảnh báo đó có thể được nhìn thấy.
➤ Nếu bạn không nhập gì vào ô nhập liệu hoặc nhập sai tên thành phố thì các phép tính đó sẽ không hoạt động. Kết quả là, thông báo có thể được nhìn thấy.
// Bây giờ chúng ta phải thu thập tất cả thông tin với sự trợ giúp của phương thức tìm nạp
btn. addEventListener['click', function[]{
// Đây là liên kết api từ đó tất cả thông tin sẽ được thu thập
tìm nạp ['https. //api. bản đồ thời tiết mở. tổ chức/dữ liệu/2. 5/thời tiết?q='+inputval. value+'&appid='+apik]
. sau đó [res => res. json[]]
//. sau đó [dữ liệu => bảng điều khiển. nhật ký [dữ liệu]]
. sau đó [dữ liệu => {
//Bây giờ bạn cần thu thập thông tin cần thiết với liên kết API. Bây giờ tôi sẽ thu thập thông tin đó và lưu trữ nó trong các hằng số khác nhau
var nameval = dữ liệu['tên']
var descrip = data['thời tiết']['0']['mô tả']
var nhiệt độ = data['main']['temp']
var wndspd = data['gió']['tốc độ']
// Bây giờ với sự trợ giúp của InternalHTML, bạn phải sắp xếp để hiển thị tất cả thông tin trong trang web
city.innerHTML=`Weather of ${nameval}`
temp.innerHTML = `Temperature: ${ convertion[tempature]} C`
description.innerHTML = `Sky Conditions: ${descrip}`
wind.innerHTML = `Wind Speed: ${wndspd} km/h`
}]
// Bây giờ phải thêm điều kiện là nếu bạn không nhập gì vào ô nhập liệu thì sao
. catch[err => alert['Bạn đã nhập sai tên thành phố']]
}]
//Nếu bạn bấm vào nút gửi mà không nhập bất cứ thứ gì vào hộp nhập liệu hoặc nhập sai tên thành phố thì có thể nhìn thấy văn bản trên
Hy vọng rằng từ hướng dẫn trên, bạn đã dễ dàng học được cách tôi tạo ứng dụng Thời tiết JavaScript đơn giản này. Nếu bạn có bất kỳ vấn đề nào trong việc hiểu, bạn có thể nhờ sự trợ giúp của video hướng dẫn ở trên
Chúng tôi hy vọng bạn tìm ra từ bài viết này câu hỏi mà bạn đang nghĩ đến [cách tạo ứng dụng thời tiết bằng HTML]. Dưới đây là mã nguồn cần thiết để xây dựng ứng dụng thời tiết này mà bạn có thể dễ dàng tải về