Polymer helloworld: create web component using dom-module

<link rel="import" href="../bower_components/polymer/polymer.html" />

<dom-module id="user-info">
    <template>
        <div id="container">
            Hi, <span>{{user_name}}</span>!
        </div>
    </template>

    <style>
        #container {
            font-size: 11px;
            color: gray;
        }

    </style>

    <script>
        Polymer({
            is: 'user-info',
            properties: {
                user_name: {
                    type:String,
                    value:"Mr.default"
                }
            }
        });
    </script>

</dom-module>

<link rel="import" href="components/user-info.html" />
<template is="dom-bind">
    <user-info user_name="Li"></user-info>
</template>

Python: Parse HTML using Beautiful Soup

Requirement:

Get the FX rate from: http://fx.cmbchina.com/hq

Solution:

Use urllib2 to get the html, use BeautifulSoup to parse the html;

Details:

1.  Get html by urllib2:

import urllib2
html = urllib2.urlopen(“http://fx.cmbchina.com/hq”).read()

2. parse the html using BeautifulSoup:

install it:

$ apt-get install python-bs4 // http://www.crummy.com/software/BeautifulSoup/bs4/doc/#installing-beautiful-soup

Python Code:

from bs4 import BeautifulSoup
soup = BeautifulSoup(html)   # you may check the HTML by: print(soup.prettify()) 
sgRateString = soup.find(id=”realRateInfo”).find_all(‘tr’)[8].find_all(‘td’)[5].get_text()
sgRate = float(sgRateString)
print ‘SG Rate:’, sgRate

All Code:

Links

urllib2 examples:  https://docs.python.org/2/library/urllib2.html#examples

BeautifulSoup Quick Start: http://www.crummy.com/software/BeautifulSoup/bs4/doc/#quick-start

Enable/Disable button in HTML using JavaScript

Here is a button:

And also have a radio button group to control the button:

<input type="radio" name="agrmt" value="decline" id="radioDecline" onclick="disableAcceptButton(true)"/> I do not accept the agreement

And here is the javaScript:

Show/Hide Div using JavaScript

Show/Hide div by style.block using JavaScript.

the href button:

<a href="#" onclick="switchDiv()">SwitchDiv</a>

The js:

switchFlag = true;
function switchDiv() {
// alert("clicked");
switchFlag = !switchFlag;

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

if(switchFlag) {
div1.style.display="block";
div2.style.display="none";

}else {
div1.style.display="none";
div2.style.display="block";
}
}

problems with font color in Firefox/Chrome

CSS:

.2f_subtext {
font-size: 11px;
color: #FFFFFF;
}

The font color is white in IE, there’s no problem, but in Firefox or Chrome, the font color is black.

W3C Css  validator :

In CSS1, a class name could start with a digit (“.55ft”), unless it was a dimension (“.55in”). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make “2f_subtext” a valid class, CSS2 requires the first digit to be escaped “.\32 f_subtext” [2f_subtext]