JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<main>
  <div id="query">
  <!-- todo: inputs brauchen labels. Placeholder sind keine Labels -->
    <input type="text" placeholder="Enter City Name" id="search-txt">
    <button id="search-btn" href="#"><i class="fas fa-search"></i></button>
  </div>

  <div id="WeatherDesc">sdfkjdsjfksl</div>
   
  <div id="city-icon">
    <div id="city-name">Köln</div>
    <img src="" alt="city-icon" id="icon">
  </div>
    
  <div id="temperature">444</div>
    
  <div id="humidity">123</div>
  
  <div id="output">OUTOUTOUT</div>
</main>

<script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>

CSS

main {
  background-color: rgba(0, 0, 0, 0);
  margin: 25vh auto;
  width: 32em;
  box-shadow: 0 1em 2em 0px rgba(0, 0, 0, 0.3);
  border-radius: 2em;
  overflow: hidden;
  display: grid;
  grid-template: "header  header"  auto
                 "descout descout" auto
                 "city    temp   " auto
                 "city    humid  " auto
                 "output  output " 12em
                 / 1fr 1fr;
  justify-content: center;
}

#query {
  grid-area: header;
  text-align: center;
  background-color: #FF9800;
  padding: 1.5em 0;
}

#search-txt {
  color: red;
  height: 2em;
  border-radius: 0.75em;
  border-style: none;
  padding: 0.1em 0.2em;
  text-align:center;
}
#search-btn {
  margin-left: 0.5em;
  color: #eee;
  border: none;
  background-color: transparent;
  font: inherit;
}

#WeatherDesc, #city-name, #temperature, #humidity, #output {
  font: bold 40px "Courier New";
  color: white;
  text-align: center;
}

#city-icon {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

#WeatherDesc {
  grid-area: descout;
  background-color: rgba(109, 214, 255, 0.979);
  padding: 1em 0 0.2em 0;
}

#city-icon {
  grid-area: city;
  background-color: #FFC107;
  position: relative;
}

#city-name {
  font-size: 30px;
}

#temperature, #humidity {
  font-size: 60px;
}

#temperature {
  grid-area: temp;
  background-color: #9C27B0;
}

#humidity {
  grid-area: humid;
  background-color: #E91E63;
}

#output {
  grid-area: output;
  padding-top: 1em;
  background-color: rgb(0, 236, 59);
  text-align: center;
}

JavaScript

const appKey = "*********";

let searchButton = document.getElementById("search-btn");
let searchInput = document.getElementById("search-txt");
let cityName = document.getElementById("city-name");
let icon = document.getElementById("icon");
let temperature = document.getElementById("temperature");
let humidity = document.getElementById("humidity");
let weatherDesc = document.getElementById("WeatherDesc");
let outputHolder = document.getElementById("output");

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.textContent = jsonObject.name;
  icon.src = "http://openweathermap.org/img/w/" + jsonObject.weather[0].icon + ".png";
  
  temperature.textContent = parseInt(jsonObject.main.temp - 273) + "°";
  humidity.textContent = jsonObject.main.humidity + "%";

  console.log(jsonObject.weather[0].description);
  var celcius = Math.round(parseFloat(jsonObject.main.temp)-273.15);
  console.log (celcius);
  
  if (celcius < 16) {
    document.body.style.backgroundColor = '#8181F7';
    document.body.style.color = "#d6f286";
    output.innerText = "Zieh dir eine dicke Jacke an!";
  }
  else if (celcius < 23) {
    document.body.style.backgroundColor = '#8181F7';
    document.body.style.color = "#d6f286";
    output.innerText = "Zieh dir ein langärmliges T-Shirt an!";
  }
  else {
    document.body.style.backgroundColor = '#FFBF00';
    document.body.style.color = "#00d8ff";
    output.innerText = "Zieh dir ein kurzärmliges T-Shirt an!";
  }  
  if (jsonObject.weather[0].description...