Kevin Powell - Community•15mo ago

Weather API App v2

Hi again! My previous post had too many questions so it got a little chaotic. This one is simpler. The code below works, it displays the location and temperature, however I don't see any way of applying CSS to it, so i need to change app.textContent to either innerHTML (where I can add a div and then a Class/ID to the div), or maybe createElement etc.. Any advise please? 🙂

    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      app.textContent = `Location: ${response.location.name} & Temperature: ${response.current.temp_c}`;
    })
    .catch(function (error) {
      console.error("Error fetching weather data:", error);
      app.textContent = "An error occurred while fetching weather data.";
    });

    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      app.textContent = `Location: ${response.location.name} & Temperature: ${response.current.temp_c}`;
    })
    .catch(function (error) {
      console.error("Error fetching weather data:", error);
      app.textContent = "An error occurred while fetching weather data.";
    });

14 Replies

Mannix•15mo ago

what's app??

CDLOP•15mo ago

oh sorry, it's my variable linking to the div

const app = document.querySelector("#app");

const app = document.querySelector("#app");

the entire code is here:

const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const searchButton = document.querySelector("#searchButton");

searchButton.addEventListener("click", function () {
  const city = cityInput.value;
  if (city) {
    fetchWeather(city);
  } else {
    alert("Please enter a city name.");
  }
});

function fetchWeather(city) {
  fetch(
    `http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}&aqi=no`,
    {
      mode: "cors",
    }
  )
    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      app.textContent = `Location: ${response.location.name},  Temperature: ${response.current.temp_c}'c`;
    })
    .catch(function (error) {
      console.error("Error fetching weather data:", error);
      app.textContent = "An error occurred while fetching weather data.";
    });
}

const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const searchButton = document.querySelector("#searchButton");

searchButton.addEventListener("click", function () {
  const city = cityInput.value;
  if (city) {
    fetchWeather(city);
  } else {
    alert("Please enter a city name.");
  }
});

function fetchWeather(city) {
  fetch(
    `http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}&aqi=no`,
    {
      mode: "cors",
    }
  )
    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      app.textContent = `Location: ${response.location.name},  Temperature: ${response.current.temp_c}'c`;
    })
    .catch(function (error) {
      console.error("Error fetching weather data:", error);
      app.textContent = "An error occurred while fetching weather data.";
    });
}

Mannix•15mo ago

just apply classes to that element or inline styling 🙂

CDLOP•15mo ago

That's true.... I could also createElement and appendChild to #app to and instead of app.textContent for teh temperature, I could do newVariable.textContent, right? Basically when I search for a location I want it to pop up with location and temperature, but I obviously want to be able to style both individually (I think). Perhaps I'm overthinking this 😄

Mannix•15mo ago

looks to me like you do 😄 you could also just style that element in css

CDLOP•15mo ago

I'll give it a whirl tonight, thanks Mannix 🙂

Mannix•15mo ago

good luck

MarkBoots•15mo ago

Don't know if this is what you're asking, but you can just write html in that app variable and use classes for the css. for example.

app.innerHTML= `
  <p class="location">Location: ${response.location.name}</p>
  <p class="temperature">Temperature: ${response.current.temp_c}c</p>
`;

app.innerHTML= `
  <p class="location">Location: ${response.location.name}</p>
  <p class="temperature">Temperature: ${response.current.temp_c}c</p>
`;

CDLOP•15mo ago

That's actually a suggestion my mentor mentioned, but I read that using {abcdef} inside innerHTML is quite bad practice? so the other option I thought of was createElement, addClassList, appendChild?

Chris Bolson•15mo ago

I don't want to confuse you more but I personally would use a <template>. This is defined within the html just like any other element along with any styling that you choose to give it. The only difference is that it won't show up on the page. Them with the JavaScript you clone this and add your API values in their corresponding place.

CDLOP•15mo ago

I'll look into template, thanks for the tip 🙂 very quick one btw, as I'm just testing some stuff to see if it works.. can I do the below? I basically just want to give each API call it's own class to style, and feel like having it all in one innerHTML might not be the greatest idea (I also have a feeling I shouldn't be calling an API through an innerHTML?)

    .then(function (response) {
      // app.textContent = `Location: ${response.location.name},  Temperature: ${response.current.temp_c}'c`;
      app.innerHTML = `<div class="location">Location: ${response.location.name}</div>
      <div class="temp_c>Temperature: ${response.current.temp_c}</div>`;
    })

    .then(function (response) {
      // app.textContent = `Location: ${response.location.name},  Temperature: ${response.current.temp_c}'c`;
      app.innerHTML = `<div class="location">Location: ${response.location.name}</div>
      <div class="temp_c>Temperature: ${response.current.temp_c}</div>`;
    })

Chris Bolson•15mo ago

I have made a quick demo of how templates work both for a single item (which is probably your use case here) and for an array https://codepen.io/cbolson/pen/ExGQNjx

CDLOP•15mo ago

Ok that’s really neat! Thanks for sharing

Chris Bolson•15mo ago

I'm glad you like it. I like using templates as that keeps all the CSS completely separate from the JavaScript and I find it easier to style them as they are just like any other HTML element.

Gaming

Programming

Weather API App v2