Let's discuss your "Local Weather App"

Let's discuss your "Local Weather App"

Hey, I had the same problem. You can use crossorigin.me to overcome that: instead of http://openweathermap.org/whatever you can use https://crossorigin.me/http://openweathermap.org/whatever. Or alternatively, you can use some kind of api that gets the location based on ip address.



Thanks for the tip. I gave it a try and it still failed. Went to crossorigin.me and it said the server is down :expressionless: When I get off work tonight I will try again and probably try to find a more reliable cors server. Anyway thanks again.



The website is indeed regularly down. Let me now if you find another site.



Well, when I got home the crossorigin.me server was up again so I stuck with that and managed to get some more work done on my projects. However about 3 hours later it was down again, so I went looking for an alternative and found https://cors-anywhere.herokuapp.com/ . It seems to be stable and is working fine for me. They do limit request to 600 per hour, but for the purpose of this project that is more than enough.



Project Link -https://codepen.io/Josh5231/full/BzNgwW/
You will need to be in HTTPS for this to work. PLease let me know what you guys think.

1 Like


Here’s mine. Just finished it.

Project Link - http://codepen.io/RadEdje/full/ZOQReG/

I found a cool jquery plugin for the weather (using yahoo weather api)… it’s in the link of references at the bottom of my pen if anybody wants to use it. The developer has a great you tube tutorial. Then I realized i was losing out on learning about openWeatherMap api’s so I made a second weather app machine… yahoo and openWeatherMap don’t seem to agree very much though. I put the 2 side by side.

Any constructive criticism would be great. Thanks.

By the way,
If any body has trouble with the location api… this thread in our forum was really helpful. I’d like to thank everyone on that thread too for all their help and advice.

1 Like


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

1 Like


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



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.



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.



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


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

Let me know if there is anything broken.



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.




@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…”



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.



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/



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.



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


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

{“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!



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!