<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Bobdacious/pen/qZJroM" />
<style class="cp-pen-styles">body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
section, footer, header, aside, nav{
display: block;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 40px;
margin-bottom: 10px;
}
.search{
background-color:#5c9bb7;
background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
background-image:linear-gradient(top, #5c9bb7, #5392ad);
box-shadow: 0 1px 1px #ccc;
border-radius: 2px;
width: 400px;
padding: 14px;
margin: 45px auto 20px;
margin-top: 20px;
position:relative;
}
.search input{
background:#fff no-repeat 13px 13px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5NEY0RTlFMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5NEY0RTlGMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk0RjRFOUMxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk0RjRFOUQxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DjA/RAAABK0lEQVR42pTSQUdEURjG8dOY0TqmPkGmRcqYD9CmzZAWJRHVRIa0iFYtM6uofYaiEW2SRJtEi9YxIklp07ZkWswu0v/wnByve7vm5ee8M+85zz1jbt9Os+WiGkYdYxjCOx5wgFeXUHmtBSzpcCGa+5BJTCjEP+0nKWAT8xqe4ArPGEEVC1hHEbs2oBwdXkM7mj/JLZrad437sCGHOfUtcziutuYu2v8XUFF/4f6vMK/YgAH1HxkBYV60AR31gxkBYd6xAeF3VzMCwvzOBpypX8V4yuFRzX2d2gD/l5yjH4fYQEnzkj4fae5rJulF2sMXVrAsaTWttRFu4Osb+1jEDT71/ZveyhouTch2fINQL9hKefKjuYFfuznXWzXMTabyrvfyIV3M4vhXgAEAUMs7K0J9UJAAAAAASUVORK5CYII=);
border: none;
width: 100%;
line-height: 19px;
padding: 11px 0;
border-radius: 2px;
box-shadow: 0 2px 8px #c4c4c4 inset;
text-align: left;
font-size: 14px;
font-family: inherit;
color: #738289;
font-weight: bold;
outline: none;
text-indent: 40px;
}
#products ul{
list-style: none;
width: 500px;
margin: 0 auto;
text-align: left;
}
ul li{
border-bottom: 1px solid #ddd;
padding: 10px;
overflow: hidden;
}
ul li img{
float:left;
border:none;
margin-right: 15px;
}
#products ul li p{
margin-left: 75px;
font-weight: bold;
padding-top: 5px;
color:#6e7a7f;
}
.categories {
-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
box-shadow:inset 0px 1px 0px 0px #97c4fe;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0);
background-color:#3d94f6;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #337fed;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #1570cd;
}
.categories:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0);
background-color:#1e62d0;
}
.categories:active {
position:relative;
top:1px;
}
.selected {
-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
box-shadow:inset 0px 1px 0px 0px #3dc21b;
background-color:#32ad1f;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.selected:hover {
background-color:#30ad4d;
}
.selected:active {
position:relative;
top:1px;
}
#cart {
position: fixed;
right: 300px;
top: 0px;
width: 400px;
}
#cartName {
width: 200px;
}
#cartName ul li p {
margin-left: 0px;
font-weight: normal;
padding-top: 0px;
}</style></head><body>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<h1>Puter Parts</h1>
<form>
<div class="search">
<input type="text" v-model="searchString" placeholder="Search" />
</div>
</form>
<button id="GPU" class="categories" @click="selectCategory('Graphics Card')">Graphics Cards</button>
<button id="CPU" class="categories" @click="selectCategory('Processor')">Processors</button>
<button id="Mobo" class="categories" @click="selectCategory('Motherboard')">Motherboards</button>
<div id="products">
<ul>
<li v-for="i in products | searchFor searchString | filterBy selectedCategory in 'category'">
<img v-bind:src="i.image" />
<p>{{i.product}}</p>
<p>£{{i.price}}
<select v-model="quantity[i.id].quantity" number>
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button id="GPU" class="categories" @click="addToCart(i.id)">Add To Cart</button>
</p>
</li>
</ul>
</div>
<div id="cart" v-show="shoppingCart.length > 0">
<h2>Shopping Cart</h2>
<ul>
<li v-for="i in shoppingCart">
<p id="cartQuan">{{i.quantity}} X {{i.name}}</p>
<p id="cartPrice">{{i.price}} <button @click="removeFromCart(i, i.productId)">X</button></p>
</li>
<li>Total: £{{ totalPrice }}</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >Vue.filter('searchFor', function (value, searchString) {
var result = [];
if(!searchString){
return value;
}
searchString = searchString.trim().toLowerCase();
result = value.filter(function(item){
if(item.product.toLowerCase().indexOf(searchString) !== -1){
return item;
}
})
return result;
})
new Vue({
el: 'body',
data: {
searchString: "",
selectedCategory: "",
shoppingCart: [],
quantity: [
{ "id": "0", "quantity": 1 }, { "id": "1", "quantity": 1 },
{ "id": "2", "quantity": 1 }, { "id": "3", "quantity": 1 },
{ "id": "4", "quantity": 1 }, { "id": "5", "quantity": 1 },
{ "id": "6", "quantity": 1 }, { "id": "7", "quantity": 1 },
{ "id": "8", "quantity": 1 }, { "id": "9", "quantity": 1 }
],
products: [
{
"id": "0",
"product": "Asus GeForce GTX 980Ti DS3 Strix",
"price": 559.99,
"category": "Graphics Card",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/GX388AS_119199_105x105.jpg",
"inCart": false
},
{
"id": "1",
"product": "EVGA GeForce GTX 980Ti Superclocked ACX 2.0+",
"price": 559.99,
"category": "Graphics Card",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/GX288EA_112617_105x105.jpg",
"inCart": false
},
{
"id": "2",
"product": "Asus Radeon R9390X DS3 OC Strix",
"price": 329.99,
"category": "Graphics Card",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/GX373AS_117053_105x105.jpg",
"inCart": false
},
{
"id": "3",
"product": "Sapphire Radeon R9390X Nitro",
"price": 349.99,
"category": "Graphics Card",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/GX376SP_121594_105x105.jpg",
"inCart": false
},
{
"id": "4",
"product": "Intel Core i7-6700K 4.0GHz (Skylake)",
"price": 289.99,
"category": "Processor",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/CP581IN_114995_105x105.jpg",
"inCart": false
},
{
"id": "5",
"product": "Intel Core i5-6600K 3.9GHz (Skylake)",
"price": 197.99,
"category": "Processor",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/CP579IN_114994_105x105.jpg",
"inCart": false
},
{
"id": "6",
"product": "AMD Piledriver FX-8 9590 Black Edition 4.70GHz (5.00GHz Turbo)",
"price": 161.99,
"category": "Processor",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/CP336AM_60876_105x105.jpg",
"inCart": false
},
{
"id": "7",
"product": "AMD Piledriver FX-8 8350 Black Edition 4.00GHz",
"price": 139.99,
"category": "Processor",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/CP336AM_60876_105x105.jpg",
"inCart": false
},
{
"id": "8",
"product": "Asus Maximus VIII Hero Intel Z170 (Socket 1151) ATX Motherboard",
"price": 176.99,
"category": "Motherboard",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/MB651AS_114892_105x105.jpg",
"inCart": false
},
{
"id": "9",
"product": "Asus Crosshair V Formula Z AMD 990FX (Socket AM3+) Motherboard",
"price": 184.99,
"category": "Motherboard",
"image": "https://www.overclockers.co.uk/media/image/thumbnail/MB554AS_83151_105x105.jpg",
"inCart": false
}
]
},
computed: {
totalPrice: function() {
var total = 0
this.shoppingCart.forEach(function(item) {
total += item.price * item.quantity
})
return total
}
},
methods: {
selectCategory: function(category) {
if(category == "Graphics Card"){
var button = 'GPU'
document.getElementById(button).className = "selected"
document.getElementById('CPU').className = "categories"
document.getElementById('Mobo').className = "categories"
}
else if(category == "Processor"){
var button = 'CPU'
document.getElementById(button).className = "selected"
document.getElementById('GPU').className = "categories"
document.getElementById('Mobo').className = "categories"
}
else{
var button = 'Mobo'
document.getElementById(button).className = "selected"
document.getElementById('GPU').className = "categories"
document.getElementById('CPU').className = "categories"
}
if(this.selectedCategory !== category){
this.selectedCategory = category
}
else{
this.selectedCategory = ""
document.getElementById(button).className = "categories"
}
},
addToCart: function(id) {
var id = id
var index = this.shoppingCart.length
if(this.products[id].inCart == false) {
this.products[id].inCart = true
this.shoppingCart.$set(index, {
productId: id,
quantity: this.quantity[id].quantity,
name: this.products[id].product,
price: this.products[id].price,
})
}
else {
product = _.find(this.shoppingCart, ['productId', id])
product.quantity = product.quantity + this.quantity[id].quantity
}
},
removeFromCart: function(i, productId) {
id = productId
this.products[id].inCart = false
this.shoppingCart.$remove(i)
}
}
});
//# sourceURL=pen.js
</script>
</body></html>
