Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kathawala/weather-widget

Clean, attractive weather widget all in one `<script>` tag, built with Fomantic UI (community fork of Semantic UI) https://weather-widget.imfast.io/
https://github.com/kathawala/weather-widget

fomantic-ui semantic-ui weather weather-widget

Last synced: 26 days ago
JSON representation

Clean, attractive weather widget all in one `<script>` tag, built with Fomantic UI (community fork of Semantic UI) https://weather-widget.imfast.io/

Host: GitHub
URL: https://github.com/kathawala/weather-widget
Owner: kathawala
License: mit
Created: 2020-04-27T04:31:31.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-04-27T04:39:42.000Z (over 4 years ago)
Last Synced: 2024-11-02T06:30:44.514Z (about 1 month ago)
Topics: fomantic-ui, semantic-ui, weather, weather-widget
Language: JavaScript
Homepage: https://weather-widget.imfast.io/
Size: 180 KB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-semantic-ui - Weather-Widget

README

        # weather-widget

A clean, attractive, simple weather widget, all in one `` tag.

Made with [Fomantic-UI](https://github.com/fomantic/Fomantic-UI)

-- a community fork of [Semantic-UI](https://github.com/Semantic-Org/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.

## Check It Out

[https://weather-widget.imfast.io/](https://weather-widget.imfast.io/)

![Screenshot of the weather widget utility, showing the current weather

and an 5-day forecast](https://github.com/kathawala/weather-widget/blob/master/screenshot.png)

## Usage

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](https://github.com/fomantic/Fomantic-UI)

and [JQuery](https://jquery.com/) 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 into

* `hourlyRefreshSeconds`: the amount of time in seconds to wait before refreshing the hourly forecast

* `weeklyRefreshSeconds`: the amount of time in seconds to wait before refreshing the weekly forecast

* `lat`: Latitude of the area to get a forecast for

* `lng`: Longitude of the area to get a forecast for

```html

<!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">

	

	

	 const fkweatherwidget = {

	     elemId: 'mywidget',

	     hourlyRefreshSeconds: 60 * 60,

	     weeklyRefreshSeconds: 60 * 60,

	     lat: 35.1056,

	     lng: -90.007,

	 }