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
Mannixβ€’14mo ago
what's app??
CDL
CDLβ€’14mo 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
Mannixβ€’14mo ago
just apply classes to that element or inline styling πŸ™‚
CDL
CDLβ€’14mo 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
Mannixβ€’14mo ago
looks to me like you do πŸ˜„ you could also just style that element in css
CDL
CDLβ€’14mo ago
I'll give it a whirl tonight, thanks Mannix πŸ™‚
Mannix
Mannixβ€’14mo ago
good luck
MarkBoots
MarkBootsβ€’14mo 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>
`;
`
CDL
CDLβ€’14mo 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
Chris Bolsonβ€’14mo 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.
CDL
CDLβ€’14mo 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
Chris Bolsonβ€’14mo 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
CDL
CDLβ€’14mo ago
Ok that’s really neat! Thanks for sharing
Chris Bolson
Chris Bolsonβ€’14mo 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.
Want results from more Discord servers?
Add your server