CODEWITHSUNDEEP
javascriptfetchopenweathermap
Mohamed Hamissa
Mohamed Hamissa

Reputation: 13

Failed to load resource after using API Key

I have this error "Failed to load resource: the server http://localhost:3000/api.openweathermap.org/data/2.5/weather?id=&appid=23012caa6cd9437d2588b8f412b67f5f responded with a status of 404 (Not Found)

let baseURL = 'api.openweathermap.org/data/2.5/weather?id=&appid=';
let apiKey = '23012caa6cd9437d2588b8f412b67f5f';
let newZip =  document.getElementById('zip').value;



document.getElementById('generate').addEventListener('click', performAction);
var feeling=document.createElement('DIV');
document.getElementById("feeling").appendChild(feeling);
function performAction(){
getWeather(baseURL,newZip, apiKey);
feeling.innerHTML=document.getElementById('feelingLabel').value;

}
async function getWeather (baseURL,newZip ,apikey){

  const res = await fetch(baseURL+newZip+apikey)
  try {

    const projectData = await res.json();
    
    console.log(typeof projectData);
   let date= document.createElement('DIV');
  document.getElementById("container").appendChild(date);
   let temp=document.createElement('Div');
   document.getElementById('container').appendChild(temp);
   let content=document.createElement('DIV');
   document.getElementById("container").appendChild(content);
   date.innerHTML=projectData[1];
   temp.innerHTML=projectData[2];
   content.innerHTML=projectData[3];
    return projectData;
  }  catch(error) {
    console.log("error", error);
    // appropriately handle the error
  }
}

Upvotes: 0

Views: 780

Answers (1)

Xeoth
Xeoth

Reputation: 1609

You didn't specify any protocol in your baseURL, so the browser think you want to send a request to your own server (in your case localhost:3000) instead of to OpenWeatherMap. Try prepending either https:// or http:// to baseURL, like this:

let baseURL = 'https://api.openweathermap.org/data/2.5/weather?id=&appid=';

Upvotes: 1

Related Questions