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

Question

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" class="search-box" placeholder="search for a city">
      </header>
      <main>
        <section class="location"> 
          <div class="city"> Istra, Ru </div>
          <div class="date">Friday, 24 April 2022</div>
        </section>
        <div class="current">
          <div class="temp">+14<span>°c</span></div>
          <div class="weather"> Cloudy</div>
          <div class="hi-low">+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}`;
}

Answer 1

 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" class="search-box" placeholder="search for a city"> </header> <main> <section class="location"> <div class="city"> Istra, Ru </div> <div class="date">Friday, 24 April 2022</div> </section> <div class="current"> <div class="temp">+14<span>°c</span></div> <div class="weather"> Cloudy</div> <div class="hi-low">+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

Answer 2

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 class="app-wrap"> <header> <input type="text" autocomplete="off" class="search-box" placeholder="search for a city" /> </header> <main> <section class="location"> <div class="city">Istra, Ru</div> <div class="date">Friday, 24 April 2022</div> </section> <div class="current"> <div class="temp">+14<span>°c</span></div> <div class="weather">Cloudy</div> <div class="hi-low">+12°c/+15°c</div> </div> </main> </div>

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

Question

2 answers

solution1
1 2022-04-23 17:14:41

solution2
0 ACCPTED 2022-04-23 17:20:30

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

Question

2 answers

solution1 1 2022-04-23 17:14:41

solution2 0 ACCPTED 2022-04-23 17:20:30

solution1
1 2022-04-23 17:14:41

solution2
0 ACCPTED 2022-04-23 17:20:30