Theresa's Cereal

by Erik Woods

HTML

<nav id="cereal_nav">
    <a href="#" data-ingredient="oats" data-weight="10">
        <span class="name">oats</span> (10oz ea)
    </a>
    <a href="#" data-ingredient="blueberries" data-weight="15">
        <span class="name">blue berries</span> (15oz ea)
    </a>
    <a href="#" data-ingredient="strawberries" data-weight="20">
        <span class="name">strawberries</span> (20oz ea)
    </a>
    <a href="#" data-ingredient="oreos" data-weight="25">
        <span class="name">oreos</span> (25oz ea)
    </a>
    <a href="#" data-ingredient="marshmellows" data-weight="30">
        <span class="name">marshmellows</span> (30oz ea)
    </a>
</nav>

<ul id="cereal_cart"></ul>

<div id="cereal_weight_limit"><span class="total">0</span>/<span class="limit">100</span>oz</div>

<button data-reset>Reset</button>
<button data-add>Add to Cart</button>

<div id="summary"></div>

<!-- ignore this bit -->
<footer>
    <p>My friend Theresa wanted this so I made it.</p>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

CSS

body {
    padding: 0 0 100px 0;
}

button {
    margin: 5px;
}

.error {
    background: #f00;
    color: #fff;
}

#cereal_nav {
    display: block;
}

#cereal_nav a {
    background: #0f0;
    color: #00f;
    display: inline-block;
    margin: 5px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

#cereal_cart {
    margin: 20px 0;
    width: 500px;
}

#cereal_cart li {
    background-position: center center !important;
    display: block;
    padding: 10px;
    text-align: center;
    width: 100%;
}

#cereal_cart li span.ingredient-wrapper {
    background: #fff;
    padding: 2px;
}

#cereal_cart li.oats {
    background: url('http://st1.thehealthsite.com/wp-content/uploads/2013/04/oats.jpg');
}

#cereal_cart li.blueberries {
    background: url('http://www.ediblelandscapingmadeeasy.com/wp-content/uploads/2011/12/close-up-of-blueberries.jpg');
}

#cereal_cart li.strawberries {
    background: url('http://3.bp.blogspot.com/-fhdb8QEMVG8/T_m7WCzd8yI/AAAAAAAAAnU/olET7xTreEQ/s1600/Strawberries.jpg');
}

#cereal_cart li.oreos {
    background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRk5xPH8peBlMz8bwykippQ3s8Qd2_RtJ2yg38Ko1NlHrprkq86');
}

#cereal_cart li.marshmellows {
    background: url('http://mariasmovers.com/wp-content/uploads/2011/11/homemade-marshmallow.jpg');
}

#cereal_weight_limit {
    -o-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    margin: 5px;
    padding: 10px;
}

#summary {
    margin: 5px;
}

#summary div {
    border: 1px solid #f00;
    margin-top: 20px;
    padding: 10px;
}

/* ignore this bit */
footer {
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}

JavaScript

$('#cereal_nav a').on('click', function (e) {
    e.preventDefault();
    var clicked = $(this);
    var ingredient_class = clicked.attr("data-ingredient");
    var ingredient_name = clicked.find('.name').text();
    var weight = parseInt(clicked.attr("data-weight"), 10);
    var weight_limit = parseInt($('#cereal_weight_limit .limit').text(), 10);
    var weight_total = parseInt($('#cereal_weight_limit .total').text(), 10);
    var yeahadditbro = true;

    if (weight_total < weight_limit && weight_total + weight <= weight_limit) {
        $('#cereal_weight_limit .total').text(weight_total + weight);

        $('#cereal_cart li').each(function () {
            if ($(this).hasClass(ingredient_class)) {
                var current_weight = parseInt($('.weight', this).text(), 10);
                $('.weight', this).text(current_weight + weight);

                yeahadditbro = false;
            }
        });

        if (yeahadditbro) {
            $('#cereal_cart').append(
                '<li class="' + ingredient_class + '">' +
                '<span class="ingredient-wrapper">' + ingredient_name + ' - <span class="weight">' + weight + '</span>oz' +
                '</span>' +
                '</li>');
        }
    } else {
        $('#cereal_weight_limit').addClass('error')
            .on(transEnd, function () {
            $(this).removeClass('error');
        });
    }
});

$('button[data-reset]').on('click', function () {
    $('#cereal_weight_limit .total').text('0');
    $('#cereal_cart').empty();
});

$('button[data-add]').on('click', function () {
    var summary = '<div><p>Item added to cart:</p><ul>';
    var shitsempty = true;

    $('#cereal_cart li').each(function () {
        summary += '<li>' + $(this).text() + '</li>';
        shitsempty = false;
    });

    summary += '</ul></div>';

    if (!shitsempty) {
        $('#summary').prepend(summary);
        $('button[data-reset]').click();
    }
});

var transEnd = 'transitionend...