Mẹo nhỏ: Để tìm kiếm chính xác các chia sẻ của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: tắt update windows f4vnn). Tìm kiếm ngay

Cách xây dựng ứng dụng thời tiết bằng HTML CSS và JS cho WordPress

Ứng dụng thời tiết bằng HTML CSS và JS cho WordPress – Chỉ với HTML, CSS và JavaScript, bạn có thể tạo một ứng dụng không chỉ cải thiện khả năng phát triển web của mình mà còn giúp bạn làm quen với các lệnh gọi API JavaScript. Trong bài đăng trên blog này, tôi sẽ hướng dẫn bạn xây dựng dự án ứng dụng thời tiết bằng cách sử dụng HTML, CSS và JavaScript từ đầu. Dự án thời tiết này có một số tính năng bổ sung giúp nó hữu ích hơn.

Cách xây dựng ứng dụng thời tiết bằng HTML CSS và JS cho WordPress

Cách xây dựng ứng dụng thời tiết bằng HTML CSS và JS cho WordPress

Trong dự án xây dựng ứng dụng thời tiết bằng HTML CSS và JS cho WordPress này, người dùng có thể nhập bất kỳ tên thành phố nào để nhận dự báo thời tiết trong 5 ngày hoặc chỉ cần nhấp vào nút “Sử dụng vị trí hiện tại” để nhận thông tin chi tiết về thời tiết ở vị trí hiện tại của họ, bao gồm nhiệt độ, tốc độ gió, độ ẩm, v.v.

Có thể bạn quan tâm: Hiển thị list category by parent category

1] Tạo custom page

Truy cập vào hosting và tạo weather.php và chèn đoạn code sau vào nó

Chú ý: cách hiển thị thì các tùy chọn theo ý của bạn nhé

<h1 class="dubao h5 text-uppercase">Dự báo thời tiết 5 ngày tới</h1>
  <div class="containe">
    <div class="weather-input">
      <h3>Tên Tỉnh/Thành Phố</h3>
      <input class="city-input" type="text" placeholder="Vd: Hà Nội, Nam Định,...">
      <button class="search-btn">Search</button>
      <div class="separator"></div>
      <button class="location-btn">Sử dụng vị trí hiện tại</button>
    </div>
    <div class="weather-data">
      <div class="current-weather">
        <div class="details">
          <h2>_______ ( ______ )</h2>
          <h6>Nhiệt độ: __°C</h6>
          <h6>Tốc độ gió: __ M/S</h6>
          <h6>Độ ẩm: __%</h6>
        </div>
      </div>
      <div class="days-forecast">
        <h2>Dự báo 5 ngày</h2>
        <ul class="weather-cards">
          <li class="card mb-4">
            <h3>( ______ )</h3>
            <h6>Nhiệt độ: __C</h6>
            <h6>Tốc độ gió: __ M/S</h6>
            <h6>Độ ẩm: __%</h6>
          </li>
          <li class="card mb-4">
            <h3>( ______ )</h3>
            <h6>Nhiệt độ: __C</h6>
            <h6>Tốc độ gió: __ M/S</h6>
            <h6>Độ ẩm: __%</h6>
          </li>
          <li class="card mb-4">
            <h3>( ______ )</h3>
            <h6>Nhiệt độ: __C</h6>
            <h6>Tốc độ gió: __ M/S</h6>
            <h6>Độ ẩm: __%</h6>
          </li>
          <li class="card mb-4">
            <h3>( ______ )</h3>
            <h6>Nhiệt độ: __C</h6>
            <h6>Tốc độ gió: __ M/S</h6>
            <h6>Độ ẩm: __%</h6>
          </li>
          <li class="card mb-4">
            <h3>( ______ )</h3>
            <h6>Nhiệt độ: __C</h6>
            <h6>Tốc độ gió: __ M/S</h6>
            <h6>Độ ẩm: __%</h6>
          </li>
        </ul>
      </div>
    </div>
  </div>

2] Hiển thị custom page

Tiếp theo phần xây dựng ứng dụng thời tiết bằng HTML CSS và JS cho WordPress các bạn vào phần Trang trong quản trị và tạo một trang theo tên tùy ý. Bạn để ý phần giao diện cột bên phải chọn weather.php bạn vừa tạo bước trên nhé.

3] Thêm CSS

Khi xây dựng ứng dụng thời tiết bằng HTML CSS và JS cho WordPress chúng ta cần CSS để tạo giao diện cho ứng dụng.

xay dung ung dung thoi tiet bang html css js 1
/* Import Google font - Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
body {
  background: #E3F2FD;
}
h1 {
  background: #5372F0;
  font-size: 1.75rem;
  text-align: center;
  padding: 18px 0;
  color: #fff;
}
.container {
  display: flex;
  gap: 35px;
  padding: 30px;
}
.weather-input {
  width: 550px;
}
.weather-input input {
  height: 46px;
  width: 100%;
  outline: none;
  font-size: 1.07rem;
  padding: 0 17px;
  margin: 10px 0 20px 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.weather-input input:focus {
  padding: 0 16px;
  border: 2px solid #5372F0;
}
.weather-input .separator {
  height: 1px;
  width: 100%;
  margin: 25px 0;
  background: #BBBBBB;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weather-input .separator::before{
  content: "or";
  color: #6C757D;
  font-size: 1.18rem;
  padding: 0 15px;
  margin-top: -4px;
  background: #E3F2FD;
}
.weather-input button {
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  color: #fff;
  background: #5372F0;
  transition: 0.2s ease;
}
.weather-input .search-btn:hover {
  background: #2c52ed;
}
.weather-input .location-btn {
  background: #6C757D;
}
.weather-input .location-btn:hover {
  background: #5c636a;
}
.weather-data {
  width: 100%;
}
.weather-data .current-weather {
  color: #fff;
  background: #5372F0;
  border-radius: 5px;
  padding: 20px 70px 20px 20px;
  display: flex;
  justify-content: space-between;
}
.current-weather h2 {
  font-weight: 700;
  font-size: 1.7rem;
}
.weather-data h6 {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 500;
}
.current-weather .icon {
  text-align: center;
}
.current-weather .icon img {
  max-width: 120px;
  margin-top: -15px;
}
.current-weather .icon h6 {
  margin-top: -10px;
  text-transform: capitalize;
}
.days-forecast h2 {
  margin: 20px 0;
  font-size: 1.5rem;
}
.days-forecast .weather-cards {
  display: flex;
  gap: 20px;
}
.weather-cards .card {
  color: #fff;
  padding: 18px 16px;
  list-style: none;
  width: calc(100% / 5);
  background: #6C757D;
  border-radius: 5px;
}
.weather-cards .card h3 {
  font-size: 1.3rem;
  font-weight: 600;
}
.weather-cards .card img {
  max-width: 70px;
  margin: 5px 0 -12px 0;
}

@media (max-width: 1400px) {
  .weather-data .current-weather {
    padding: 20px;
  }
  .weather-cards {
    flex-wrap: wrap;
  }
  .weather-cards .card {
    width: calc(100% / 4 - 15px);
  }
}
@media (max-width: 1200px) {
  .weather-cards .card {
    width: calc(100% / 3 - 15px);
  }
}
@media (max-width: 950px) {
  .weather-input {
    width: 450px;
  }
  .weather-cards .card {
    width: calc(100% / 2 - 10px);
  }
}
@media (max-width: 750px) {
  h1 {
    font-size: 1.45rem;
    padding: 16px 0;
  }
  .container {
    flex-wrap: wrap;
    padding: 15px;
  }
  .weather-input {
    width: 100%;
  }
  .weather-data h2 {
    font-size: 1.35rem;
  }
}

4] Thêm JS và API

Đoạn code dưới đây là JS của ứng dụng thời tiết bằng HTML CSS và JS cho WordPress

const cityInput = document.querySelector(".city-input");
const searchButton = document.querySelector(".search-btn");
const locationButton = document.querySelector(".location-btn");
const currentWeatherDiv = document.querySelector(".current-weather");
const weatherCardsDiv = document.querySelector(".weather-cards");

const API_KEY = "YOUR-API-KEY-HERE"; // API key for OpenWeatherMap API

const createWeatherCard = (cityName, weatherItem, index) => {
    if(index === 0) { // HTML for the main weather card
        return `<div class="details">
                    <h2>${cityName} (${weatherItem.dt_txt.split(" ")[0]})</h2>
                    <h6>Temperature: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C</h6>
                    <h6>Wind: ${weatherItem.wind.speed} M/S</h6>
                    <h6>Humidity: ${weatherItem.main.humidity}%</h6>
                </div>
                <div class="icon">
                    <img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather-icon">
                    <h6>${weatherItem.weather[0].description}</h6>
                </div>`;
    } else { // HTML for the other five day forecast card
        return `<li class="card">
                    <h3>(${weatherItem.dt_txt.split(" ")[0]})</h3>
                    <img src="https://openweathermap.org/img/wn/${weatherItem.weather[0].icon}@4x.png" alt="weather-icon">
                    <h6>Temp: ${(weatherItem.main.temp - 273.15).toFixed(2)}°C</h6>
                    <h6>Wind: ${weatherItem.wind.speed} M/S</h6>
                    <h6>Humidity: ${weatherItem.main.humidity}%</h6>
                </li>`;
    }
}

const getWeatherDetails = (cityName, latitude, longitude) => {
    const WEATHER_API_URL = `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`;

    fetch(WEATHER_API_URL).then(response => response.json()).then(data => {
        // Filter the forecasts to get only one forecast per day
        const uniqueForecastDays = [];
        const fiveDaysForecast = data.list.filter(forecast => {
            const forecastDate = new Date(forecast.dt_txt).getDate();
            if (!uniqueForecastDays.includes(forecastDate)) {
                return uniqueForecastDays.push(forecastDate);
            }
        });

        // Clearing previous weather data
        cityInput.value = "";
        currentWeatherDiv.innerHTML = "";
        weatherCardsDiv.innerHTML = "";

        // Creating weather cards and adding them to the DOM
        fiveDaysForecast.forEach((weatherItem, index) => {
            const html = createWeatherCard(cityName, weatherItem, index);
            if (index === 0) {
                currentWeatherDiv.insertAdjacentHTML("beforeend", html);
            } else {
                weatherCardsDiv.insertAdjacentHTML("beforeend", html);
            }
        });        
    }).catch(() => {
        alert("An error occurred while fetching the weather forecast!");
    });
}

const getCityCoordinates = () => {
    const cityName = cityInput.value.trim();
    if (cityName === "") return;
    const API_URL = `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${API_KEY}`;
    
    // Get entered city coordinates (latitude, longitude, and name) from the API response
    fetch(API_URL).then(response => response.json()).then(data => {
        if (!data.length) return alert(`No coordinates found for ${cityName}`);
        const { lat, lon, name } = data[0];
        getWeatherDetails(name, lat, lon);
    }).catch(() => {
        alert("An error occurred while fetching the coordinates!");
    });
}

const getUserCoordinates = () => {
    navigator.geolocation.getCurrentPosition(
        position => {
            const { latitude, longitude } = position.coords; // Get coordinates of user location
            // Get city name from coordinates using reverse geocoding API
            const API_URL = `https://api.openweathermap.org/geo/1.0/reverse?lat=${latitude}&lon=${longitude}&limit=1&appid=${API_KEY}`;
            fetch(API_URL).then(response => response.json()).then(data => {
                const { name } = data[0];
                getWeatherDetails(name, latitude, longitude);
            }).catch(() => {
                alert("An error occurred while fetching the city name!");
            });
        },
        error => { // Show alert if user denied the location permission
            if (error.code === error.PERMISSION_DENIED) {
                alert("Geolocation request denied. Please reset location permission to grant access again.");
            } else {
                alert("Geolocation request error. Please reset location permission.");
            }
        });
}

locationButton.addEventListener("click", getUserCoordinates);
searchButton.addEventListener("click", getCityCoordinates);
cityInput.addEventListener("keyup", e => e.key === "Enter" && getCityCoordinates());

Bạn để ý dòng const API_KEY = “YOUR-API-KEY-HERE”; // API key for OpenWeatherMap API dòng thứ 6 từ trên xuống thay YOUR-API-KEY-HERE bằng API của OpenWeather nó có bản miễn phí và trả phí

Kết luận

Chỉ có thế thôi hãy test thôi nào. Trên đây là cách xây dựng ứng dụng thời tiết bằng HTML CSS và JS cho WordPress mà bạn có thể tham khảo. Hy vọng với chia sẻ của Blog thủ thuật máy tính f4vnn sẽ có ích với bạn, chúc bạn thành công.

Theo dõi trên

Logo Google new
5/5 - (1 bình chọn)