##V1 Sticky-Reminder

###The Struggle Originally I started off using jQuery.noConflict() in my code in:

jQuery.noConflict();
(function( $ ) {
  $(function() {
    //my code
  });
})(jQuery);

And it was fine, until I had to write html without multiline functionality. So I'm quite thankful for the timpl templates. :)

###The Easy The first thing I did was create the modal. The CSS was the most tedious, but the easiest. I used a fixed position to stick it to the bottom of the page.

	jQuery('.modal').css({
		'border': '1px solid #b7b5b6',
		'width': '575px',
		'height': '200px',
		'overflow': 'hidden',
		'font-family': 'Arial',
		'position': 'fixed',
		'z-index': '10000',
		'bottom' : '0',
		'right' : '-575px',

	});

###The Challenge However, the sliding animation took me a bit longer to figure out. I already knew slideToggle() was not an option because it only slides up and down. jQuery UI has that functionality, but requires importing a new library. I almost went the CSS transitions route and then I discovered the awesomeness of .animate(), and how it accomplished what I wanted it in one line!

	jQuery('.modal').animate({'right': '0'}, 500, function(){
	//	jQuery('#cartHeader').css({'color': '#ffa933'})
	// 	#winning!
	})

###Just for Fun I used a little regex to display the amount of items from the 'my cart string', which worked really nicely with the timpl templates. I also wanted to see if I could get the random image and data from the cart items, but I wasn't sure how to pull that off, so I stuck a random image as a placeholder. :/

var regEx = new RegExp(/\(([^)]+)\)/);
var items = regEx.exec($('#cartHeader').text());

###Goal-Tracking I have three goals/alerts on all the clickable elements of the modal: the X button, the view cart, and continue shopping.

##V2 Mini-Cart Auto PopUp

###Show and Tell This one was relatively easy compared to the sticky assignment. First I targeted the .top-cart and #topCartContent to unhide the elements.

	jQuery('.top-cart').css({'z-index':'1000'});
	jQuery('#topCartContent').css({'display':'block'});

###Prepend vs Before I used .prepend() first, but it gave me the issue of inserting the welcome box inside the element, so I changed it to .before() which appends the box right above the content.

	jQuery('.inner-wrapper').before(timpl(function () {/**/}

###Hide Me The notes mentioned the welcome box only appears when the user returns and then functions normally afterwards. I attached a click function to the closed button, so that the box gets hidden when the user clicks the closed link.

	jQuery('.close-btn').click(function(){
		jQuery('#topCartContent').hide();
	});

###Goal-Tracking I added alerts to the closed button, view cart, and checkout buttons.