43Hzbkdi

1$(document).ready(function() {
2    var apiKey = "5bc82451636190abd9d7afe6fe9b20b5" // Enter the API key
3    console.log(`state_info is: ${state_info}`) // Notice the templating here, use that when you form your url
4
5    // TODO
6    // Iterate over the state_info array and call the api for each state_name to get the current temperature
7    // Example to call the api using state_name
8    // This should be done inside the for loop
9
10    for (var key in state_info) {
11        // var state_obj = state_info['CO']
12        console.log(key)
13        state_obj = state_info[key];
14        var url =`https://api.weatherstack.com/forecast?access_key=${apiKey}&query=${state_obj.lat},${state_obj.lng}`;
15    
16
17        $.ajax({url:url, ajaxKey:key, dataType:"jsonp"}).then(function(data) {
18
19                    key = this.ajaxKey;
20                    console.log(key)
21                    console.log(data)
22                    var temperature = null
23                    // TODO
24                    // Fill in the RHS of the below line and uncomment it. Remember how we accessed the temperature in Lab 9. Remember to convert it into farenheit.
25                    // F = 9/5 * C + 32
26                    var temperature = data.current.temperature * 9/5 + 32;
27                    // console.log(temperature)
28
29                    //TODO
30                    // Default color gray
31                    // Create a series of if else blocks to set the color for the state based on the temperature
32                    // Less than equal to 10F	#6495ED
33                    // Between 11F and 20F	#7FFFD4
34                    // Between 21F and 30F	#0000FF
35                    // Between 31F and 40F	#008B8B
36                    // Between 41F and 50F	#00BFFF
37                    // Between 51F and 60F	#F08080
38                    // Between 61F and 70F	#CD5C5C
39                    // Between 71F and equal to 80F	#8B0000
40                    // Between 81F and equal to 90F	#B22222
41                    // Greater than 90F	#FF0000
42                    if (temperature <= 10) {
43                        $(`#${key}`).css('fill',"#6495ED");
44                    } else if (temperature <= 20) {
45                        $(`#${key}`).css('fill',"#7FFFD4");
46                    } else if (temperature <= 30) {
47                        $(`#${key}`).css('fill',"#0000FF");
48                    } else if (temperature <= 40) {
49                        $(`#${key}`).css('fill',"#008B8B");
50                    } else if (temperature <= 50) {
51                        $(`#${key}`).css('fill',"#00BFFF");
52                    } else if (temperature <= 60) {
53                        $(`#${key}`).css('fill',"#F08080");
54                    } else if (temperature <= 70) {
55                        $(`#${key}`).css('fill',"#CD5C5C");
56                    } else if (temperature <= 80) {
57                        $(`#${key}`).css('fill',"#8B0000");
58                    } else if (temperature <= 90) {
59                        $(`#${key}`).css('fill',"#B22222");
60                    } else {
61                        $(`#${key}`).css('fill',"#FF0000");
62                    }
63
64                    $('#CO').css('fill', "#F08080");   // Example on how to fill colors for your state.
65            });
66        }
67});