Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html>
 
class App {
  constructor( props ) {
    this.nodeType = "People list";
    this.names = ["George", "Bob", "Donna", "Erica"];
  }
​
  render( el ) {
    const ul = document.createElement('ul')
    this.names
        .map( this._renderListItemName )
        .forEach( li => ul.appendChild(li) );
​
    el.innerHTML = ``;
    el.appendChild(ul);
  }
​
  _renderListItemName( name ) {
    const li = document.createElement('li');
    li.textContent = name;
    li.addEventListener( 'click', this._logClick );
    return li
  }
​
  _logClick() {
    alert( `You have clicked on a part of ${this.nodeType}` )
  }
}
​
new App().render( document.querySelector('body') )
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x