QR Code generator

The latest build of Ember.

by darthdeus

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>QR Networking code generator</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <h2>Behold the mighty QR code</h2>
    {{input value=firstName placeholder="First Name"}}<br>
    {{input value=lastName placeholder="Last name"}}<br>
    {{input value=position placeholder="Position"}}<br>
    {{input value=company placeholder="Company"}}<br>
    {{input value=phone placeholder="Phone"}}<br>
    {{input value=email placeholder="Email"}}<br>
    {{input value=linkedin placeholder="Linked in"}}<br>
    {{input value=questionText placeholder="Question text"}}<br>
    {{textarea value=options placeholder="Answer options" as="textarea"}}<br>
    
    {{textarea value=text}}<br>
    <img {{bindAttr src=qrUrl}}>
  </script>

CSS

h1 {
    font-size: 1.6em;
    padding-bottom: 10px;
}
h2 {
    font-size: 1.4em;
}
ul {
    padding: 15px;
    font-size: 1.4em;
    color: green;
}

JavaScript

App = Ember.Application.create({});

App.IndexController = Ember.Controller.extend({
    firstName: "",
    lastName: "",
    position: "",
    company: "",
    phone: "",
    email: "",
    linkedin: "",
    questionText: "",
    options: "",

    text: function () {
        return "$" + this.get("firstName") + "|" + this.get("lastName") + "|" + this.get("position") + "|" + this.get("company") + "|" + this.get("phone") + "|" + this.get("email") + "|" + this.get("linkedin") + "|" + this.get("questionText") + "|" + this.get("options");
    }.property("firstName", "lastName", "position", "company", "phone", "email", "linkedin", "questionText", "options"),

    qrUrl: function () {
        return encodeURI("https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=400x400&chl=" + this.get("text"));
    }.property("text")
});