A collection of Web Components implementing portions of the OpenWeatherMap API.
x-weather
About
-
A collection of web components implementing portions of the OpenWeatherMap API.
Installation
Add Internet Explorer 11 compatible polyfills
<div id="ce-es5-shim">
<script>
if (!window.customElements) {
var ceShimContainer = document.querySelector('#ce-es5-shim')
// This prevents custom-elements-es5-adapter.js from parsing or running.
ceShimContainer.parentElement.removeChild(ceShimContainer)
}
</script>
<!-- Required, due to a conflict between the polyfills, transpilation, and IE... -->
<script
charset="utf-8"
src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
></script>
</div>
<!-- Web component polyfill (only loads what it needs) -->
<script
charset="utf-8"
src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
></script>
Load and register the web component in the CustomElementRegistry
<script src="https://cdn.jsdelivr.net/npm/x-weather@latest/lib/build-ie11-iife/iife/main.js"></script>
Usage
- After installation and signing up for an API key, use the custom element:
<x-weather
appid="NOT_A_REAL_API_KEY"
host="api.openweathermap.org"
location="Phoenix, Arizona"
>
<x-current scale="F"></x-current>
<x-forecast days="2" scale="F"></x-forecast>
</x-weather>
Additional information
- Other builds and examples (including basic service workers) can be found inside the lib folder
- The package can be installed and imported by npm:
npm i x-weather
import 'x-weather/lib/build-no-polyfills-esm/esm/main'
Install
Framework Support
Browser Independent
Install with
Run the above npm command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 1.0.3
Dependencies
- express#^4.16.3