36 | Instructions: Enter a City AND Country to see the current weather.
37 | Example: Boston, USA or London, UK
38 |
Created By: KMedinaTheDev
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | ## My Weather App, using Open Weather Map's API!
4 |
5 | I developed a weather App!
6 | 1. Use the prompts to enter the City and Country.
7 | 2. The weather for the location searched will populate in a table I have created in HTML.
8 | 3. You'll receive the current temperature along with the Highs and Lows for the Today, in both Fahrenheit and Celsius.
9 | 4. As an added bonus you'll also be informed on the humidity level.
10 |
11 | ## How It's Made
12 |
13 | 1. JavaScript, jQuery
14 | 2. HTML
15 | 3. CSS
16 | 4. Open Weather Map API key required
17 |
18 | In order to use this weather app please be sure to sign up for openweathermap.org and generate your own API. This API allows you to make 1000 request per day. Once you have your personal API key simply plop it into the apiKey variable provided in the main.js file and you're good to go.
19 |
20 | I Perform an asynchronous HTTP (Ajax) request to pull the current weather data for the city and country searched. In another app I use coordinates instead of the city and country to pull similar data.
21 |
22 | I chose to display the data pulled in a table for readability.
23 |
24 | ##Optimizations
25 |
26 | Initially my app pulled the weather in Kelvin, as this is the format in which it is stored. I added a function to convert from kelvin to Fahrenheit and since most countries actually use Celsius I later decided to feature the temperature reading using both of these. Keeping both conversions inside of one function along with manipulating the DOM allowed me to call this function only once and populate the data into the table simultaneously.
27 |
28 | Since I'm currently in Boston and the temperature can dip quite quickly I thought it important to include High and Lows for the day. This also allowed me to practice targeting specific data from the object and displaying it.
29 |
30 | Humidity levels are extremely influential, this bonus feature can be quite useful, especially for anyone wondering what kind of hair day it may be.
31 |
32 | ## Improvements to Be Made:
33 |
34 | With more time I would make this app fully responsive for use on all devices.
35 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | - Sign up for openweathermap.org and generate an API key.
4 | - Use either $.ajax to pull weather current data .
5 | for Washington DC (hint: http://api.openweathermap.org/data/2.5/weather?q=...).
6 | - Print the temperature in console.
7 | - Bonus 1: add a form prompting user for the city and state.
8 | - Bonus 2: convert answer from kelvin to fahrenheit.
9 |
10 | */
11 |
12 | $(document).ready(function(){
13 | var city = prompt("Enter Your City:"); //variables hold the user's input
14 | var country = prompt("Enter Your Country:");
15 | var temp = 0;
16 | var tempMin=0;
17 | var tempHigh=0;
18 | var humidity =0;
19 |
20 | if (city === "" || country === "") {
21 | // user pressed OK, but the input field was empty
22 | alert("OOPS! You Must Enter A City & A Country!")
23 | };
24 |
25 | var weatherUrl = "http://api.openweathermap.org/data/2.5/weather?q=";
26 | var apiKey = ""; //your key will go here!
27 |
28 | $.ajax({
29 | url: weatherUrl+city+","+country+"&appid="+apiKey,
30 |
31 | success: function(r){
32 | temp=r.main.temp;
33 | tempMin=r.main.temp_min;
34 | tempHigh=r.main.temp_max;
35 | humidity= r.main.humidity;
36 | convert();
37 |
38 | console.log(r);
39 | },
40 | error: function(r){
41 | console.log(r);
42 | }
43 |
44 |
45 | });
46 |
47 | function convert(){
48 | var temp2 = Math.round(temp * 9 / 5 - 459.67);
49 | var tempMin2= Math.round(tempMin * 9 / 5 - 459.67);
50 | var tempHigh2= Math.round(tempHigh * 9 / 5 - 459.67);
51 | $("#location").html(city + ", " + country)
52 | $('#temperatureF').html("Currently: " +temp2 + " F");
53 | $('#highsF').html(tempHigh2 +" F");
54 | $('#lowsF').html(tempMin2+ " F");
55 | $("#humidity").html(humidity + "% Humidity");
56 |
57 | var temp3 = Math.round((temp2 - 32 ) * (5/9));
58 | var tempMin3 = Math.round((tempMin2 - 32 ) * (5/9));
59 | var tempHigh3 = Math.round((tempHigh2 - 32 ) * (5/9));
60 | $('#temperatureC').html("Currently: " +temp3 + " C");
61 | $('#highsC').html(tempHigh3 +" C");
62 | $('#lowsC').html(tempMin3+ " C");
63 |
64 | }
65 |
66 | });
67 |
--------------------------------------------------------------------------------