Code Pens

At InnovaSystems I do a lot of prototyping in HTML, CSS and jQuery due to the complexity of the software we create. Also because of the fact that I provide the HTML and CSS for the final project. We deliver this HTML and CSS to our development team with jQuery interactions so they can hit the ground running with fewer questions and a bit of a head start.

The code pens below were created either for practice, to isolate something I wanted to use a prototype, to test out different options, or to create a proof of concept to send to someone on the development team.

---

Rock, Paper, Scissors

I created this pen after I finished a JavaScript CodeAcademy course. The course ended with a simple Rock, Paper, Scissors game that you could play in the console. I wanted to take it to the next level and have it work as an HTML prototype.

As I made progress, I shared the link with my supervisor who would come up with challenges, specifically focused on the JavaScript. This is how we eventually identified how far was too far for the design team, and what should be left to the development team. You may notice there isn't any HTML in the JavaScript. That's not a practice I follow with the HTML prototypes I create today, but it was a fun challenge for this pen.

See the Pen Console Rock, Paper, Scissors Game by Tara Jensen (@TLJens) on CodePen.

Mirrored Selectors, Show/Hide Selector & Simple Select-All

See the Pen Easy Select All by Tara Jensen (@TLJens) on CodePen.

CSS Styles

In this code pen, I was testing out CSS variations for an inset style which we used in blank states for a project I was working on at the time. The differences are subtle, but I wanted it to feel like it was actually carved into a flat material.

See the Pen Box Shadows by Tara Jensen (@TLJens) on CodePen.

Simple Form Validation

Just a simple way to check all the input fields and add validation styles to blank fields. A lot of my prototypes include form validation. I like to have a code pen around to snag things from. The reset button tests resetting a form, which I commonly do in prototype. Not usually from a "reset" button, however.

See the Pen Reusable Bootstrap Form Validation by Tara Jensen (@TLJens) on CodePen.

Other code pens I've created can be found at codepen.oi/TLJens/.