Ausgabe wird zu oft getätigt von af2111, 21.07.2019 11:55

Ausgabe wird zu oft getätigt

af2111 21.07.2019 11:55

±0 Informationen zu den Bewertungsregeln

Danke für die Antwort, das hat das Problem gelöst. Zur Divitis: Die hat schon ihren Grund, der aktuelle Code ist nochmal da.

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Weather Application</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  

  <div class="container">
  <header class="header">
    <div class="search">
      <input type="text" placeholder="Enter City Name" id="search-txt">
      <a id="search-btn" href="#"><i class="fas fa-search"></i></a>
    </div>
  </header>

  <main id="main">
    
    <div class="city-icon">
      <div class="city-icon-holder">
      <div id="city-name"></div>
      <img src="" alt="" id="icon">
        </div>
    </div>
    
    <div class="temperature">
      <div id="temp"></div>
    </div>
    
    <div class="humidity">
      <div id="humidity-div"></div>
    </div>
    <div id="WeatherDesc">
      <p id="WeatherDescOut"></p>
    </div>

    <div id="output">
        <p id = "out"></p>
      </div>

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

  

    <script  src="js/index.js"></script>



</body>

</html>

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("temp");
let humidity = document.getElementById("humidity-div");
let weatherDesc = document.getElementById("WeatherDesc");
let weatherDescOut = document.getElementById("WeatherDescOut");
let output = document.getElementById("out");
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.innerHTML = jsonObject.name;
  icon.src = "http://openweathermap.org/img/w/" + jsonObject.weather[0].icon + ".png";
  temperature.innerHTML = parseInt(jsonObject.main.temp - 273) + "°";
  console.log(jsonObject.weather[0].description);
  humidity.innerHTML = jsonObject.main.humidity + "%";
  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 && celcius > 16) {
      document.body.style.backgroundColor = '#8181F7';
      document.body.style.color = "#d6f286";
      
      output.innerText = "Zieh dir ein langärmliges T-Shirt an!";
      
  
      
      
     
      
     


     }
    else if (celcius > 23)
    {
      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 == "clear sky") {
      weatherDescOut.innerText = "Klarer Himmel";
    }
    else if(jsonObject.weather[0].description == "scattered clouds") {
      weatherDescOut.innerText = "Vereinzelt Wolken";

    }
    }
   function httpRequestAsync(url, callback)
  {
    console.log(temperature);
      var httpRequest = new XMLHttpRequest();
      httpRequest.onreadystatechange = () => { 
          if (httpRequest.readyState == 4 && httpRequest.status == 200)
              callback(httpRequest.responseText);
      }
      httpRequest.open("GET", url, true); // true for asynchronous 
      httpRequest.send();
  }

body{
  background-color: #eee;
}


.container{
  width: 500px;
  height: 300px;
  margin:25vh auto;
  border-radius: 25px;
  box-shadow: 0 20px 40px 0px rgba(0,0,0,0.3)
}

.header {
  height: 20%;
  background-color: #FF9800;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  text-align: center;
  position: relative;
  margin-bottom: 90px;
}

#output {
        color: white;
        background-color: rgb(0, 236, 59);
        border-bottom-right-radius: 25px;
        border-bottom-left-radius: 25px;
        text-align: center;
        height: 200px;
        width: 500px;
        position:absolute;
        font-size: 40px;
        font-weight: bold;
        font-family: "Courier New";
}

#WeatherDesc {
  color: white;
  background-color: rgba(109, 214, 255, 0.979);
  text-align: center;
  height: 90px;
  width: 500px;
  position:absolute;
  bottom: 250px;
  font-size: 40px;
  font-weight: bold;
  font-family: "Courier New";
}
#WeatherDescOut {
  
}

#temp, #humidity-div {
  font-family: "Courier New";
  font-weight: bold;
  font-size: 60px;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.city-icon-holder {
  position:absolute;
  left: 25%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}

#city-name {
  font-family: "Courier New";
  font-size: 30px;
  font-weight: bold;
  color: #fff;
}

#icon {
  width:50%;
}

#main{
  width: 500px;
  height: 250px;
  position: absolute;
}

.city-icon {
  height: 80%;
  width: 50%;
  
  background-color: #FFC107;
}

.temperature {
  position: absolute;
  left: 50%;
  top:0%;
  height: 40%;
  width: 50%;
  background-color: #9C27B0;
}

.humidity {
  height: 40%;
  width: 50%;
  position:absolute;
  left:50%;
  top:40%;
  
  background-color: #E91E63;
}

#search-btn {
  width: 40px;
  height:40px;
  color: #eee;
}

#search-txt {
  color: red;
  height:30px;
  border-radius: 10px;
  border-style:none;
  outline:none;
  padding-right:1px;
  padding-left:1px;
  text-align:center;
}

.search {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
}

Tschö, af2111

Beitrag melden

±0 Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

af2111: Ausgabe wird zu oft getätigt

Beitrag lesen

Ausgabe wird zu oft getätigt

Ausgabe wird zu oft getätigt