DHHRx7s0

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.long}`;
15    
16        $.ajax({url:url, dataType:"jsonp"}).then(function(data) {
17
18                    console.log(data)
19                    var temperature = null
20                    // TODO
21                    // 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.
22                    // F = 9/5 * C + 32
23                    var temperature = data.current.temperature * 9/5 + 32;
24
25                    console.log(temperature)
26
27                    //TODO
28                    // Default color gray
29                    // Create a series of if else blocks to set the color for the state based on the temperature
30                    // Less than equal to 10F	#6495ED
31                    // Between 11F and 20F	#7FFFD4
32                    // Between 21F and 30F	#0000FF
33                    // Between 31F and 40F	#008B8B
34                    // Between 41F and 50F	#00BFFF
35                    // Between 51F and 60F	#F08080
36                    // Between 61F and 70F	#CD5C5C
37                    // Between 71F and equal to 80F	#8B0000
38                    // Between 81F and equal to 90F	#B22222
39                    // Greater than 90F	#FF0000
40                    console.log(key)
41                    if (temperature <= 10) {
42                        $(`#${key}`).css('fill',"#6495ED");
43                    } else if (temperature <= 20) {
44                        $(`#${key}`).css('fill',"#7FFFD4");
45                    } else if (temperature <= 30) {
46                        $(`#${key}`).css('fill',"#0000FF");
47                    } else if (temperature <= 40) {
48                        $(`#${key}`).css('fill',"#008B8B");
49                    } else if (temperature <= 50) {
50                        $(`#${key}`).css('fill',"#00BFFF");
51                    } else if (temperature <= 60) {
52                        $(`#${key}`).css('fill',"#F08080");
53                    } else if (temperature <= 70) {
54                        $(`#${key}`).css('fill',"#CD5C5C");
55                    } else if (temperature <= 80) {
56                        $(`#${key}`).css('fill',"#8B0000");
57                    } else if (temperature <= 90) {
58                        $(`#${key}`).css('fill',"#B22222");
59                    } else {
60                        $(`#${key}`).css('fill',"#FF0000");
61                    }
62
63                    $('#CO').css('fill', "#F08080");   // Example on how to fill colors for your state.
64            });
65        }
66});