<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Weather Application</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
  <div class="container">
  <header class="header">
    <div class="search">
      <input type="text" placeholder="Enter City Name" id="search-txt">
      <a id="search-btn" href="#"><i class="fas fa-search"></i></a>
    </div>
  </header>
  <main id="main">
    <div class="city-icon">
      <div class="city-icon-holder">
      <div id="city-name"></div>
      <img src="" alt="" id="icon">
        </div>
    </div>
    <div class="temperature">
      <div id="temp"></div>
    </div>
    <div class="humidity">
      <div id="humidity-div"></div>
    </div>
  </main>
</div>
  <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
</body>

</html>
.container{
  width: 100%;
  height: 300px;
}

.header {
  height: 20%;
  background-color: #FF9800;
  text-align: center;
  position:relative;
}

#temp, #humidity-div {
  font-family: "Courier New";
  font-weight: bold;
  font-size: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.city-icon-holder {
  position:absolute;
  left: 25%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}

#city-name {
  font-family: "Courier New";
  font-size: 30px;
  font-weight: bold;
  color: #fff;
}

#icon {
  width:50%;
}

#main{
  width: 100%;
  height: 100%;
  position: relative;
}

.city-icon {
  height: 80%;
  width: 50%;
  background-color: black;
}

.temperature {
  position: absolute;
  left: 50%;
  top:0%;
  height: 40%;
  width: 50%;
}

.humidity {
  height: 40%;
  width: 50%;
  position:absolute;
  left:50%;
  top:40%;
}

#search-btn {
  width: 40px;
  height:40px;
  color: #eee;
}

#search-txt {
  color: red;
  height:30px;
  border-radius: 10px;
  border-style:none;
  outline:none;
  padding-right:1px;
  padding-left:1px;
  text-align:center;
}

.search {
  position: absolute;
  left: 50%;
  top:50%;
  -webkit-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
}
const appKey = "ff532977349290d86ac2bc3243a8ca5a";

var searchButton = document.getElementById("search-btn"),
  searchInput = document.getElementById("search-txt"),
  cityName = document.getElementById("city-name"),
  icon = document.getElementById("icon"),
  temperature = document.getElementById("temp"),
  humidity = document.getElementById("humidity-div");

searchButton.addEventListener("click", findWeatherDetails);
searchInput.addEventListener("keyup", enterPressed);

function enterPressed(event) {
  if (event.key === "Enter") {
    findWeatherDetails();
  }
}

function findWeatherDetails() {
  if (searchInput.value === "") {
  
  }else {
    let searchLink = "https://api.openweathermap.org/data/2.5/weather?q=" + searchInput.value + "&appid="+appKey;
   httpRequestAsync(searchLink, theResponse);
  }
 }

function theResponse(response) {
  let jsonObject = JSON.parse(response);
  cityName.innerHTML = jsonObject.name;
  icon.src = "http://openweathermap.org/img/w/" + jsonObject.weather[0].icon + ".png";
  temperature.innerHTML = parseInt(jsonObject.main.temp - 273) + "°"; //nhiet do tra ve sẽ theo do K nên chúng ta phải chuyen qua do C
  humidity.innerHTML = jsonObject.main.humidity + "%";
}

function httpRequestAsync(url, callback)
{
  var httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = () => { 
      if (httpRequest.readyState == 4 && httpRequest.status == 200)
          callback(httpRequest.responseText);
  }
  httpRequest.open("GET", url, true); 
  httpRequest.send();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.