Last active
January 20, 2017 01:47
-
-
Save tesshsu/c09cc1558f08cb233abe3cdc9f64ae23 to your computer and use it in GitHub Desktop.
module: add people list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html > | |
<head> | |
<meta charset="UTF-8"> | |
<title>People module</title> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<div id="peopleModule"> | |
<h1>Add People list</h1> | |
<input placeholder="name" type="text"> | |
<button id="addPerson">Add Person</button> | |
<ul id="people"> | |
<script id="people-template" type="text/template"> | |
{{#people}} | |
<li> | |
<span>{{.}}</span> | |
<i class="del">X</i> | |
</li> | |
{{/people}} | |
</script> | |
</ul> | |
</div> | |
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> | |
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js'></script> | |
<script src="module.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var people = { | |
people: ['Tess', 'Anais'], | |
init: function() { | |
this.cacheDom(); | |
this.bindEvents(); | |
this.render(); | |
}, | |
cacheDom: function() { | |
this.$el = $('#peopleModule'); | |
this.$button = this.$el.find('button'); | |
this.$input = this.$el.find('input'); | |
this.$ul = this.$el.find('ul'); | |
this.template = this.$el.find('#people-template').html(); | |
}, | |
bindEvents: function() { | |
this.$button.on('click', this.addPerson.bind(this)); | |
this.$ul.delegate('i.del', 'click', this.deletePerson.bind(this)); | |
}, | |
render: function() { | |
var data = { | |
people: this.people, | |
}; | |
this.$ul.html(Mustache.render(this.template, data)); | |
}, | |
addPerson: function() { | |
this.people.push(this.$input.val()); | |
this.render(); | |
this.$input.val(''); | |
}, | |
deletePerson: function(event) { | |
var $remove = $(event.target).closest('li'); | |
var i = this.$ul.find('li').index($remove); | |
this.people.splice(i, 1); | |
this.render(); | |
} | |
}; | |
people.init(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background: #fafafa; | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
color: #333; | |
} | |
.hero-unit { | |
margin: 20px auto 0 auto; | |
width: 300px; | |
font-size: 12px; | |
font-weight: 200; | |
line-height: 20px; | |
background-color: #eee; | |
border-radius: 6px; | |
padding: 10px 20px; | |
} | |
.hero-unit h1 { | |
font-size: 60px; | |
line-height: 1; | |
letter-spacing: -1px; | |
} | |
.browsehappy { | |
margin: 0.2em 0; | |
background: #ccc; | |
color: #000; | |
padding: 0.2em 0; | |
} | |
input { | |
border: 1px solid #999; | |
border-radius: 4px; | |
padding: 10px; | |
} | |
button { | |
zoom: 2; | |
background-color: #222; | |
border: 1px solid #999; | |
border-radius: 4px; | |
padding: 1px 5px; | |
color: #fff; | |
} | |
button.active { | |
background-color:rgb(165, 227, 158); | |
} | |
#peopleModule { | |
text-align: center; | |
} | |
#peopleModule ul { | |
padding: 0; | |
} | |
#peopleModule li { | |
display: inline-block; | |
list-style-type: none; | |
background: #74f1f9; | |
border-radius: 5px; | |
padding: 8px 8px; | |
margin: 5px 0; | |
width: 200px; | |
opacity: 0.8; | |
transition: opacity 0.3s; | |
} | |
#peopleModule li:hover { | |
opacity: 1; | |
} | |
#peopleModule li span { | |
display: inline-block; | |
width: 160px; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
#peopleModule li i { | |
cursor: pointer; | |
font-weight: bold; | |
float: right; | |
font-style: normal; | |
background: #666; | |
padding: 2px 4px; | |
font-size: 60%; | |
color: white; | |
border-radius: 20px; | |
opacity: 0.7; | |
transition: opacity 0.3s; | |
margin-top: 3px; | |
} | |
#peopleModule li i:hover { | |
opacity: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment