Zax Snax

shopping cart

by Zach Sergeant

HTML

<body>
<h1>Zax Snax</h1>

<table>
 
</table>

<h3>Cart</h3>
<div id="cart"></div>
 
<h3>Total</h3>

CSS

.deets {
    display: none;
}
.item {
    font-weight: bold;
}

body {
    background-color: yellow;
}

.images {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

JavaScript

var total = 0

var items = [{
    name:"Doritos: ",
    description:"Nacho cheese flavored chips",
    price:'1',
    img:"http://9amcommunications.files.wordpress.com/2012/06/doritos.jpg"
}, {
    name:"Cheeze-its: ",
    description:"Cheese crackers",
    price:'2',
    img:"http://www.seriouseats.com/images/2014/03/20140318-cheez-it-taste-test-original.jpg"
}, {
    name:"Apple: ",
    decription:"Just an apple",
    price:'1',
    img:'http://www.syracusenewtimes.com/wp-content/uploads/2014/09/apple-e1382039006457.jpg'
}];

$(document).ready(function () {
    var $tbl = $('table');
    for (var i = 0; i < items.length; i++) {
         $tbl.append('<tr>' +
                    '<td><span class="item">' + items[i].name + items[i].price +  
                     '<img class="images" src="' + items[i].img + '" /></span><br><span class="deets">' + items[i].description + '</td>' + 
                    '<td><button class="add">Add to Cart</button></td>' +
                    '<td><button class="more">More Info</button></td>' + 
                    '</tr>');    
        
    }
    
});



$('.images').mouseover(function () {
    var $this = $(this);
    $(this).css('border-radius', '10%');
});

$('.images').mouseout(function () {
    $('.images').css('border-radius', '50%');
});

$('.add').on('click', function () {
    var $this = $(this);
    var text = $this.parent().parent().find('.item').text();
    $('#cart').append('<div>' + text + '</div>');
    total += parseFloat($(this).parent().parent().children(':first-child').first().text());
    $('.total').html(total);
    
});

$('.more').on('click', function () {
    var $this = $(this);
    $this.parent().parent().find('.deets').toggle();
    if ($this.text() === 'More Info') {
        $this.text('Less Info');
    } else {
        $this.text('More Info');
    }
});