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? π
14 Replies
what's
app
??oh sorry, it's my variable linking to the div
the entire code is here:
just apply classes to that element or inline styling π
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 π
looks to me like you do π
you could also just style that element in css
I'll give it a whirl tonight, thanks Mannix π
good luck
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.
`
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?
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.
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?)
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
Ok thatβs really neat! Thanks for sharing
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.