Responsive Shopping Cart Challenge

I stumbled upon CodePen’s “Shopping Cart” challenge yesterday. Apparently CodePen has weekly challenges that anyone can enter. They generally involve building some frontend web interface. Two winners are chosen at the end of the week.

I was a little late to the game on this one. It opened up on 5/30/2013 and closes on 6/6/2013. Today is 6/5/2013. Regardless, I thought I’d take a stab at it. Here is my entry, and here’s a quick rundown of what it includes along with an embed of the actual shopping cart.

• A clean, crisp shopping cart design
• Functionality for adjusting quantity and removing items (totals are updated accordingly)
• A fully responsive display with breakpoints at 650px and 350px for smaller tablets and mobile phones (resize your browser to slimmer widths to see this in action)

Overall, I’m pretty happy with the result based on the short amount of time I spent on it. I gained some experience mimicking a <table> layout via <div> use, which allowed for easy responsive adjustment. This was also my first time actually using CodePen, so that was nice too.

However, after completing the challenge, I realized that the winners are based on the number of “likes” and not a judge’s assessment… Since I created mine on the final day, and some of the competition already has a bunch of likes, I basically have no shot at winning. That’s ok. There are a few other entries out there that bring some cool things to the table, so I didn’t really expect to win anyway. Regardless, it was a good experience and I created some code that I can (and probably will) reuse.