Code tạo hộp hiển thị thời tiết trên website bằng API Openweathermap

<div class="thoitiet">
	<div class="searchtiet" style="display:flex;margin-bottom:20px;">
      <input type="text" class="search-bar" id="otiet" placeholder="Tìm kiếm địa điểm">
      <button id="timtiet">Tìm</button>
	</div>
	<div class="weather loading">
      <div class="city"></div>
      <div class="temp"></div>
      <div class="bgmain">
        <img class="may" src="https://openweathermap.org/img/wn/04n.png" alt="" />
        <span class="description"></span>
      </div>
      <div class="bgfor">
      	<span class="humidity"></span>
     	<span class="wind"></span>
      </div>
	</div>
</div>
  
<style>
.thoitiet{
background-color:#333;
background-image: url(https://foxtheme.net/wp-content/uploads/2023/10/anh-thoi-tiet-demo.png);
background-size: cover;
padding:20px;
color:#fff;
border-radius:10px;
font-family:arial;
font-size:18px;
}
#otiet{
background:#ffffffab;
padding:10px;
width:100%;
border:none;
height:40px;
border-radius: 7px 0px 0px 7px;
}
#timtiet{
background:#a10000;
font-weight:bold;
border:none;
color:#fff;
height:40px;
width:80px;
border-radius: 0px 7px 7px 0px;
}
.city{
font-size:25px;
margin-bottom:10px;
}
.temp{
font-size:50px;
font-weight:bold;
color:#fff444;
}
.bgmain{
display:flex;
align-items: center;
}
.bgfor{
background:#9d000082;
padding:20px;
border-radius:7px;
border:1px solid #910000;
}
.bgfor span{
display:block;
}
</style>
  
<script>
let weather = {
  apiKey: "062d92a2646152d39eb7845a608226cb",   // Nhập key lấy từ openweathermap.org
  fetchWeather: function (city) {
    fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=" +
        city +
        "&lang=vi&units=metric&appid=" +
        this.apiKey
    )
      .then((response) => {
        if (!response.ok) {
          throw new Error("Không có địa điểm");
        }
        return response.json();
      })
      .then((data) => this.displayWeather(data));
  },
  displayWeather: function (data) {
    const { name } = data;
    const { icon, description } = data.weather[0];
    const { temp, humidity } = data.main;
    const { speed } = data.wind;
	const { country } = data.sys;
    document.querySelector(".city").innerText = name + " , " + country;
    document.querySelector(".may").src = "https://openweathermap.org/img/wn/" + icon + ".png";
    document.querySelector(".description").innerText = description;
    document.querySelector(".temp").innerText = temp + "°C";
    document.querySelector(".humidity").innerText =
      "Độ ẩm: " + humidity + "%";
    document.querySelector(".wind").innerText =
      "Gió: " + speed + " km/h";
  },
  search: function () {
    this.fetchWeather(document.querySelector(".search-bar").value);
  },
};

document.querySelector(".searchtiet button").addEventListener("click", function () {
  weather.search();
});

document
  .querySelector(".search-bar")
  .addEventListener("keyup", function (event) {
    if (event.key == "Enter") {
      weather.search();
    }
  });
weather.fetchWeather("ha noi");
</script>

document.querySelector(".searchtiet button").addEventListener("click", function () {
  weather.search();
});

document
  .querySelector(".search-bar")
  .addEventListener("keyup", function (event) {
    if (event.key == "Enter") {
      weather.search();
    }
  });
weather.fetchWeather("ha noi");
</script>