Pull in current weather from Weather.gov and display font awesome icons with Javascript/jQuery and Bootstrap

index.html

  <div class="d-flex align-items-center" id="weatherBox">
      <div><div class="fa-3x"><span class="condition"></span> <span class="temp"></span></div></div>
      <div class="ml-3">
        <strong class="conditiontext"></strong><br>
        <small>Wind: <span class="conditionwind"></span></small>
      </div>
  </div>

index.js

	<script>
		var x = document.getElementById("weatherBox");

		function showPosition() {
		cityForecast =
			"https://api.weather.gov/gridpoints/TBW/58,92/forecast/hourly";
		//   Use cityForecast in the get below if you want to use a specific LONG and LAT.

			jQuery.get(cityForecast, function(data, status) {
				// $.get(userForecast, function(data, status) {
				const periods = data.properties.periods[0];

				//  time is the start time of the update in Zulu time
				const time = periods.startTime;

				// findTime determines if the update is before or after 7PM (roughly dusk)
				let findTime = time.split(":")[0];
				findTime = findTime.substring(11, findTime.length + 2);

				//     Find the current temp
				const currentTemp = periods.temperature + "°";

				//     shortForecast is the quick summary of the conditions to expect
				let conditions = periods.shortForecast;
				let conditionswind = periods.windSpeed + " " + periods.windDirection;
				let conditionsResult;

				// The if/else code block below looks for keywords and then applies FontAwesome icons to associated keywords. Using indexOf because you can't tell when weather.gov will use 'Light showers' compared to 'Scattered showers', etc... So if the short forecast contains a keyword, the code applies to the conditions variable
				if (conditions.indexOf("Sunny") > -1) {
				conditionsResult = '<i class="fas fa-sun"></i>';
				} else if (conditions.indexOf("Cloudy") > -1) {
				conditionsResult = '<i class="fas fa-cloud"></i>';
				} else if (
				conditions.indexOf("Thunderstorms") > -1 ||
				conditions.indexOf("T-storms") > -1
				) {
				conditionsResult = '<i class="fas fa-cloud-showers-heavy"></i>';
				} else if (
				conditions.indexOf("Showers") > -1 ||
				conditions.indexOf("Rain") > -1
				) {
				conditionsResult = '<i class="fas fa-umbrella"></i>';
				} else if (conditions.indexOf("Snow") > -1) {
				conditionsResult = '<i class="fas fa-snowflake"></i>';
				} else if (conditions.indexOf("Clear") > -1 && findTime >= 6) {
				conditionsResult = '<i class="fas fa-sun"></i>';
				} else if (conditions.indexOf("Clear") > -1 && findTime <= 18) {
				conditionsResult = '<i class="fas fa-moon"></i>';
				} else if (conditions.indexOf("Overcast") > -1) {
				conditionsResult = '<i class="fas fa-cloud-sun"></i>';
				} else {
				conditionsResult = '<i class="fas fa-cloud"></i>';
				}

				//     Print the temp and conditions icon
				jQuery(".temp").html(currentTemp);
				jQuery(".condition").html(conditionsResult);
				jQuery(".conditiontext").html(conditions);
				jQuery(".conditionwind").html(conditionswind);

				// Double check your work :)
				console.log(
				"Currently the temperature is " + currentTemp + " and " + conditions + "."
				);
			});
		}

		showPosition();

	</script>