Weather App: Showing Weather over multiple days using Dark Sky

JavaScript
1

I decided to try and create a second weather app, this time using Dark Sky API. I’ve had a lot more success this time around, but now I’m stuck on something that is probably very simple.

I want to show the weather over multiple days. I have my app set up to show the forecast over 5 days, but I can’t seem to figure out how to pull in the information for the rest of the week. Anyone else run into this problem?

Here’s my pen to show what I’m trying to do: https://codepen.io/Qwicksilver/pen/kkZBrj
(Make sure the https:// is at the beginning or else it won’t work - stupid cross-origin… >_<)

2

You want to use “daily”, not “currently”.

1 Like
3

How do I set up the url for it to use “daily” and not “currently”? I think that’s what I’m stuck on right now.

4

Nice design :thumbsup:

1 Like
5

Thank you! I’m using the Persona 4 calendar that shows up in-between days as inspiration.

6

Dark sky API shows a lot of address info than Openweather API.

I like your code. Nicely formatted with commentary. It’s a good practice I think. It’s easier this way for other developers to fork or help maintain your code.

1 Like
7

Thank you! It’s a habit I’m trying to keep up with each project I work on.

8

Still looking for some help on how to make the weather show up daily. It was mentioned I needed to use “daily” instead of “currently”, which I’ve tried with no results. I know I’m missing something really simple somewhere. Can anyone give an assist?

9

The data you are receiving gets both daily and concurrently. Open up the url of your api request, and see all the data you are getting.

11

**Edit: It worked! Thanks everyone! Wow I don’t think I would have been able to figure that one out on my own! I also don’t know why I wasn’t using the inspector to view the daily object instead of staring at the raw unformatted JSON on the screen to see what was going on. Guess my brain was wasn’t working well that day. But again, thank you! I’m so glad to have this figured out. :slight_smile: **

My god I think that’s what I’ve been looking for!

So if I wanted to get the temp for the rest of the week I would pull the information from the array like this: daily.data[ 1- whenever].apparaentTemperature Max

That way it will be set up to show the forecast rest of the week.

I’m going to go try this out now and see how it works.

1 Like
13

Hi,
I was reading your code and couldn’t understand how are you displaying the temperature? It will be great if you can explain this part as I am stuck over this weather app since long.

	var usingFahrenheit = true;

	// Create an array to calculate between scales once and flip as a user wants
	var temperatures = {
		fahrenheit: [],
		celsius: []
	};

	function insertData(array) {
		// Use ternary operator here to assign F or C symbol to tempSymbol
		var tempSymbol = usingFahrenheit ? "&deg;F" : "&deg;C";

		return $.each(array, function(index, value) {
			$('.temp' + index).html(value + tempSymbol);
		});
	}

	$('#convertTemp').click(function() {
		// invert our usingFahrenheit flag
		usingFahrenheit = !usingFahrenheit;

		if (usingFahrenheit) {
			insertData(temperatures.fahrenheit);
		} else {
			insertData(temperatures.celsius);
		}
	});
14

Hey there! Sorry for the delay! I’ll explain what I did and hope it helps.

Here I’m setting the default temp to be Fahrenheit.

var usingFahrenheit = true;

Next you create two arrays to hold the temperatures so they can be viewed when the user wants to see the conversion.

var temperatures = {
		fahrenheit: [], 
		celsius: []
	};

A function checks to see if the symbol for Fahrenheit or Celsius is being used, then loops through the array and adds the correct symbol to the temp value.

function insertData(array) {
		var tempSymbol = usingFahrenheit ? "&deg;F" : "&deg;C";

		return $.each(array, function(index, value) {
			$('.temp' + index).html(value + tempSymbol);
		});
	}

And here is where I set up the convertTemp click event. It first checks to see if Fahrenheit is being used or now and runs the insertData function above depending on the result of the if statement.

$('#convertTemp').click(function() {
		// invert our usingFahrenheit flag
		usingFahrenheit = !usingFahrenheit;

		if (usingFahrenheit) {
			insertData(temperatures.fahrenheit);
		} else {
			insertData(temperatures.celsius);
		}
	});

Hope this helps! Let me know if you need me to explain anything else! :slight_smile:

1 Like
15

Thankyou. This was quite detailed and surely helped me in understanding.
Thanks again :slight_smile:

1 Like
16

Awesome! I’m glad I was able to help! :slight_smile:

1 Like
17

danjimoss how was you able to get next days datas?