fredriccliver · August 23, 2021 17:21
diff --git a/async_weather.html b/async_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-1555588746-13edde80e4a1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&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 = "[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", (event) => {
        if (event.key == "Enter") {
          var keyword = event.target.value

          // pattern 1. cannot get result
          // retrieveWeatherData(keyword)

          // pattern 2. get promise and available to handle result
          /*
          retrieveWeatherData_promise(keyword).then(result => {
            displayData(result)
          }).catch((error) => {

          })
          */

          // pattern 3. Async, Await
          retrieveWeatherData_async(keyword)

        }
      })

      var retrieveWeatherData = (city) => {
        fetch(destinationUrl(city))
          .then((response) => response.json())
          .then((data) => {
            console.log(data)
            displayData(data)
          })
      }

      var retrieveWeatherData_promise = (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 retrieveWeatherData_async = async (keyword) => {
        var result = await retrieveWeatherData_promise(keyword)
        displayData(result)
      }


      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-1555588746-13edde80e4a1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&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 = "[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", (event) => {
	if (event.key == "Enter") {
	var keyword = event.target.value

	// pattern 1. cannot get result
	// retrieveWeatherData(keyword)

	// pattern 2. get promise and available to handle result
	/*
	retrieveWeatherData_promise(keyword).then(result => {
	displayData(result)
	}).catch((error) => {

	})
	*/

	// pattern 3. Async, Await
	retrieveWeatherData_async(keyword)

	}
	})

	var retrieveWeatherData = (city) => {
	fetch(destinationUrl(city))
	.then((response) => response.json())
	.then((data) => {
	console.log(data)
	displayData(data)
	})
	}

	var retrieveWeatherData_promise = (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 retrieveWeatherData_async = async (keyword) => {
	var result = await retrieveWeatherData_promise(keyword)
	displayData(result)
	}


	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>