Bootstrap Snippet shop using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<section class="shop  js-shop">
    <script>
        /*
 * Make sure to read this from the bottom up to see what's going on.
*/
function Item(name, description, price, photo) {
  // Make sure that the object is accessible from at any scope inside it
  var _this = this;
  (function init() {
    // Initialise Item object, probably from JSON file
    _this.name = name;
    _this.description = description;
    _this.price = price;
    _this.photo = photo;
    // Count and cost start off at 0
    _this.count = 0;
    _this.cost = 0;
    // Have the wrapper, which is the node for this item
    _this.wrapper = null;
    // Their values will need to change, so keep track of them here
    _this.countView = null;
    _this.costView = null;
    _this.countHidden = null;
    _this.costHidden = null;
  })();
}
  // Update the visible and hidden fields for count and cost
Item.prototype.update = function() {
  var _this = this;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*,
button,
input,
select {
    box-sizing: inherit;
}
html {
    background: #e5eaee;
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
    margin: 0;
}
.shop {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.item {
    background: white;
    box-shadow: 0 2px 5px #c5cacc;
    flex: 0 auto;
    margin: 1em;
    text-align: center;
    width: 15em;
}
.item__name {
    text-transform: capitalize;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"shop"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"shop" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"shop"
Bootstrap 3.0.0 Snippet by evarevirus