fredriccliver/weather.html

## weather.html
<html>
  <head>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="">
      <img
        class="absolute w-screen h-screen object-cover"
        src="https://images.unsplash.com/photo-1587736891536-beb1e48bb22b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2669&q=80"
        alt=""
      />
      <div class="absolute w-screen h-screen bg-black bg-opacity-25"></div>
    </div>

    <div class="absolute w-full pt-28 text-center">
      <input
        id="search_box"
        class="text-center w-80 p-4 rounded-full opacity-80 outline-none"
        type="text"
        placeholder="Input a city name"
      />

      <div id="result_box" class="text-white mt-20 text-7xl font-serif hidden">
        <p id="cityname_box" class="text-3xl italic opacity-80">London</p>
        <p id="status_box" class="mt-8 font-extrabold">Heavy Rain</p>
        <p id="temperature_box" class="mt-8 text-4xl font-bold">14℃</p>
      </div>
    </div>

    <script>
      // https://home.openweathermap.org/api_keys
      // Don't publish this key in public space.
      var weatherApiKey = "API KEY"
      var destinationUrl = (cityName) => {
        return `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${weatherApiKey}`
      }

      var searchBox = document.querySelector("#search_box")

      searchBox.addEventListener("keypress", async (event) => {
        if (event.key == "Enter") {
          var keyword = event.target.value

          let result = await retrieveWeatherData(keyword)
          displayData(result)
        }
      })

      var retrieveWeatherData = (city) => {
        return new Promise((resolve, reject) => {
          fetch(destinationUrl(city))
            .then((response) => response.json())
            .then((data) => {
              console.log(data)
              resolve(data)
            })
            .catch((error) => {
              reject(error)
            })
        })
      }

      var displayData = (data) => {
        var resultBox = document.querySelector("#result_box")
        var citynameBox = document.querySelector("#cityname_box")
        var statusBox = document.querySelector("#status_box")
        var temperatureBox = document.querySelector("#temperature_box")

        resultBox.classList.remove("hidden")
        citynameBox.innerHTML = data.name
        statusBox.innerHTML = data.weather[0].main
        temperatureBox.innerHTML = `${temparatureRoundUp(
          data.main.temp - 273.15
        )}℃`
        searchBox.value = ""

        // TODO: change background image with transition effect
      }

      function temparatureRoundUp(temp) {
        return Math.round(temp * 10) / 10
      }

    </script>
  </body>
</html>
	<html>
	<head>
	<link
	href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
	rel="stylesheet"
	/>
	</head>
	<body>
	<div class="">
	<img
	class="absolute w-screen h-screen object-cover"
	src="https://images.unsplash.com/photo-1587736891536-beb1e48bb22b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2669&q=80"
	alt=""
	/>
	<div class="absolute w-screen h-screen bg-black bg-opacity-25"></div>
	</div>

	<div class="absolute w-full pt-28 text-center">
	<input
	id="search_box"
	class="text-center w-80 p-4 rounded-full opacity-80 outline-none"
	type="text"
	placeholder="Input a city name"
	/>

	<div id="result_box" class="text-white mt-20 text-7xl font-serif hidden">
	<p id="cityname_box" class="text-3xl italic opacity-80">London</p>
	<p id="status_box" class="mt-8 font-extrabold">Heavy Rain</p>
	<p id="temperature_box" class="mt-8 text-4xl font-bold">14℃</p>
	</div>
	</div>

	<script>
	// https://home.openweathermap.org/api_keys
	// Don't publish this key in public space.
	var weatherApiKey = "API KEY"
	var destinationUrl = (cityName) => {
	return `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${weatherApiKey}`
	}

	var searchBox = document.querySelector("#search_box")

	searchBox.addEventListener("keypress", async (event) => {
	if (event.key == "Enter") {
	var keyword = event.target.value

	let result = await retrieveWeatherData(keyword)
	displayData(result)
	}
	})

	var retrieveWeatherData = (city) => {
	return new Promise((resolve, reject) => {
	fetch(destinationUrl(city))
	.then((response) => response.json())
	.then((data) => {
	console.log(data)
	resolve(data)
	})
	.catch((error) => {
	reject(error)
	})
	})
	}

	var displayData = (data) => {
	var resultBox = document.querySelector("#result_box")
	var citynameBox = document.querySelector("#cityname_box")
	var statusBox = document.querySelector("#status_box")
	var temperatureBox = document.querySelector("#temperature_box")

	resultBox.classList.remove("hidden")
	citynameBox.innerHTML = data.name
	statusBox.innerHTML = data.weather[0].main
	temperatureBox.innerHTML = `${temparatureRoundUp(
	data.main.temp - 273.15
	)}℃`
	searchBox.value = ""

	// TODO: change background image with transition effect
	}

	function temparatureRoundUp(temp) {
	return Math.round(temp * 10) / 10
	}

	</script>
	</body>
	</html>