Skip to content

Instantly share code, notes, and snippets.

@cdbkr
Last active August 29, 2015 13:56
Show Gist options
  • Save cdbkr/8985547 to your computer and use it in GitHub Desktop.
Save cdbkr/8985547 to your computer and use it in GitHub Desktop.
who-am-i template.html
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="who-am-i">
<template>
<section>
<p>My name is <strong>{{name}}</strong>!
I am <strong>{{age}}</strong> years old.
I love <strong>{{fav_thing}}</strong></p>
<label for="ageInput">Age:</label>
<input id="ageInput" type="range" value="{{age}}">
<label for="nameInput">Name:</label>
<input id="nameInput" value="{{name}}" placeholder="Your name here...">
</section>
</template>
<script>
Polymer('who-am-i', {
age: 24,
fav_thing: "developing new stuff :)",
name: "Francis",
nameChanged: function() {
if (this.name) {
this.name = this.name[0].toUpperCase() + this.name.slice(1);
}
}
});
</script>
<style>
section{
width:50%;
margin:0 auto;
background-color: #ebebeb;
padding:1em;
border:1px solid #ebebeb;
border-radius:0.6em;
-moz-border-radius:0.6em;
-webkit-border-radius:0.6em;
}
</style>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment