Javascript vCard generator with QR code
http://jsfiddle.net/fayRk/8/
by totoe
HTML
<h1>Javascript vCard generator with QR code</h1>
<p>This is made after reading about <a href="http://jumpscan.com/">JumpScan</a>, a dedicated QR code reader for contact information.</p>
<h2>Add data</h2>
<form action="" method="post">
<fieldset>
<legend>You</legend>
<p><label>First name</label><input type="text" name="first_name" size="40"></p>
<p><label>Last name</label><input type="text" name="last_name" size="40"></p>
<p><label>Birthday</label><input type="text" name="birthday" size="40"></p>
<p><label>Gender</label><select name="gender">
<option></option>
<option value="Female">Female</option>
<option value="Male">Male</option>
</select></p>
</fieldset>
<fieldset>
<legend>Home</legend>
<p><label>Street and number</label><input type="text" name="home_street" size="40"></p>
<p><label>City</label><input type="text" name="home_city" size="40"></p>
<p><label>Postal code</label><input type="text" name="home_region" size="40"></p>
<p><label>Region</label><input type="text" name="home_post" size="40"></p>
<p><label>Country</label><input type="text" name="home_country" size="40"></p>
<p><label>Telephone</label><input type="text" name="home_tel" size="40"></p>
<p><label>E-mail</label><input type="text" name="home_email" size="40"></p>
<p><label>Website</label><input type="text" name="home_url" size="40"></p>
</fieldset>
<fieldset>
<legend>Work</legend>
<p><label>Job title</label><input type="text" name="org_title" size="40"></p>
<p><label>Name</label><input type="text" name="org_name" size="40"></p>
<p><label>Street and number</label><input type="text" name="org_street" size="40"></p>
<p><label>City</label><input type="text" name="org_city" size="40"></p>
<p><label>Postal code</label><input type="text" name="org_region" size="40"></p>
...
CSS
body {background:#F15E22; color:#1D0A3F; }
h1, h2, h3 {color:#9CCB3C; }
h1 {font-size: 1.8em; }
h2 {font-size: 1.6em; }
h3 {font-size: 1.4em; }
fieldset {border:1em inset #A55125; padding: 0.5em; width:50% }
legend {font-size: 1.2em; color:#712773; }
label {display:block;}
input[type="button"] {border:5px outset #A55125; margin: 4px 0; padding: 1px; cursor:pointer; }
JavaScript
/**
* TODO:
* - add picture and company logo
*/
var vcard= {
str_start:'BEGIN:VCARD\nVERSION:3.0\n',
str_vcard:'BEGIN:VCARD\nVERSION:3.0\n',
str_end:'\nEND:VCARD',
goog_chart:'http://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=',
form:[],
get_field: function(field){
for(var i in vcard.form){
if(vcard.form[i].name === field){
return vcard.form[i].value.replace(/^\s+|\s+$/g,"");
}
}
},
add_you: function(){
var first_name = vcard.get_field("first_name"),
last_name = vcard.get_field("last_name"),
birthday = vcard.get_field('birthday'),
gender = vcard.get_field('gender');
vcard.str_vcard += 'N:'+last_name+';'+first_name+'\n'+
'FN:'+first_name+' '+last_name;
// TODO convert date to american format
if(birthday !== ''){ vcard.str_vcard += '\nBDAY:'+birthday; }
if(gender !== ''){ vcard.str_vcard += '\nX-GENDER:'+gender; }
},
add_address: function(){
var home_street = vcard.get_field("home_street"),
home_city = vcard.get_field("home_city"),
home_region = vcard.get_field("home_region"),
home_post = vcard.get_field("home_post"),
home_country = vcard.get_field("home_country"),
org_street = vcard.get_field("org_street"),
org_city = vcard.get_field("org_city"),
org_region = vcard.get_field("org_region"),
org_post = vcard.get_field("org_post"),
org_country = vcard.get_field("org_country");
if(home_street+home_city+home_region+home_post+home_country !== ''){
vcard.str_vcard += '\nADR;TYPE=home:;;'+home_street+';'+home_city+';'+home_region+
';'+home_post+';'+home_country;
}
if(org_street+org_city+org_region+org_post+org_country !== ''){
vcard.str_vcard +=...