A clean, attractive, simple weather widget, all in one <script> tag.
Made with Fomantic-UI
-- a community fork of Semantic-UI.
Provides current weather and a 5 day forecast. Can be set to refresh as often as
desired. Specify a different latitude and longitude to get a different forecast.
https://weather-widget.imfast.io/
Fomantic UI and JQuery are required. You must include JQuery before
the Fomantic UI Javascript. You can use the jsDelivr links in the example below,
otherwise you'll need to download Fomantic-UI
and JQuery from their respective sites and then
download and use weather-widget.js from this repo. (ONLY weather-widget.js
is needed from this repo. Other files in this repo are for the live example)
In a script tag (before the <script> tag containing weather-widget.js),
declare the configuration variables as a variable named fkweatherwidget.
Configuration variables include:
elemId: the id of the HTML element you are injecting the weather widget intohourlyRefreshSeconds: the amount of time in seconds to wait before refreshing the hourly forecastweeklyRefreshSeconds: the amount of time in seconds to wait before refreshing the weekly forecastlat: Latitude of the area to get a forecast forlng: Longitude of the area to get a forecast for
<!doctype html>
<html lang="en">
<head>
...
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
</head>
<body>
...
<div id="mywidget"></div>
...
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<script>
const fkweatherwidget = {
elemId: 'mywidget',
hourlyRefreshSeconds: 60 * 60,
weeklyRefreshSeconds: 60 * 60,
lat: 35.1056,
lng: -90.007,
}
</script>
<script src="https://cdn.jsdelivr.net/gh/kathawala/[email protected]/weather-widget.min.js"></script>
</body>
</html>