HTML5, CSS3 & JS Experiments

By Martin Ivanov

Weather Widget

X-Weather is a HTML5 Web Component, utilizing the weather API of openweathermap.org.

<acidjs-xweather city="London" countrycode="uk"></acidjs-xweather>
<acidjs-xweather units="imperial" city="Frankfurt" countrycode="de"></acidjs-xweather>
<acidjs-xweather city="Valletta" width="300" height="100" countrycode="mt"></acidjs-xweather>
<acidjs-xweather city="Prague" countrycode="cz" bgcolor="#ff2e12"></acidjs-xweather>

Demo

Default Configuration



Displaying Imperial Units



Custom Width and Height



Custom Background Color



Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XWeather/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XWeather/classes/XWeather.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            <h4>Default Configuration</h4>
            <acidjs-xweather city="London" countrycode="uk"></acidjs-xweather>
            
            <br /><br />
            <h4>Displaying Imperial Units</h4>
            <acidjs-xweather units="imperial" city="Frankfurt" countrycode="de"></acidjs-xweather>
            
            <br /><br />
            <h4>Custom Width and Height</h4>
            <acidjs-xweather city="Valletta" width="300" height="100" countrycode="mt"></acidjs-xweather>
            
            <br /><br />
            <h4>Custom Background Color</h4>
            <acidjs-xweather city="Prague" countrycode="cz" bgcolor="#ff2e12"></acidjs-xweather>
            
            <br /><br />
        
/*
 * X-Weather HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/wemakesitesnet
 * @url developer blog http://martinivanov.net
 **/

/*
 * USAGE:
 * 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
 * 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required. 
 **/

acidjs-xweather,
acidjs-xweather *
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "Open Sans", Helvetica, Arial, Sans-serif;
    font-variant: small-caps;
}

acidjs-xweather p,
acidjs-xweather > div > a,
acidjs-xweather h3 + .acidjs-xweather-grid > div > div:nth-child(2)
{
    text-align: center;
}

acidjs-xweather,
acidjs-xweather .acidjs-xweather-icon
{
    display: inline-block;
}

acidjs-xweather,
acidjs-xweather .acidjs-xweather-grid > * > *
{
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xweather h3 + .acidjs-xweather-grid > div > div:first-child,
acidjs-xweather h3 .acidjs-xweather-grid > div > div:last-child
{
    text-align: right;
}

acidjs-xweather > div
{
    margin: .2em;
    font-size: 16px;
    background: #666;
    cursor: default;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .5);
    border-radius: 3px;
}

acidjs-xweather .acidjs-xweather-grid
{
    display: table;
    width: 100%;
    border-collapse: collapse;
}

acidjs-xweather .acidjs-xweather-grid > *
{
    display: table-row;
}

acidjs-xweather .acidjs-xweather-grid > * > *
{
    display: table-cell;
}

acidjs-xweather h3 a
{
    text-decoration: none;
}

acidjs-xweather h3 a:hover
{
    text-decoration: underline;
}

acidjs-xweather h3
{
    font-size: .8em;
    font-weight: 400;
}

acidjs-xweather h3 .acidjs-xweather-grid > div > div:last-child
{
    padding-right: .5em;
}

acidjs-xweather h3 + .acidjs-xweather-grid
{
    table-layout: fixed;
}

acidjs-xweather h3 + .acidjs-xweather-grid > div > div:nth-child(2)
{
    width: 50%;
}

acidjs-xweather .acidjs-xweather-icon
{
    width: 3em;
    height: 3em;
    vertical-align: bottom;
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
}

acidjs-xweather strong
{
    font-size: 2em;
}

acidjs-xweather p
{
    padding: 0 .2em;
    font-size: .75em;
    text-transform: lowercase;
}

acidjs-xweather > div > a
{
    display: block;
    padding: .2em 0 .3em;
    font-size: .5em;
    text-transform: uppercase;
    opacity: .5;
}

acidjs-xweather .acidjs-xweather-error
{
    padding: .5em;
}

acidjs-xweather .acidjs-xweather-icon-01
{
    background-image: url("images/01.svg");
}

acidjs-xweather .acidjs-xweather-icon-02
{
    background-image: url("images/02.svg");
}

acidjs-xweather .acidjs-xweather-icon-03
{
    background-image: url("images/03.svg");
}

acidjs-xweather .acidjs-xweather-icon-04
{
    background-image: url("images/04.svg");
}

acidjs-xweather .acidjs-xweather-icon-09
{
    background-image: url("images/");
}

acidjs-xweather .acidjs-xweather-icon-10
{
    background-image: url("images/10.svg");
}

acidjs-xweather .acidjs-xweather-icon-11
{
    background-image: url("images/11.svg");
}

acidjs-xweather .acidjs-xweather-icon-13
{
    background-image: url("images/13.svg");
}

acidjs-xweather .acidjs-xweather-icon-50
{
    background-image: url("images/50.svg");
}