19. Weather App Plugin

Checking the weather near you...

HTML

1
<div id="app">Checking the weather near you...</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/* Modify the script to let developers:
Pass in their own selector to render the weather into.
Decide whether to show temperatures in Fahrenheit of Celsius.
Change what message is shown.
Enable or disable the icon for the weather conditions.*/

const getWeather = function (options) {

  // Default settings for weather app
  const defaults = {
    apiKeyIp: null,
    apiKeyWeather: null,
    selector: '#app',
    convertTemp: false,
    noWeather: 'Unable to get weather data at this time. Sorry!',
    showIcon: true,
    showTemp: true,
    showCity: true,
    showConditions: true,
  };

  // Merge user settings into default
  const settings = Object.assign(defaults, options);

  // Get the #app element to render content
  const app = document.querySelector(settings.selector);

  // Secure your data
  const sanitizeHTML = function (str) {
    const temp = document.createElement('div');
    temp.textContent = str;
    return temp.innerHTML;
  }

  // Convert Celcius to Farenheit and round value
  const FarenheitToCelcius = function (temp) {
    if (settings.convertTemp) {
      return `${(Math.round((temp) * 9/5)) + 32} &#x2109`;
    }

    return `${Math.round(temp)} &#x2103`;
  };

  // Get weather icon form fetch data
  const getIcon = function (fetchData) {
    if (!settings.showIcon) return '';

    const html = `
      <div class="weather_icon">
        <img src="https://openweathermap.org/img/wn/${sanitizeHTML(fetchData.weather[0].icon)}@2x.png">
      </div>`
    return html;
  };

  // Get weather temperature from fetch data
  const getTemp = function (fetchData) {
    if (!settings.showTemp) return '';

    const html = `
      <h3 class="weather_temperature">
        ${FarenheitToCelcius(sanitizeHTML(fetchData.main.temp))};
      </h3>`
    return html;
  };

  // Get weather city location from fetch data
  const getCity = function (fetchData) {
    if (!settings.showCity) return '';

    const html = `
      <h4 class="weather_city-name">
        ${sanitizeHTML(fetchData.name)}
      </h4>`
    return html;
  };

  // Get weather conditions from fetch data
  const getConditions = function (fetchData) {
    if (!settings.showConditions) return '';

    const html = `
      <p class="weather_desc">
        ${sanitizeHTML(fetchData.weather[0].description)}
      </p>`
    return html;
  };

  // Render your weather data
  const renderWeather = function (fetchData) {
    app.innerHTML = (`
  <div class="weather_container">
    ${getIcon(fetchData)}
    ${getTemp(fetchData)}
    ${getCity(fetchData)}
    ${getConditions(fetchData)}
  </div>
  `)
  };

  // Render warning info when renderWeather doesn't work
  const renderNoWeather = function () {
    app.innerHTML = settings.noWeather;
  };

  // Check for API
  if (!settings.apiKeyIp || !settings.apiKeyWeather) {
    console.warn('Please provide an API key.');
    return;
  }

  // Get the user's location by IP address
  // Then, pass that into the weather API and get the current weather
  fetch(`https://api.ipgeolocation.io/ipgeo?apiKey=${settings.apiKeyIp}`).then(function (response) {
    if (response.ok) {
      return response.json();
    } else {
      return Promise.reject(response);
    }
  }).then(function (data) {
    return fetch(`https://api.openweathermap.org/data/2.5/weather?q=${data.city}&appid=${settings.apiKeyWeather}&units=metric`);
  }).then(function (response) {
    if (response.ok) {
      return response.json();
    } else {
      return Promise.reject(response);
    }
  }).then(function (data) {
    renderWeather(data);
  }).catch(function (err) {
    console.warn(err);
    renderNoWeather();
  })
}

// Init function - customize your settings
getWeather({
  apiKeyIp: 'd9f7add9f68440818a0659381720a532', // Replace this with your API key
  apiKeyWeather: '5e995a3338fe2917188f0f98d08abcec', // Replace this with your API key
  selector: '#app',
  convertTemp: false,
  noWeather: 'Unable to get weather data at this time. Sorry!',
  showIcon: true,
  showTemp: true,
  showCity: true,
  showConditions: true,
});