Ferran Basora fcsonline

## test.js
alert('lol');

## dcsp.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script type="text/javascript" src="http://192.168.3.2/assets/javascript/app.js"></script>
    <script type="text/javascript" src="./monkeypatch.js"></script>
  </head>

  <body>

## teambox-qrcode.js
$(window).bind('hashchange', function(){

if (window.location.hash.match('users')) {

	setTimeout(function() {

	console.log('Showing Contact QR-Code...');


	var data = "";

## SelectableList.jsx
class SelectableList extends React.Component {

  onClickItem(event, index) {
     this.state.setState({
        selected: [
           ...this.state.selected,
           index
        ]
     });
  }

## CartItem.jsx
class CartItem extends React.Component {
  onClickRemove () {
    // Go to your store and remove item
  }

  render() {
    const { item } = this.props;
    const isPremium = item.premium ? 'premium' : '';

    return (

## SelectableList.css
.selectable-list {
  border: 1px solid #ddd;
}
.selectable-list li {
  padding-bottom: 10px; /* margin to padding ;) */
}
.selectable-list .selected {
  background-color: blue;
}

## Cart.html
<ul>
  <li>
    <div>
      <header>Item 1</header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
      <button>Remove from cart</button>
    </div>
  </li>
  <li class="selected"> <!-- More clear responsibilities (SelectList) -->
    <div class="premium"> <!-- More clear responsibilities (CartItem) -->

## CartList.html
<ul class="cart">
  <li>
    <header>Item 1</header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    <button>Remove from cart</button>
  </li>
  <li class="premium selected">
    <header>Item 2</header>
    <p>Fusce vel neque sit amet felis fermentum cursus vitae.</p>
    <button>Remove from cart</button>

## CartList.css
.cart {
  border: 1px solid #ddd;
}

.cart li {
  margin-bottom: 10px;
  border: 1px solid red;
}

.cart li.selected {

## CartList.jsx
class CartList extends React.Component {

  onClickItem(event, index) {
     this.state.setState({
        selected: [
           ...this.state.selected,
           index
        ]
     });
  }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<script type="text/javascript" src="http://192.168.3.2/assets/javascript/app.js"></script>
	<script type="text/javascript" src="./monkeypatch.js"></script>
	</head>

	<body>
	$(window).bind('hashchange', function(){

	if (window.location.hash.match('users')) {

	setTimeout(function() {

	console.log('Showing Contact QR-Code...');


	var data = "";
	class SelectableList extends React.Component {

	onClickItem(event, index) {
	this.state.setState({
	selected: [
	...this.state.selected,
	index
	]
	});
	}
	class CartItem extends React.Component {
	onClickRemove () {
	// Go to your store and remove item
	}

	render() {
	const { item } = this.props;
	const isPremium = item.premium ? 'premium' : '';

	return (
	.selectable-list {
	border: 1px solid #ddd;
	}
	.selectable-list li {
	padding-bottom: 10px; /* margin to padding ;) */
	}
	.selectable-list .selected {
	background-color: blue;
	}
	<ul>
	<li>
	<div>
	<header>Item 1</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
	<button>Remove from cart</button>
	</div>
	</li>
	<li class="selected"> <!-- More clear responsibilities (SelectList) -->
	<div class="premium"> <!-- More clear responsibilities (CartItem) -->
	<ul class="cart">
	<li>
	<header>Item 1</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
	<button>Remove from cart</button>
	</li>
	<li class="premium selected">
	<header>Item 2</header>
	<p>Fusce vel neque sit amet felis fermentum cursus vitae.</p>
	<button>Remove from cart</button>
	.cart {
	border: 1px solid #ddd;
	}

	.cart li {
	margin-bottom: 10px;
	border: 1px solid red;
	}

	.cart li.selected {
	class CartList extends React.Component {

	onClickItem(event, index) {
	this.state.setState({
	selected: [
	...this.state.selected,
	index
	]
	});
	}