Let's discuss your "Local Weather App"

Code Feedback
21

project link - http://codepen.io/mikeale03/pen/NrqYLy/

1 Like
22

i added some enter city functionality. any comment?. what do you guys think? critics are welcome.

23

Works for me, and works when I stick in random coords as test data. However I can’t get it to work in IE, Chrome, Opera (probably due to the Geolocation issues), and if I used my wired connection it locates my ISP’s location, not my own coords. Even more fun, when I shared it to friends and family, it worked for precisely nobody - not one. Unless I nag them all to find out if they used another browser, a phone, an ad-blocker or, for all I know some kind of Mac or Linux setup, I’m not really sure why, but I do feel a bit of a tit for sharing it.

24

Project Link - http://codepen.io/adamgmurray/pen/xOZxqy
I enjoyed this project. I avoided the API route on the random quote project, and I’m glad this was my first go at it. I chose to use a switch to toggle the background class based on the weather description and avoided icons altogether. I wanted to keep it a minimal as possible.

25

Trying for simplicity this time. One thing I learned is that localStorage will store boolean values as strings so they need to be parsed when you fetch them again. The app will remember if you left it on Celsius or Fahrenheit.

Same geolocation problems as others are having (same wrong location on other peoples pens for me). I may come back and try and get locations by IP address since sites that use that seem more accurate or at least since they are showing my ISP location in the same ballpark or maybe allow the user to enter a city and have it remember that.

1 Like
26

project link - http://codepen.io/mkarabashev/full/xOVVvX/

Let me know if there is anything broken.

3 Likes
27

Weather App

Let me know what you guys think! Had some https issues when using chrome (if there is a way to fix this in codepen please let me know). If the data doesn’t load, try putting http instead of https in the address bar.

Thanks!

28

@gperl27 It works in Opera.

At first it wasn’t clear to me that I could toggle between Fahrenheit and Celsius. I found that out after looking into your code. Perhaps you could make that more obvious?

Than when I change it from Fahrenheit to Celsius the box dimensions also change and the weather icon jumps in front of the temperature. I think it would look better if you used pixel dimensions insted of percentage for your .weather-box.

Furthermore I think it would look better if you just loose the text “The weather outside is…”

29

Here is mine!
Project Link - http://codepen.io/Jesse989/full/PzoNgm/

Most definitely one of my most minimal designs so far. I really like it because of its simplicity.
Click the red Fahrenheit button to switch to Celsius.

30

Finished this morning. Spent a lot of hours on this. Probably one of my favorites so far. It doesn’t work in Chrome though, getCurrentPosition() is deprecated on insecure origins. Try using the app in FireFox or Safari.

Project Link - http://codepen.io/shaunski11/full/NrWyWr/

31

Alright! After working on this for six weeks I’m done! https://codepen.io/AbdiViklas/full/EygmWq/

I used https and geolocation instead of IP (I figure, mobile-first design includes taking advantage of mobile location), and put in an error alert prompting the user to enter “https.”

That ruled out openweathermap; I turned to Forecast.io, which lets me use their nifty animated Skycons! (Side effect: learning a tiny little bit about <canvas>.)

And finally, Materialize, because I’m growing to love it more every day! One little thing I would have preferred, though: I would have liked to vertically align my “card” within the viewport. They say it’s easy to do with just a couple of classes—but I couldn’t get it to work for me. Oh well.

In some Utopian plane where I have unlimited time to make things pretty I might also like to switch out the entire color scheme in response to the weather conditions–light blue for sunny day, dark red if temperature is over 85F, etc. But I am so ready to move on.

4 Likes
32

Project Link - http://codepen.io/squaremarco/full/gMwbeP

I kept it simple, I think I will switch to geolocation but first I have to understand how to get a city name from geo-coordinates.
I’ve used http://erikflowers.github.io/weather-icons/ since it provides support to openweathermap (as shown here). Also the background for the temperature and weather icon should change dinamically if the temperature is too high or too low and if it is day or night.

1 Like
33

@squaremarco
Nice work! I like the layout of your app. It’s simple and easy to use. The OpenWeatherMap api allows you to get the user’s location if they share it. Once you create a couple variables for longitude and latitude you can create another string to add to the api call.

Like this: api.openweathermap.org/data/2.5/weather?lat=35&lon=139

Results:
{“coord”:{“lon”:139,“lat”:35}, “sys”:{“country”:“JP”,“sunrise”:1369769524,“sunset”:1369821049}, “weather”:[{“id”:804,“main”:“clouds”,“description”:“overcast clouds”,“icon”:“04n”}], “main”:{“temp”:289.5,“humidity”:89,“pressure”:1013,“temp_min”:287.04,“temp_max”:292.04}, “wind”:{“speed”:7.31,“deg”:187.002}, “rain”:{“3h”:0}, “clouds”:{“all”:92}, “dt”:1369824698, “id”:1851632, “name”:“Shuzenji”, “cod”:200}

The city name is being returned with the rest of the data, in this example it’s Shuzenji.

Hope this helps!

2 Likes
34

Oh, well then I’ve misread the API documentation since I didn’t think you would get a city name with a lon/lat query.
Thank you for the heads up!

35

Here’s my project link:

Let me know how you like it! I’ll probably keep tinkering with it at some point.

36

Project Link - https://codepen.io/GKlein/full/oLYbWa/

37

Hey there. I just checked your codepen (since I’m also working on this project). It gave me the location of San Antonio, but I’m located in NYC?

38

hi,
i almost finished my weather app.
i have problem on C to F conversion. i cannot return back to C to F value again and again. can anybody help me?
thanks,
link - http://codepen.io/saracaliemre/pen/wWzWbv?editors=1010/

39

You don’t need the ‘a’ tag.
<label> <input type="checkbox"> //display: none in css for input type=checkbox &deg;<span>C</span> </label> JS: $('label').on('click', function() { if($(this).is(':checked')) { // Celsius } else { // Fahrenheit }

40

I’m pretty happy with mine. I’ve been working on it on and off for a couple of weeks now and as an amateur weather forecaster it was something I could really get into.

I have a variety of full screen images depending on weather type, a wind arrow that rotates using the transform function of css and in theory it should only show rainfall if there has been any rainfall.

What do you think?
James