Weather app, getting a neat contrasting text

Hi there,

I have a difficult time to get the css/html right for the weather app. I would like to have based on the background image a different color of the temperature, location text box etc. The information that I get out of the javascript. The javascript seems to be working for the most parts. I need to rewrite a bit to check for the right response. Sometimes it displays the weather for japan or it gets not an icon. I work on that, not to diffucult. But about the css/html part.

BTW I added some random place in japan if you don’t want to reveal your location. It should work.

I would like something like this: https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color. But then for a background image.

So I figured out that I need this: https://css-tricks.com/methods-contrasting-text-backgrounds/

Could somebody explain why I have to do the following in css, #append h1 instead of just h1. It seems to work somehow with the id of the background attached to it. I am just wondering. But it seems to be not right yet. How could I improve on the css?

Thank you.

Sometimes it displays the weather for japan or it gets not an icon. I work on that, not to diffucult. But about the css/html part.

Yes, I believe there is a bug in the API that sometimes returns a location in China. It’s not your fault.

Could somebody explain why I have to do the following in css, #append h1 instead of just h1.

My guess is that it has to do with specificity. It’s a tricky subject but basically in order to override the Bootstrap styles, you have to be more “specific” in your selector.

And just as a side note, I think “append” is a confusing id for an html element. It’s such a common verb and concept - I had to keep reminding myself that it was an html element id and that it wasn’t a jQuery append.

And all that head stuff should be handled in codepen’s settings. There should be no head or body tags. That is codepen’s way.

@kevinSmith Thank you for your reply.

I have adjusted the head/body part as well the id #append, I could know that it confuses a lot. I check now if the api gives the same coordinates for the weather part as I have tried to get from the api as input parameters. If it fails to get the same coordinates it returns a message about it. So it is clear that it doesnt respond well. As well as it gives the page on some place in random japan for when the client doesnt allow the geolocation.

And sometimes the api gives not the icon it will return the page without icon in that case.

I think I can get rid of the bootstrap. And see what is then happening with my images. Probably all the rows/container in the dom mess things up as well with inheriting the background. But could at least try some things.

Yes, you have it hard coded with var location = [36.204824, 138.252924]; - that’;s why you’re getting Japan until navigator comes back. A problem with navigator is that in most browsers it will start slowing down on repeated calls. I might suggest using an API like https://ipinfo.io to get the location. It’s faster.

I didnt know of such a api, thank you. I will keep it in mind if I really need it, for such a small test site I’m fine without api I think.

I think I figured the html/css part out with the help of this website:

It is kinda hard to understand it right.