Weather app finally finished

Code Feedback
1

Weather App

Hi all,

I finished my weather app and got it uploaded this evening. I’ve really enjoyed this and taken it a little bit out of scope but it was so good to do the lessons in context and going to find the answers I needed, I just couldnt stop :slight_smile:

Please let me know what you think. I’ve worked hard and spent about 50hours including bugs, I hope you like it.

Thanks

Mark

1 Like
2

Looks very nice one of the cleanest designs I have seen, one thing that troubles me tho is your toggle switches kind look like text input boxs and its not clear what they would toggle to until you click em.

3

Thanks.

I just changed the default toggle so they are not symetrical - they look like a checkboard. does that help?

Cheers

Mark

4

Yeah I think so. I sort of feel it needs a hint of shadow on the inner white just to hint at the switch being inset, you have shadow already so it may compliment. Still this is one of the best designs, makes me jealous lol.

5

Ah you’ve a good eye for detail thankyou, I’ve added that and it looks better. I might make it a bit shallower when I switch my computer back on tomorrow - what you think?

Thanks for the advice :slight_smile:

6

Very nice, did you intend the actual text box to have the shadow also?

7

Just trying it out - got no real design experience so it’s trial and error for the moment

8

Personally, I think you have a fantastic eye for design. Really like the layout and color palette!

2 Likes
9

Thanks, it was supposed to be like Google material design and as you can see that went out of the window and now it’s a flat-but-with-some-shadows hybrid.

I did the layout with flexbox, there’s no bootstrap so I got alot more freedom of how the panels behave at different sizes.

10

I really like the card-based presentation. Very nice design!

1 Like
11

Nice app
I like the look.

1 Like
12

thanks :thumbsup: :slight_smile:

13

Looks great! Couple of small things I’ve noticed:

  • When you search for another location the temp and speed buttons seem to malfunction.
  • Opening the forecast introduces the scrollbar which gives the animation a small jerk. Minor really, but it bothers me :slight_smile:
1 Like
14

Yeh I knew about that button bug. if you click locate button again they come back… not figured that one out yet (there were ALOT of bugs)

I also knew about the scroll bar… such an anoyance - any idea how to get round that?

15

How about a div that has a height just taller than the screen (however you would set that)? Then you could position it behind everything else so that it’s always there and at that same height whether the forecast is extended or not.

I’m no expert though, something like this may well be bad practice.

16

The trouble there unfortunatly is that as soon as the device has a shorter screen than the height the issue is still there.

BTW, to set containers as the height of any screen its:

height: 100vh;

100 being 100% and vh being vertical (or maybe thats veiwport) height. :slight_smile:

the width version is vw.

I’m thinking custom scroll bar is the only way around this PITA.

17

Ah, that’s right, vh. But that’s dynamic, right, so a shorter screen shouldn’t matter? And you could use 101vh, so whatever the screen height you’d have the hidden div forcing the scrollbar to appear.

Actually, maybe your answer is here.

Anyway, bedtime for me. Good luck!

18

I’m such an idiot,

I always use the vh somewhere in my page too… i’ve been scratching my head about that bar for the last week whilst working on the app, body{height: 101vh} did indead sort it by making the bar permanent. :slight_smile:

Cheers and good night :sleeping:

19

And also… double idiot… i have just done that very same thing on my wikipedia project, today, to get the footer links out of the way for clean page :confused:

1 Like
20

Looks very nice!

And thanks for the height: 100vh tip. Didn’t know that one!

1 Like