Search Button in my Javascript Weather Application doesn't seem to work-CodePudding

I'm writing my weather app in JavaScript. I have issues with search button, data of application don't change after you put a name of city and press enter button. What should I change in my API variable (const api) or in my fetch to make it work? Or maybe I have problems with my api data? Here's my HTML code:

<html> 
  <head>
    <meta charset="UTF-8">
    <mate name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content= "ie=edge">
    <title> Weather App</title>
  </head>
  <body>
    <div class ="app-wrap" >
      <header>
        <input type= "text" autocomplete="off"  placeholder="search for a city">
      </header>
      <main>
        <section > 
          <div > Istra, Ru </div>
          <div >Friday, 24 April 2022</div>
        </section>
        <div >
          <div > 14<span>°c</span></div>
          <div > Cloudy</div>
          <div > 12°c/ 15°c</div>
        </div>
      </main>
    </div>
  </body>
</html>

Javascript code:

const api= {
  key: "6aa96f9b0d0d34ee6efd29438b57baae",
  baseURL: "api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=6aa96f9b0d0d34ee6efd29438b57baae"
}

const searchbox= document.querySelector(".search-box");
searchbox.addEventListener("keypress", setQuery);

function setQuery(event) {
  if(event.keyCode === 13) {
    getResults(searchbox.value);
    console.log(getResults);
  }
}

function getResults(query) {
  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`).then(weather => {
    return weather.json();
  }).then(displayResults);
}

function displayResults(weather) {
  let city= document.querySelector(".location .city");
  city.innerText= `${weather.name}, ${weather.sys.country}`;
  
  let now= new Date();
  let date= document.querySelector(".location .date");
  date.innerText= dateBuilder(now);
  
  let temp= document.querySelector(".current .temp");
  temp.innerHTML= `${Math.round(weather.main.temp)}<span>°c</span>`;
  
  let weather_el= document.querySelector(".current .weather");
  weather_el.innerText= weather.weather[0].main;
  
  let hilow= document.querySelector(".hi-low");
  hilow.innerText= `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`; 
}

function dateBuilder (d) {
  let months= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  let days= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  
  let day= days[d.getDay()];
  let date= d.getDate();
  let month= months[d.getMonth()];
  let year= d.getFullYear();
  
  return `${day} ${date} ${month} ${year}`;
}

CodePudding user response：

const api= {
  key: "6aa96f9b0d0d34ee6efd29438b57baae",
  baseURL: "http://api.openweathermap.org/data/2.5/"
}

const searchbox= document.querySelector(".search-box");
searchbox.addEventListener("keypress", setQuery);

function setQuery(event) {
  if(event.keyCode === 13) {
    getResults(searchbox.value);
  }
}

function getResults(query) {
  const url = `${api.baseURL}weather?q=${query}&units=metric&appid=${api.key}`;
  fetch(url).then(weather => {
    return weather.json();
  }).then(displayResults);
}

function displayResults(weather) {
  let city= document.querySelector(".location .city");
  city.innerText= `${weather.name}, ${weather.sys.country}`;
  
  let now= new Date();
  let date= document.querySelector(".location .date");
  date.innerText= dateBuilder(now);
  
  let temp= document.querySelector(".current .temp");
  temp.innerHTML= `${Math.round(weather.main.temp)}<span>°c</span>`;
  
  let weather_el= document.querySelector(".current .weather");
  weather_el.innerText= weather.weather[0].main;
  
  let hilow= document.querySelector(".hi-low");
  hilow.innerText= `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`; 
}

function dateBuilder (d) {
  let months= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  let days= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  
  let day= days[d.getDay()];
  let date= d.getDate();
  let month= months[d.getMonth()];
  let year= d.getFullYear();
  
  return `${day} ${date} ${month} ${year}`;
}

<html> 
  <head>
    <meta charset="UTF-8">
    <mate name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content= "ie=edge">
    <title> Weather App</title>
  </head>
  <body>
    <div class ="app-wrap" >
      <header>
        <input type= "text" autocomplete="off"  placeholder="search for a city">
      </header>
      <main>
        <section > 
          <div > Istra, Ru </div>
          <div >Friday, 24 April 2022</div>
        </section>
        <div >
          <div > 14<span>°c</span></div>
          <div > Cloudy</div>
          <div > 12°c/ 15°c</div>
        </div>
      </main>
    </div>
  </body>
</html>

I updated the baseURL value. You don't need to include "q" and "appid" parts there) Also in the call (URL build) you used wrong parameter name. It's not base, but baseURL

CodePudding user response：

You need to catch errors coming from async calls ot you won't be able to properly debug, your API call is returning a 404 status error since you are using a wrong URL for fetch:

const api = {
  base: 'https://api.openweathermap.org/data/2.5/',
  key: '6aa96f9b0d0d34ee6efd29438b57baae',
};

const searchbox = document.querySelector('.search-box');
searchbox.addEventListener('keyup', setQuery);

function setQuery(event) {
  console.log('event.keyCode', event.keyCode);
  if (event.keyCode === 13) {
    getResults(searchbox.value);
    console.log(getResults);
  }
}

function getResults(query) {
  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
    .then((weather) => {
      console.log(weather);
      return weather.json();
    })
    .then(displayResults)
    .catch((e) => console.log(e.toString()));
}

function displayResults(weather) {
  let city = document.querySelector('.location .city');
  city.innerText = `${weather.name}, ${weather.sys.country}`;

  let now = new Date();
  let date = document.querySelector('.location .date');
  date.innerText = dateBuilder(now);

  let temp = document.querySelector('.current .temp');
  temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;

  let weather_el = document.querySelector('.current .weather');
  weather_el.innerText = weather.weather[0].main;

  let hilow = document.querySelector('.hi-low');
  hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round(
    weather.main.temp_max
  )}°c`;
}

function dateBuilder(d) {
  let months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ];
  let days = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ];

  let day = days[d.getDay()];
  let date = d.getDate();
  let month = months[d.getMonth()];
  let year = d.getFullYear();

  return `${day} ${date} ${month} ${year}`;
}

<div >
  <header>
    <input type="text" autocomplete="off"  placeholder="search for a city" />
  </header>
  <main>
    <section >
      <div >Istra, Ru</div>
      <div >Friday, 24 April 2022</div>
    </section>
    <div >
      <div > 14<span>°c</span></div>
      <div >Cloudy</div>
      <div > 12°c/ 15°c</div>
    </div>
  </main>
</div>