Weather api

index.html

<h1 style="color:#148F77 "><b><i><center> Weather App&#127777 </i></b></center></h1>
<center><input type='search' placeholder='enter the city ' id="city" class="search-bx" name='cityname'style= "width:50%;background-color: white;padding: 12px 20px;margin: 10px 0;display: inline-block;border: 1px solid green;border-radius: 6px;box-sizing: content-box "></center>
<br>
<center><button id="search-button"  style="color: yellow; background-color: grey">search</button><center>
  <br>
  <div>
    <div id="location "  ></div>
  <div id="temp" ></div>
    </div>
  
  <div >
    <div id="weather"></div>
    <div id="min-max" ></div>
    
    
    </div>
    
  
  
    

script.js

  let city=document.querySelector(".search-bx")

const searchButton=document.getElementById("search-button")
const apiData = {
  url: `https://api.openweathermap.org/data/2.5/weather?q=`,
  key: `9b81d3e4265e2d1a5b8b73f1591ec139`,
};

async function getWeather(countryName) {
  //console.log(searchBox.value)
 
const response =await fetch(`${apiData.url}${countryName}&appid=${apiData.key}`) 
var data=await response.json();
 
  console.log(data) 
  
document.getElementById ("location "). innerText=`${data.name}, ${data.sys.country}`;
 document.getElementById ("temp").innerText=`${Math.floor(data.main.temp - 273.15)} °c`;
 document.getElementById ("weather").innerText=`${data.weather[0].main}`;
  
   document.getElementById ("min-max"). innerText=`${Math.floor(data.main.temp_min - 273.15)} °c/${Math.floor(data.main.temp_max - 273.15)} °c`;
  
  console.log (data.sys.country)
  
  
  
  
 } ;
 function searchData() {
   
 const cityName=city.value;
   console.log (cityName) ;

     
getWeather(cityName);
   

   
     
  }
searchButton.addEventListener("click", searchData) 
	

weather-api.markdown

Weather api

Weather

A Pen by Nandhini on CodePen.

License.