Weather Wonka
Weather Wonka displays data from the Willy Weather API in your site or app.
Getting started
1. Install the plugin
npm install weather-wonka
2. Import plugin into JS and configure it
The default template creates BEM based markup.
If you'd like to adjust the markup then choose the 'b' option below.
a) Use the default templates
; // The element where the html will be addedconst el = document; // The url for the weather data api// Cors issues when testing locally? Prefix url with 'https://cors.io/?'const apiUrl = 'https://api.willyweather.com.au/v2/[YOUR_WILLY_WEATHER_KEY]/locations/8672/weather.json?forecasts=weather'; // Start the pluginel apiUrl days: 1 ;
This config will produce the following markup:
Monday Min 17 Max 31
b) Define custom templates
If you'd like complete control of the produced markup then you can create custom templates like this:
; // The template for the day(s)const templateContainer = ` <div class=""></div>`; // The template for each dayconst templateDay = ` <div class="__item"> <div class="__day"></div> <svg class="__icon" data-label="" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" > <use xlink:href="#"></use> </svg> <div class="__precis"></div> <div class="__min">Min </div> <div class="__max">Max </div> </div>`; // Customise the day namesconst dayNames = 'Sun''Mon''Tue''Wed''Thu''Fri''Sat'; // The element where the html will be addedconst el = document; // The url for the weather data api// Cors issues when testing locally? Prefix url with 'https://cors.io/?'const apiUrl = "https://api.willyweather.com.au/v2/[YOUR_WILLY_WEATHER_KEY]/locations/8672/weather.json?forecasts=weather"; // Start the pluginel apiUrl blockName: 'weather' days: 7 templateContainer templateDay dayNames;
3. Add the weather container to your markup
Add the container with the data-weather selector and the inner html will be replaced with the weather markup.
In this case, we'll be linking to a weather page when the weather is selected and if JavaScript is disabled, the user will see a plain link instead:
View the weather
4. Style the markup
SCSS
Either use the default SCSS styles as a starting point:
;
Or write custom styles for to suit the markup.
Icons
The default templates assume you're using a SVG icon sprite within your markup.
We've included some icons (sprite included) to get you started but you can define your own custom icons.
Demo
- Add your Willy Weather API key within
weather-wonka/src/demo.html
npm run build
npm start
Credits
Weather Wonka is created by @benrogerson @ Simple.