Skip to content

Instantly share code, notes, and snippets.

@revathskumar

revathskumar/jsbin.majoh.coffee

Created April 18, 2014 06:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save revathskumar/11027071 to your computer and use it in GitHub Desktop.
Save revathskumar/11027071 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.majoh.coffee
d = document
class Wrapper
constructor: (options) ->
@el = options.el
@el.querySelector('.add-item').addEventListener 'click', @add
add: (item) =>
item = new Item({el: d.createElement('li')}) unless item.el
@el.querySelector('.items').appendChild(item.el)
class Item
constructor: (options) ->
@el = options.el
@el.innerHTML = @createText(options.text)
@el.addEventListener 'click', @remove
createText: (text)->
text = if text then text else prompt('write something')
text + " <span class='close pull-right'>&times;</span>"
remove: (e) =>
if e.target.tagName.toLowerCase() == 'span'
@el.removeEventListener 'click', this
@el.parentNode.removeChild(@el)
# console.log(delete @)
wrap = new Wrapper({el: d.querySelector('.container') })
for ele in [1..10]
item = new Item({el: d.createElement('li'), text: ele})
wrap.add item
Raw
jsbin.majoh.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Bring Modularity to your views" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<ul class="items">
</ul>
<button class="btn add-item">Add Item</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment