eladcandroid · March 31, 2019 11:06 · eladcandroid · Mar 31, 2019
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="lib/vue.js"></script>
  </head>
  <body>
    <style>
      .cart-badge {
        background-color: #6394f8;
        border-radius: 10px;
        color: white;
        display: inline-block;
        font-size: 18px;
        line-height: 1;
        padding: 3px 7px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        position: relative;
        bottom: 30px;
      }
      .item {
        border: 1px solid black;
        height: 300px;
        float: left;
        padding: 10px;
        margin: 10px;
        text-align: center;
      }
      .add-to-cart {
        text-align: center;
        padding: 10px;
      }
      .add-to-cart button {
        background: #6394f8;
        color: #FFF;
        font-size: 16px;
        border-radius: 10px;
        padding: 10px;
      }
    </style>

    <div id="app"></div>
    <script>
      Vue.component('item', {
        props: ['description', 'img', 'id'],
        template: `<div class="item">
          <div class="add-to-cart"><button @click="$emit('add-to-cart', id)">Add to cart</button></div>
          <div class="desc">Item description: {{description}}</div>
          <img :src="img" width="100"/>          
          </div>`
      });

      Vue.component('ItemsList', {
        data() {
          return {
            cartItemsCount: 0,
            cartItems: [],
            items: [
              {
                id: 1,
                description: 'Black Shoes',
                img:
                  'https://upload.wikimedia.org/wikipedia/commons/0/08/Shoes%2C_pair_%28black%29_%28AM_1978.53-3%29.jpg'
              },
              {
                id: 2,
                description: 'Funny T-Shirt',
                img:
                  'https://farm1.staticflickr.com/42/124672109_7e972baf03_m_d.jpg'
              }
            ]
          };
        },
        methods: {
          addToCart(id) {
            this.cartItemsCount++;
            const item = this.items.find((item)=>item.id===id);
            this.cartItems.push(item);
          }
        },
        template: `<div>
          <div>
            <div class="cart">
              <span class="cart-icon"><img width="50" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/twitter/180/shopping-trolley_1f6d2.png"></span>
              <span class="cart-badge">{{cartItemsCount}}</span></div>
              <div class="cart-items-list"><div v-for="cartItem in cartItems">{{cartItem.description}} Added</div></div>
            </div>
            
            <item v-for="item in items" :description="item.description" :id="item.id" :img="item.img" :key="item.id" @add-to-cart="addToCart"/>          
          </div>`
      });
      var app = new Vue({
        el: '#app',
        template: `<items-list/>`                 
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script src="lib/vue.js"></script>
	</head>
	<body>
	<style>
	.cart-badge {
	background-color: #6394f8;
	border-radius: 10px;
	color: white;
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	padding: 3px 7px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	position: relative;
	bottom: 30px;
	}
	.item {
	border: 1px solid black;
	height: 300px;
	float: left;
	padding: 10px;
	margin: 10px;
	text-align: center;
	}
	.add-to-cart {
	text-align: center;
	padding: 10px;
	}
	.add-to-cart button {
	background: #6394f8;
	color: #FFF;
	font-size: 16px;
	border-radius: 10px;
	padding: 10px;
	}
	</style>

	<div id="app"></div>
	<script>
	Vue.component('item', {
	props: ['description', 'img', 'id'],
	template: `<div class="item">
	<div class="add-to-cart"><button @click="$emit('add-to-cart', id)">Add to cart</button></div>
	<div class="desc">Item description: {{description}}</div>
	<img :src="img" width="100"/>
	</div>`
	});

	Vue.component('ItemsList', {
	data() {
	return {
	cartItemsCount: 0,
	cartItems: [],
	items: [
	{
	id: 1,
	description: 'Black Shoes',
	img:
	'https://upload.wikimedia.org/wikipedia/commons/0/08/Shoes%2C_pair_%28black%29_%28AM_1978.53-3%29.jpg'
	},
	{
	id: 2,
	description: 'Funny T-Shirt',
	img:
	'https://farm1.staticflickr.com/42/124672109_7e972baf03_m_d.jpg'
	}
	]
	};
	},
	methods: {
	addToCart(id) {
	this.cartItemsCount++;
	const item = this.items.find((item)=>item.id===id);
	this.cartItems.push(item);
	}
	},
	template: `<div>
	<div>
	<div class="cart">
	<span class="cart-icon"><img width="50" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/twitter/180/shopping-trolley_1f6d2.png"></span>
	<span class="cart-badge">{{cartItemsCount}}</span></div>
	<div class="cart-items-list"><div v-for="cartItem in cartItems">{{cartItem.description}} Added</div></div>
	</div>

	<item v-for="item in items" :description="item.description" :id="item.id" :img="item.img" :key="item.id" @add-to-cart="addToCart"/>
	</div>`
	});
	var app = new Vue({
	el: '#app',
	template: `<items-list/>`
	});
	</script>
	</body>
	</html>