<body>
  <div class="card">

    <div class="search">
      <input type="text" class="searchbar" placeholder="Search location">
      <button class="btn"><svg fill="white" viewBox="0 0 512 512" width="1.2em" height="1.2em" title="search">
        <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" />
      </svg></button>
    </div>

    <div class="weather loading">
      <h2 class="city">Weather in Miami</h2>
      <h1 class="temp">52°</h1>
      <div class="flex">
        <img src="https://openweathermap.org/img/wn/04d@2x.png" alt="weather icon" class="icon" />
        <div class="description">Cloudy</div>
      </div>
      <div class="humidity">Humidity: 60%</div>
      <div class="wind"> Wind: 6mph NW</div>
    </div>
    
  </div>
</body>

body {
  font-family: 'Inter', sans;
  font-weight: 300;
  font-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height:80vh;
  margin: 0;
  background: #b6b7b8;
  background-image: url('https://source.unsplash.com/1600x900/?landscape');
}

.card {
  background: rgba(6,7,8,0.9);
  color: #fff;
  padding: 2em;
  border-radius: 24px;
  width: 100%;
  max-width: 460px;
  margin: 1em;
}

.search {
  display: flex;
  justify-content: center;
  align-items: center;
}

input.searchbar {
  border: none;
  padding: .7em 1em;
  border-radius: 8px;
  outline: none;
  background: #363738;
  color: #fff;
  font-family: inherit, sans;
  width: 100%;
}

.btn {
  margin: 0.5em;
  border-radius: 8px;
  border: none;
  outline: none;
  width: 4em;
  height: 2.5em;
  background: #363738;
  color: #fff;
}
.btn:hover {
  background: #565758;
  cursor: pointer;
  transition: 0.25s ease-in-out;
}

h1.temp {
  margin: 0;
  margin-bottom: 0.25em;
  font-size: 300%;
}

.description {
  text-transform: capitalize;
  margin-left: 4px;
}

.flex {
  display: flex;
  align-items: center;
}

.icon {
  height: 100%;
  max-height: 36px;
}

.weather.loading {
  visibility: hidden;
  max-height: 16px;
  position: relative;
}

.weather.loading:after {
  visibility: visible;
  content: "Search a city to get the weather";
  color: #fff;
  position: absolute;
  top: 0;
  left: 4px;
}
let weather = {
  apiKey: "ddbb51661845990bcf9325393fb67001",
  fetchWeather: function(city) {
    fetch (
           "https://api.openweathermap.org/data/2.5/weather?q=" 
           + city
           + "&units=imperial&appid="
           + this.apiKey
          )
      .then((response) => 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;
      console.log(name, icon, description, temp, humidity, speed);
      document.querySelector(".city").innerText = "Weather in " + name;
      document.querySelector(".icon").src = "https://openweathermap.org/img/wn/" + icon + "@2x.png";
      document.querySelector(".description").innerText = description;
      document.querySelector(".temp").innerText = temp + "°F";
      document.querySelector(".humidity").innerText = "Humidity: " + humidity + "%";
      document.querySelector(".wind").innerText = "Wind: " + speed + "mph";
      document.querySelector(".weather").classList.remove("loading");
      document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + name + "')"
    },
  search: function() {
    this.fetchWeather(document.querySelector(".searchbar").value);
  },
};

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

document.querySelector(".search").addEventListener("keyup", function (event) {
  if (event.key == "Enter") {  
  weather.search();
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.