open-weather - GitLite

KO | EN

gitlite — search

#javascript #typescript #go #machine-learning #rust #docker #nodejs #macos #windows #awesome-list #security #mcp #ios #open-source

open-weather

(★ 152)

A simple, lightweight jQuery plugin used to display the current weather of any city using the free OpenWeatherMap API.

파일 탐색기

최종 버전 다운로드 (.zip)

- openweather.min.js
- index.html
- - style.css
- - .DS_Store
- - jquery.1.9.1.min.js
- .DS_Store
- openweather.js
.DS_Store
bower.json
LICENSE.md
open-weather.jquery.json
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/michael-lynch/open-weather

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd open-weather

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Open Weather

A simple, lightweight jQuery plugin used to display the current weather of any city using the free <a href="http://openweathermap.org/api" target="_blank">OpenWeatherMap API</a>.

This plugin allows you to display the location, the current temperature, the current low temperature, the current high temperature, a description of the current weather, a weather icon, the humidity level, the wind speed, the time the sun will rise, and the time the sun will set.

<strong>An API key is not required but it is reccomended. <a href="http://openweathermap.org/login">Register</a> your application to obtain an OpenWeatherMap API key.</strong>

<a href="http://michael-lynch.github.io/open-weather/" target="_blank">See demo</a>

## Instructions

Include jQuery and the plugin in the head or footer of your page.

```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="/js/plugins/openWeather.js"></script>
```

The only default output is the current temperature.

To display the current temperature, create an element on your page where the current temperature will be displayed.

```html
<div class="weather-temperature"></div>
```

Initialize the plugin targeting the class, ID or element that you've created with either the 'city' option or 'lat' and 'lng' options set.

```js
$('.weather-temperature').openWeather({
	city: 'Toronto'
});
```

OR

```js
$('.weather-temperature').openWeather({
	lat: 30,
	lng: 25
});
```

## Custom Icons

The OpenWeatherMap API returns their own set of icons, however, if you don't want to use them, the plugin also allows you to use 6 custom icons for both day and night, so 12 in total. Custom icons must be named as follows:

<ul>
	<li>clear.png</li>
	<li>clouds.png</li>
	<li>rain.png</li>
	<li>snow.png</li>
	<li>storm.png</li>
	<li>mist.png</li>
</ul>

To use custom icons create a directory where the icons will live and inside of that directory create two more directories, "day" and "night."

/img/icons/weather/day/
	/img/icons/weather/night/

Place your custom icons inside the "day" and "night" directories and initialize the plugin using the customIcons option.

```js
$('.weather-temperature').openWeather({
	city: 'Toronto',
	customIcons: '/img/icons/weather/'
});
```

<em>* Note that if you are using custom icons you must include all 12 images.</em>

#### Options

<p><em>key: integer</em>
<br />A string that defines the OpenWeatherMap API key for your application (default: null).
</p>

<p><em>lang: string</em>
<br />A string that defines the language (default: 'en').
<br />(English - en, Russian - ru, Italian - it, Spanish - sp, Ukrainian - ua, German - de, Portuguese - pt, Romanian - ro, Polish - pl, Finnish - fi, Dutch - nl, French - fr, Bulgarian - bg, Swedish - se, Chinese Traditional - zh_tw, Chinese Simplified - zh_cn, Turkish - tr)
</p>

<p><em>city: "city name, country / province/ state"</em>
<br />A string that defines the city (default: null).
</p>

<p><em>lat: integer</em>
<br />An integer that defines the latitude (default: null).
</p>

<p><em>lng: integer</em>
<br />An integer that defines the longitude (default: null).
</p>

<p><em>placeTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the location name (default: null).
</p>

<p><em>units: "c / f"</em>
<br />A string that defines the type of units (default: 'c').
</p>

<p><em>descriptionTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the weather description (default: null).
</p>

<p><em>minTemperatureTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the minimum temperature (default: null).
</p>

<p><em>maxTemperatureTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the maximum temperature (default: null).
</p>

<p><em>windSpeedTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the wind speed (default: null).
</p>

<p><em>windSpeedUnit: "Mps / km/h"</em>
<br />A string that defines the type of unit for windspeed. (default: 'Mps').
</p>

<p><em>humidityTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the humidity (default: null).
</p>

<p><em>sunriseTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the time of sunrise (default: null).
</p>

<p><em>sunsetTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the time of sunset (default: null).
</p>

<p><em>iconTarget: "id / class / element"</em>
<br />A string that defines the ID, class or element that will contain the icon image (default: null).
</p>

<p>customIcons: "path"</em>
<br />A string that defines the path to the custom icons (default: null).
</p>

<p><em>success: function() {}</em>
<br />A function that runs after the plugin has successfully retrieved weather data. (default: function()).
</p>

<p><em>error: function() {}</em>
<br />A function that runs if there was an error retrieving weather data. (default: function(message)).
</p>

##### Example:

```js
$(function() {

$('.weather-temperature').openWeather({
		lang: 'ru',
		city: 'Los Angeles',
		placeTarget: '.weather-place',
		units: 'f',
		windSpeedUnit: 'Mps',
		descriptionTarget: '.weather-description',
		minTemperatureTarget: '.weather-min-temperature',
		maxTemperatureTarget: '.weather-max-temperature',
		windSpeedTarget: '.weather-wind-speed',
		humidityTarget: '.weather-humidity',
		sunriseTarget: '.weather-sunrise',
		sunsetTarget: '.weather-sunset',
		iconTarget: '.weather-icon',
		customIcons: '/img/icons/weather/',
		success: function() {
			$('.weather-temperature').show();
		},
		error: function(message) {
			console.log(message);
		}
	});

});
```