A VUE3 Web Component for Weather & environment data
Shows the weather and environemnt data from given loaction
v0.1.1
<rz-weather></rz-weather>
<rz-weather location="Munich" title="the Weather" with_title="no"></rz-weather>
Parameter | Type | Description |
---|---|---|
location |
string |
Optional. "city" |
title |
string |
Optional. "the Weather" |
with_title |
string |
Optional. "yes" or "no" |
cookie
needs a loaclStorage key-val with API key from https://www.weatherapi.com/
rz-weather=<YOUR_API-KEY>
used folder structure
.
├── assets
│ ├── custom.css
│ ├── rz-weather.css
│ └── rz-weather.js
├── favicon.ico
└── index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="ZHENG Robert" />
<title>Web Component</title>
<meta name="description" content="Web Component for HTML footer" />
<meta name="version" content="v0.1.1" />
<meta name="author" content="ZHENG Robert" />
<meta name="date" content="2016-01-02T01:30:00+01:00" />
<link rel="alternate icon" href="./favicon.ico" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" crossorigin href="/assets/main.css" />
</head>
<body>
<div id="app">
<rz-openweather location="Munich"></rz-openweather>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
loaded weather data
no localStorage with API-Key
search masq
This web component is used by the following web sites:
- hase-zheng.net: Micro-Frontends and Microservices
- Robert Zheng Landing Page
- Points of Interest: Geo-Coordinates and Photos of POI's
- ZHENG Bote: private travel photos
- DigiDocuDev: web-based documentation management
🖖