Weather App. Want you to critique it!

After hours of tweaking, finally achieved what I wanted. Here’s my Local Weather App. Please tell me what you think about it!


(The above link is not working, I guess, use below link, please)
https://codepen.io/AbhayKV04/full/YGApoz/

looks good. I would add something to let the user know what is happening whilst we wait for the data fetch, a please wait message or similar.

Well, actually at this point of time I think I don’t know how to do that. Would you guide me?

Hey, I like the code idea! The white text is a bit hard too read on the light background, though.

1 Like

you could just display some text.
You display the temperature when we get the data back:

$(".temp").html("<b>" + Math.round(ctemp) + " °C" + "</b>");

So, at the start you could:

$(document).ready( function( ){
  $(".temp").html("<b>" + "Please Wait ..." + "</b>");
  if( navigator.location){
    // ...
  }
}

One more thing, and this may just be a style thing, so someone may correct me here, but I would use id’s to identify individual unique fields, like temp, rather than class. Class is more general, to apply styling to a group of field that require the same style.
css id’s are defined:

#temp { styleing } 

and jquery access:

 $("#temp").doSometing()
1 Like

Would you suggest me some font-background color pairs?

Yeah I know the class-id thing, but I don’t know why I am comfortable with classes. Thanks for your suggestion, though!

Just tried this and is working flawlessly. Thanks!

glad you got it working! you can spruce it up now :slight_smile:

I’m afraid when it comes to graphic design I’m a bit of an emergency. I would suggest you look at a colour wheel and try the different schemes, you know, complimentary, adjacent, triad etc. If you search the net you’ll find lots of posts on colour composition.

Well thanks for your time. Apprecaite it a lot! You can have a look at it now. I have changed backgrounds and it seems good to me now.

yes much better … but, lol, do we need the curly braces “{}” on the left, and the html comments “< !-- -->” on the right? Just a thought.

Actually I just wanted to make it look like a code snippet … but should I really change it ? Is it awkward?

For this project, I think this is quite nice. It is something that makes it slightly different from all the hundreds or thousands of other weather projects.

1 Like

Well, that made my day! Thanks!

It looks good.
Cool that you tried to display content in CODE structure.

1 Like

Thanks! Appreciate it!

In my computer, it only shows: Please wait and nothing more. Tried to refresh page , didn’t help.